Cubeの各面に異なるマテリアルを使う
見事にハマったのでメモしておく。
//Cube var materials = []; for(var i = 0;i < 6;i++){ materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); } var CUBE_WIDTH = 200; var CUBE_HEIGHT = 200; var CUBE_DEPTH = 200; var CUBE_WIDTH_SEGMENTS = null; var CUBE_HEIGHT_SEGMENTS = null; var CUBE_DEPTH_SEGMENTS = null; var cube_geo = new THREE.CubeGeometry( CUBE_WIDTH, CUBE_HEIGHT, CUBE_DEPTH, CUBE_WIDTH_SEGMENTS, CUBE_HEIGHT_SEGMENTS, CUBE_DEPTH_SEGMENTS, materials ); //空のマテリアル var cube_material = new THREE.MeshFaceMaterial(); cube = new THREE.Mesh(cube_geo,cube_material); scene.add(cube);
Cubeの6面に異なる色のマテリアルを使用することを考える。
・参考デモ
https://threejsdoc.appspot.com/doc/three.js/examples/canvas_geometry_cube.html
しかし上のコードを写経しても自分の環境では動かなかった。
バージョンr53で仕様変更があった
調べると衝撃の事実が判明。
バージョンr53以降にはGeometryの引数にmaterialsを指定することはできない。
・ドキュメント変更部分
Migration · mrdoob/three.js Wiki · GitHub
Geometry no longer has a materials property. MeshFaceMaterials usage is now like this: new THREE.Mesh( geometry, new THREE.MeshFaceMaterials( [ material1, material2 ] ) ). Meaning that face.materialIndex will map the array passed to MeshFaceMaterials.
・参考サイト
javascript - Three.js cube with different texture on each face - Stack Overflow
MeshFaceMaterialsにmaterialを指定する
var cube_geo = new THREE.CubeGeometry( CUBE_WIDTH, CUBE_HEIGHT, CUBE_DEPTH, CUBE_WIDTH_SEGMENTS, CUBE_HEIGHT_SEGMENTS, CUBE_DEPTH_SEGMENTS ); var cube_material = new THREE.MeshFaceMaterial(materials);
バージョンr53以降はこれで動く。jsdoitのthreejsライブラリのバージョンがr60だったため写経しても動かなかった。参考にしたデモサイトのバージョンはr46だった。