メッシュの片面の色を変更しようとしています。これはWebGLのコンテキストにあります。私はメッシュの色全体を変えることができます。以下関連コード:Three.jsで顔色を変更する方法
// Updated Per Lee!
var camera = _this.camera;
var projector = new THREE.Projector();
var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObjects(kage.scene.children);
if (intersects.length > 0) {
face = intersects[0].face;
var faceIndices = ['a', 'b', 'c', 'd'];
var numberOfSides = (face instanceof THREE.Face3) ? 3 : 4;
// assign color to each vertex of current face
for(var j = 0; j < numberOfSides; j++) {
var vertexIndex = face[ faceIndices[ j ] ];
// initialize color variable
var color = new THREE.Color(0xffffff);
color.setRGB(Math.random(), 0, 0);
face.vertexColors[ j ] = color;
}
}
次のように私はこの場合にも、キューブのオブジェクトを初期化:材料を変更
// this material causes a mesh to use colors assigned to vertices
var material = new THREE.MeshBasicMaterial({
color: 0xf0f0f0,
shading: THREE.FlatShading,
vertexColors: THREE.VertexColors
});
var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
directionalLight.position.set(10, 1, 1).normalize();
kage.scene.add(directionalLight);
var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);
cube.dynamic = true;
kage.scene.add(cube);
にかかわらず、光の色のキューブは、白色となります。 交差ロジックがまだ機能しています。つまり、正しい顔を選択していますが、色は変わりません。
私は[うまくいけば、私の編集が混乱していない、よくある質問を] StackOverflowのために新たなんだ
r65で作業しています。 –
これは私を近づけましたが、 'geometry.colorsNeedUpdate = true'を追加する必要がありました – twmulloy