Toggle

CG制作

アニメーション付jsonモデルをWebGLで表示する方法

アニメーション付jsonモデルをWebGLで表示する方法

さて、前回jsonモデルの出力までをご説明しました。
CINEMA4DからWebGLへの出力(Blender経由)

今回は、そのモデルをブラウザーで表示する方法について書きたいと思います。
ブラウザーは最新のものを使用してください。
WebGLを使いますが、前回もご紹介したthree.jsを使用します。

下記のjsを使用しますので、three.jsから制作する環境にコピーしておきます。
three.min.js
OrbitControls.js

htmlのページで読み込んで使用します。

<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();
            }
URL
TBURL

コメントを投稿する

*
*
* (公開されません)

Return Top