着色three.js形状的个人面孔

我正在扩展一个简单的例子，显示一个旋转的立方体，我想改变个别面孔的颜色，但没有任何运气。这段代码有什么问题？谢谢着色three.js形状的个人面孔

$(function(){ 
    var camera, scene, renderer, 
    geometry, material, mesh; 

    init(); 
    animate(); 

    function init() { 
     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 10000); 
     camera.position.z = 800; 

     geometry = new THREE.CubeGeometry(500, 70, 70); 

     material_1 = new THREE.MeshBasicMaterial({ 
      color: 0xff0000, 
      shading: THREE.FlatShading, 
      overdraw: true 
     }); 
     material_2 = new THREE.MeshBasicMaterial({ 
      color: 0x00ff00, 
      shading: THREE.FlatShading, 
      overdraw: true 
     }); 
     geometry.materials = [material_1, material_2]; 
     geometry.faces[0].materialIndex = 0; 
     geometry.faces[1].materialIndex = 1; 
     geometry.faces[2].materialIndex = 0; 
     geometry.faces[3].materialIndex = 1; 
     geometry.faces[4].materialIndex = 0; 
     geometry.faces[5].materialIndex = 1; 
     mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); 

     scene.add(mesh); 
     renderer = new THREE.CanvasRenderer(); 
     renderer.setClearColorHex(0x000000, 1); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    } 

    function animate() { 
     requestAnimationFrame(animate); 
     render(); 
    } 
    function render() { 
     mesh.rotation.x += 0.01; 
     mesh.rotation.y += 0.05; 
     renderer.render(scene, camera); 
    } 
});

来源

2013-02-05 Jodes

您需要将一组材料作为参数传递给MeshFaceMaterial构造函数。

相反的：

mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

你应该有：

mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(geometry.materials));

来源

2013-02-05 18:28:33 skewart

我觉得应该是VAR网=新THREE.Mesh（几何，新THREE.MeshFaceMaterial（[material_1，material_2]））; – gaitat

它的工作，谢谢！ – Jodes

网格的var语句包含在文档顶部附近，位于init函数之外。这使得它可以在整个jQuery的'ready'函数中作用域，以便稍后可以对render函数进行访问。在mesh前添加var = new THREE.Mesh（...）会创建一个名为mesh的新变量，指向THREE.Mesh，但其范围仅限于init函数。由于全局网格变量将保持未分配，因此渲染尝试更改网格的旋转会导致错误。 – skewart

着色three.js形状的个人面孔

回答

相关问题