忍者ブログ

Memeplexes

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

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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