Threejs簡化的幾何沒有顏色

Question

我嘗試SimplifyModifier的Threejs（https://threejs.org/examples/js/modifiers/SimplifyModifier.js），它工作正常，但輸出的幾何形狀以某種方式阻止它有一個顏色不同。下面是顯示該問題的小提琴：

https://jsfiddle.net/k29px10r/

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene();  
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 7; 
    scene.add(camera); 

    geometry = new THREE.RabbitGeometry(); 

    modifer = new THREE.SimplifyModifier(); 
    //bigger number for second arg is more aggressive 
    simplified = modifer.modify(geometry, geometry.vertices.length * 0.5 | 0); 

    material = new THREE.MeshNormalMaterial();  
    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 
    mesh.translateX(1);  
    mesh2 = new THREE.Mesh(simplified, material); 
    scene.add(mesh2); 
    mesh2.translateX(-1); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight);  
    document.body.appendChild(renderer.domElement);  
} 

function animate() {  
    requestAnimationFrame(animate); 
    render();  
} 

function render() {  
    mesh.rotation.x += 0.005; 
    mesh.rotation.y += 0.01;  
    mesh2.rotation.x += 0.005; 
    mesh2.rotation.y += 0.01;  
    renderer.render(scene, camera);  
} 

（經測試，在Chrome和FF在Windows上的情況下，它事項）

什麼問題 - 爲什麼是簡化的幾何形狀只有灰色和我該怎麼辦修理它？

Answer 1

THREE.SimplifyModifier()不會自動計算面法線。所以你可以在應用修改器之後做到這一點：

simplified = modifer.modify(geometry, geometry.vertices.length * 0.5 | 0); 
simplified.computeFaceNormals();