Dlaczego oświetlenie nie działa w Three.js?

Question

Nie rozumiem, dlaczego oświetlenie nie działa w moim kodzie. Pobrałem prosty OBJ. plik do przetestowania OBJLoader, ale nie ma wpływu na model. Zanim zacznę montować oświetlenie, przynajmniej działa oświetlenie Ambient Lighting. Może OBJ. model potrzebuje tekstury?

  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

Może this pomoże jeśli przeżywa ten sam problem jak ja kilka dni temu, jeśli nie masz w swojej obj normalne, że na pewno gdzieś patrzeć.

Można spróbować zacząć MeshBasicMaterial równie dobrze sprawdzić wierzchołki/twarze są ok: new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 })

Ponadto, jak powiedział pan Dooba, proszę rozważyć dzielenie OBJ masz załadowany.

Answer 2

Miałem podobne problemy przy korzystaniu z eksportera Three.js do Blendera, wszystko wydawało się ciemne nawet w przypadku rozproszonych kolorów ustawionych w oryginalnym modelu miksera i światła otoczenia dodanego do sceny w kodzie Three.js. Okazuje się, że poprawka została edytować część przekształconego pliku modelu, była kolejka do skutku:

"colorAmbient" : [0, 0, 0] 

którą ręcznie zmieniono

"colorAmbient" : [0.75, 0.75, 0.75] 

wszędzie pojawił i że stały problem. Podnoszę to, ponieważ domyślam się, że doświadczasz problemu podobnego do tego. Bez obejrzenia pliku * .obj trudno jest dokładnie zdiagnozować problem, ale być może w ustawieniach modelu można spróbować zmienić wartość koloru otoczenia, a nie, powiedzmy, wartość koloru rozproszonego, co zwykle przydaje się przy przypisywaniu koloru do modelu.

Answer 3

MeshBasicMaterial w THREE.js jest jak toon shader (dobry do silouhette, shadow drawing lub wireframe) i nie jest pod wpływem świateł.

Wypróbuj MeshLambertMaterial lub MeshPhongMaterial