javascript - Threejs简化几何没有颜色

Question

我正在尝试 Threejs 的 SimplifyModifier ( https://threejs.org/examples/js/modifiers/SimplifyModifier.js )，它工作正常，但输出几何在某种程度上不同，导致它没有颜色。这是一个显示问题的 fiddle :

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 中测试，以防重要)

出了什么问题 - 为什么简化后的几何体只有灰色，我该如何解决？

Answer 1

THREE.SimplifyModifier() 不会自动计算面法线。所以你可以在应用修饰符后这样做:

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