着色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形狀的個人面孔

回答

相關問題