Three.js でCOLLADA(.dae) を読み込み、モデルに紐づいた頂点カラーをシェーダで使用する。

daeのファイル名はcube.daeで、./model/に配置。

var loader = new THREE.ColladaLoader();
loader.load('./model/cube.dae', function(data)
{
    data.scene.traverse(function(obj)
    {
        if(obj instanceof THREE.Mesh === true)
        {
            var mesh = obj;
            mesh.material = new THREE.ShaderMaterial({
                vertexShader: document.getElementById('vertexShader').textContent,
                vertexColors: THREE.VertexColors,
                fragmentShader: document.getElementById('fragmentShader').textContent
            });
            // あらかじめ生成したsceneにadd
            scene.add(mesh);
        }
    }); 
});

data.sceneは、THREE.Scene。daeではカメラなどを含んだシーンまるごとがデータのため、Sceneの子要素からモデルを抽出している。.traverseは、THREE.Sceneの子要素を取り出す関数。

ローダーは、three.jsの本体には入っていないので、別途読み込む必要がある。

<script src="js/loaders/ColladaLoader.js"></script>

ShaderMaterialで頂点カラーを使いたいときは、vertexColors: THREE.VertexColors を指定。Vertex Shader上では、attribute vec3 colorで渡される。

頂点カラーの情報をモデルにもたせて使いたい場合、daeが何かとやりやすいのでないかなと。fbxは何かとつらい。