Threejs Simplified Geometryには色がありません

Question

私はSimplifyModifier for 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);  
} 

（それが重要な場合、Windows上でChromeとFFでテスト済み）

何が悪い - なぜ簡略化されたジオメトリのみ灰色で、どのように私はやります修理する？

Answer 1

THREE.SimplifyModifier()は、面法線を自動的に計算しません。だから修飾子を適用した後に行うことができます：

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