CODEWITHSUNDEEP
javascriptthree.js
Aerik
Aerik

Reputation: 2317

Threejs Simplified Geometry has no color

I'm trying the SimplifyModifier for Threejs ( https://threejs.org/examples/js/modifiers/SimplifyModifier.js ) and it works fine, but the output geometry is different in some way that prevents it from have a color. Here's a fiddle showing the problem:

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

(Tested in Chrome and FF on windows in case it matters)

What's wrong - why is the simplified geometry only grey and how do I fix it?

Upvotes: 2

Views: 467

Answers (1)

prisoner849
prisoner849

Reputation: 17576

THREE.SimplifyModifier() doesn't compute face normals automatically. So you can do it after applying the modifier:

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

Upvotes: 2

Related Questions