忍者ブログ

Memeplexes

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

Three.dartでBufferGeometryを使う その1 初期化

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';

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() {
  BufferGeometry 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.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() {
  renderer.setClearColorHex(0x6495ED, 1.0);
  renderer.render(scene, camera);
}

結果

こうなります。

このプログラムは三角形を表示します。三角形の形を決めているのがBufferGeometryで、これに指定した座標のとおりの図形が描き出されるわけです。

BufferGeometryでは実行時にぐねぐね動く面白いことができるのですが、ここでは話を単純にするため初期化だけを行っています。

拍手[0回]

PR