La géométrie simplifiée de Threejs n'a pas de couleur

Question

J'essaie le SimplifyModifier for Threejs (https://threejs.org/examples/js/modifiers/SimplifyModifier.js) et cela fonctionne très bien, mais la géométrie de sortie est différente d'une manière qui l'empêche d'avoir une couleur. Voici un violon montrant le problème:

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);  
} 

(Testé dans Chrome et FF sur les fenêtres au cas où il importe)

Quel est le problème - pourquoi est la géométrie simplifiée que gris et comment puis-je répare le?

Answer 1

THREE.SimplifyModifier() ne calcule pas les normales de face automatiquement. Donc, vous pouvez le faire après l'application du modificateur:

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