さて、前回jsonモデルの出力までをご説明しました。
CINEMA4DからWebGLへの出力（Blender経由）
今回は、そのモデルをブラウザーで表示する方法について書きたいと思います。
ブラウザーは最新のものを使用してください。
WebGLを使いますが、前回もご紹介したthree.jsを使用します。
下記のjsを使用しますので、three.jsから制作する環境にコピーしておきます。
three.min.js
OrbitControls.js
ｈｔｍｌのページで読み込んで使用します。
<head> <script src="three.min.js"></script> <script src="OrbitControls.js"></script> </head>
続いて、three.jsのシーンを構築します。
シーン構築に関してはthree.jsのサンプル等もありますので、いろいろいじってみることをおすすめします。
ただ、ローカルでは上手く動作しないこともありますので、実際のサーバに近い環境でテストする方がトラブルも少ないでしょう。
var TOTAL_FRAMES = 90;
// 変数
var mesh;
var scene;
var camera;
var renderer;
var controls;
var lastKeyFrame = null;
var currentKeyFrame = 0;
var flamerate = 1;
init();
function init() {
var width = 640;
var height = 480;
scene = new THREE.Scene(); // シーン作成
// カメラを生成、位置の指定
camera = new THREE.PerspectiveCamera(50, width/height, 1, 10000);
camera.position.z = 200;
camera.position.y = 00;
// 光源 光源色、光強度、光源からの減衰係数を指定して生成
var pointLightA = new THREE.PointLight(0xFFFFFF, 1, 0);
pointLightA.position.set(0, 10, 100); // 光源位置を設定
scene.add(pointLightA); // シーンに追加
// 必要に応じて複数生成してください
// レンダラー
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
// マウスで視点移動出来るようにします
controls = new THREE.OrbitControls(camera, renderer.domElement);
// モデルを読み込みます
var loader = new THREE.JSONLoader();
loader.load('models/h4.json', function (geometry, materials) {
for (var i = 0, l = materials.length; i < l; i++) {
materials[i].morphTargets = true;
}
mesh = new THREE.MorphAnimMesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh.position.set(0, 0, 0);
mesh.scale.set(100, 100, 100);
scene.add(mesh);
animate();
});
}
// アニメーション
function animate() {
requestAnimationFrame(animate);
lastKeyFrame = currentKeyFrame;
currentKeyFrame = currentKeyFrame + flamerate;
if (TOTAL_FRAMES < currentKeyFrame) {
currentKeyFrame = 0;
}
mesh.morphTargetInfluences[lastKeyFrame] = 0;
mesh.morphTargetInfluences[currentKeyFrame] = 1;
renderer.render(scene, camera);
controls.update();
}
