忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

Three.dartでBufferGeometryを使う　その2　形状の変化

Three.dartで実行時にタコのようにダイナミックに変化する物体を描く方法を解説します。

今回は実際に図形を変形させてみます。


コード

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>three.dart sample</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
</body>
</html>

main.dart

import 'dart:html';
import 'package:three/three.dart';

double time = 0.0;
BufferGeometry geometry;

PerspectiveCamera camera;
Scene scene;
WebGLRenderer renderer;


void main() {
  init();
  animate(0);
}

void init() {
  CanvasElement canvas = querySelector("#myCanvas");
  
  scene = new Scene();
  _initCamera(canvas);
  _initMesh();
  renderer = new WebGLRenderer(
      canvas:canvas, 
      devicePixelRatio:window.devicePixelRatio.toDouble()
      );
}

void _initMesh() {
  geometry = _createColoredTriangleMesh();
  var material = new MeshBasicMaterial();
  var mesh = new Mesh(geometry, material);
  scene.add(mesh);
}

BufferGeometry  _createColoredTriangleMesh() {
  BufferGeometry result = new BufferGeometry()
    ..aPosition = new GeometryAttribute.float32(3 * 3, 3);
  
  result.aPosition.array[0 * 3 + 0] = 1.0;
  result.aPosition.array[0 * 3 + 1] = 1.0;
  result.aPosition.array[0 * 3 + 2] = 0.0;
  
  result.aPosition.array[1 * 3 + 0] = -1.0;
  result.aPosition.array[1 * 3 + 1] = 1.0;
  result.aPosition.array[1 * 3 + 2] = 0.0;
  
  result.aPosition.array[2 * 3 + 0] = 0.0;
  result.aPosition.array[2 * 3 + 1] = 0.0;
  result.aPosition.array[2 * 3 + 2] = 0.0;
  
  result.isDynamic = true;
  result.computeBoundingSphere();
  return result;
}

void _initCamera(CanvasElement canvas) {
  camera = new PerspectiveCamera(
      90.0, 
      canvas.width / canvas.height, 
      0.1, 
      1000.0
      );
  
  camera.position.z = 3.0;
  scene.add(camera);
}

void animate(num time) {
  window.requestAnimationFrame(animate);

  draw();
}

void draw() {
  time += 1 / 30;
  
  geometry.aPosition.array[0 * 3 + 1] = time % 2;
  geometry.aPosition.array[1 * 3 + 1] = time % 2;
  geometry.verticesNeedUpdate = true;
  geometry.computeBoundingSphere();
  
  renderer.setClearColorHex(0x6495ED, 1.0);
  renderer.render(scene, camera);
}

実行結果

こうなります。

三角形の高さを変化させながら表示するプログラムです。

拍手[0回]

PR