Perché l'illuminazione non funziona in Three.js?

Question

Non capisco perché l'illuminazione non funzioni nel mio codice. Ho scaricato un OBJ semplice. file per testare OBJLoader ma il modello non è interessato. Prima di modificare l'illuminazione di più, almeno l'illuminazione ambientale funzionava. Forse l'OBJ. il modello ha bisogno di una trama?

  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

Forse this vi aiuterà se si verificano lo stesso problema, come me, qualche giorno fa, se non si hanno normali nel obj che è sicuramente un posto da guardare.

Si può cercare di iniziare con una MeshBasicMaterial pure solo per controllare i vertici/facce sono ok: new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 })

Inoltre, come ha detto l'onorevole Doob, perche non condividendolo l'obj si sta caricando.

Answer 2

Ho avuto problemi simili usando l'esportatore Three.js per Blender, tutto appariva scuro anche con i colori diffusi impostati nel modello originale del frullatore e una luce ambientale aggiunta alla scena nel codice Three.js. Si scopre la correzione è stato quello di modificare una parte del file di modello convertito, c'era una linea per l'effetto di:

"colorAmbient" : [0, 0, 0] 

che ho cambiato manualmente per

"colorAmbient" : [0.75, 0.75, 0.75] 

ovunque sembrava, e che fissa il problema. Ne parlo perché la mia ipotesi migliore è che tu stia vivendo un problema simile a questo. Senza vedere il file * .obj è difficile diagnosticare esattamente il problema, ma forse nelle impostazioni del modello si potrebbe provare a cambiare il valore del colore dell'ambiente piuttosto che, ad esempio, il valore del colore diffuso, che è quello che normalmente si pensa quando si assegna il colore a un modello.

Answer 3

MeshBasicMaterial in THREE.js è come un toon shader (valido per silouhette, shadow drawing o wireframe) e non è influenzato dalle luci.

Prova MeshLambertMaterial o MeshPhongMaterial