Three.js에서 조명이 작동하지 않는 이유는 무엇입니까?

Question

조명이 내 코드에서 작동하지 않는 이유를 모르겠습니다. 나는 간단한 OBJ를 다운로드했다. 파일을 사용하여 OBJLoader를 테스트하지만 모델은 영향을받지 않습니다. 조명을 더 편집하기 전에 적어도 주변 조명이 효과적이었습니다. OBJ일지도 몰라. 모델에 텍스처가 필요합니까? 당신이 며칠 전에 나 같은 같은 문제가 발생하는 경우, 당신은 분명히 어딘가에보고의 당신의 OBJ에는 법선가없는 경우

  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

어쩌면 this는 당신을 도울 것입니다.

당신은 단지 정점을 확인뿐만 아니라 MeshBasicMaterial 시작하려고 할 수는/얼굴 확인은 다음과 같습니다 씨 doob 말했듯이 new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 })

또한, 당신은로드하고있는 OBJ를 공유하고 고려하시기 바랍니다.

Answer 2

블렌더 용 Three.js 내보내기를 사용할 때도 비슷한 문제가있었습니다. 원본 블렌더 모델에 설정된 확산 색상과 주변 광이 Three.js 코드의 장면에 추가 되어도 모든 것이 어둡게 보입니다. 그것은 수정이 변환 된 모델 파일의 일부를 편집하는 것이 었습니다 밝혀,이 효과에 선했다 : 나는 수동으로 등장 사방

"colorAmbient" : [0.75, 0.75, 0.75] 

로 변경

"colorAmbient" : [0, 0, 0] 

는 그 고정 문제. 최선의 추측은 당신이 이와 비슷한 문제를 겪고 있기 때문에 이것을 가져옵니다. * .obj 파일을 보지 않고도 정확하게 문제를 진단하기는 어렵지만 모델 설정에서 확산 색상 값 (예 : 색상 지정시 일반적으로 생각하는 것)보다는 주변 색상 값을 변경해보십시오. 모델로.

Answer 3

THREE.js의 MeshBasicMaterial은 툰 쉐이더 (silouhette, shadow drawing 또는 wireframe에 좋음)와 같으며 조명의 영향을받지 않습니다.

MeshLambertMaterial을 시도하거나 MeshPhongMaterial