Threejs Simplified Geometry没有颜色

时间:2017-10-12 19:29:57

标签: javascript three.js

我正在为Threejs(https://threejs.org/examples/js/modifiers/SimplifyModifier.js)尝试SimplifyModifier并且它工作正常,但输出几何在某种程度上是不同的,以防止它有颜色。这是一个显示问题的小提琴:

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以防万一)

出了什么问题 - 为什么简化的几何体只是灰色,我该如何解决?

1 个答案:

答案 0 :(得分:1)

awk不会自动计算面部法线。因此,您可以在应用修饰符后执行此操作:

THREE.SimplifyModifier()