¿Por qué la iluminación no funciona en Three.js?

Question

No entiendo por qué la iluminación no funciona en mi código. Descargué un OBJ simple. archivo para probar el OBJLoader pero el modelo no se ve afectado. Antes de editar más la iluminación, al menos la iluminación ambiente funcionaría. Quizás el OBJ. el modelo necesita una textura?

  var container, stats; 

     var camera, scene, renderer, controls; 


     init(); 
     animate(); 


     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 2.5; 
      scene.add(camera); 

      controls = new THREE.TrackballControls(camera); 

      controls.rotateSpeed = 2.0; 
      controls.zoomSpeed = 1.2; 
      controls.panSpeed = 0.0; 

      controls.noZoom = false; 
      controls.noPan = true; 

      controls.staticMoving = true; 
      controls.dynamicDampingFactor = 0.3; 

      controls.keys = [ 65, 83, 68 ]; 

      controls.addEventListener('change', render); 

      var ambient = new THREE.AmbientLight(0x020202); 
      scene.add(ambient); 

      directionalLight = new THREE.DirectionalLight(0xffffff); 
      directionalLight.position.set(1, 1, 0.5).normalize(); 
      scene.add(directionalLight); 

      pointLight = new THREE.PointLight(0xffaa00); 
      pointLight.position.set(0, 0, 0); 
      scene.add(pointLight); 

      sphere = new THREE.SphereGeometry(100, 16, 8); 
      lightMesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xffaa00 })); 
      lightMesh.scale.set(0.05, 0.05, 0.05); 
      lightMesh.position = pointLight.position; 
      scene.add(lightMesh); 


      var loader = new THREE.OBJLoader(); 
      loader.load("originalMeanModel.obj", function (object) { 
       scene.add(object); 
      }); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 
      controls.update(); 

     } 

     function render() { 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 

     } 

Answer 1

Tal this le ayudará si usted está experimentando el mismo problema como yo hace unos días, si no tiene las normales en su obj que es sin duda un lugar a la vista.

Usted puede tratar de comenzar con un MeshBasicMaterial así sólo para comprobar los vértices/caras están bien: new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 })

Además, como dijo el Sr. doob, por favor considere compartir el obj que está cargando.

Answer 2

Tuve problemas similares al utilizar el exportador Three.js para Blender, todo parecía oscuro incluso con colores difusos establecidos en el modelo original de la licuadora y una luz ambiental añadida a la escena en el código Three.js. Resulta que la solución era editar parte del archivo de modelo convertida, había una línea al efecto de:

"colorAmbient" : [0, 0, 0] 

la que he cambiado manualmente a

"colorAmbient" : [0.75, 0.75, 0.75] 

todas partes lo que parecía, y que fija el problema. Lo menciono porque mi mejor versión es que estás experimentando un problema similar a esto. Sin ver el archivo * .obj es difícil diagnosticar el problema exactamente, pero quizás en la configuración de su modelo podría intentar cambiar el valor del color ambiental en lugar de, digamos, el valor de color difuso, que es lo que normalmente pensamos al asignar color a un modelo.

Answer 3

MeshBasicMaterial en THREE.js es como un sombreador toon (bueno para silouhette, dibujo en sombra o estructura metálica) y no se ve afectado por las luces.

Trate MeshLambertMaterial o MeshPhongMaterial