2017-12-30 22 views
1

다음 예제에서는 앰비언트 라이트가 작동하지 않습니다 (모든 것은 검은 색입니다). 왜 이런 일이 일어나는 걸까요? 어떻게 해결할 수 있습니까? 내가 스포트 라이트를 넣어 경우 , 그것은 주변 광에 뭔가해야합니다, 그래서 그것은 작동하지만이 문서를 따라 ... = O three.js를에주변 조명이이 예제에서 작동하지 않는 이유는 무엇입니까?

<html> 
    <head> 
     <title>My first three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
     <script src="js/three.js"></script> 
     <script> 
      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

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

      var geometry = new THREE.BoxGeometry(1, 1, 1); 

      material = new THREE.MeshStandardMaterial({ 
       color: 0x0c79bf, 
        roughness: 0.71, 
        metalness: 1, 
        normalScale: new THREE.Vector2(1, - 1), // why does the normal map require negation in this case? 
        side: THREE.DoubleSide 
       }); 


      var cube = new THREE.Mesh(geometry, material); 
      scene.add(cube); 

      var alight = new THREE.AmbientLight(0x404040); 
      scene.add(alight); 

      camera.position.z = 5; 

      var animate = function() { 
       requestAnimationFrame(animate); 

       cube.rotation.x += 0.01;     
       cube.rotation.y += 0.01; 

       renderer.render(scene, camera); 
      }; 

      animate(); 
     </script> 
    </body> 
</html> 

답변

4

주변 빛의 간단한 모델입니다 물질에 의해 반사되는 간접 광.

예제에서 재료 metalness 속성을 1로 설정했습니다. 즉, 당신은 순수한 금속을 모델링하고 있습니다. 순수한 금속은 빛을 산란하게 반사하지 않으며 반사광 만 반사합니다.

MeshStandardMaterial을 사용하는 경우 금속 재질에 반영 할 수 있도록 환경 맵 (material.envMap)을 지정해야합니다.

three.js r.89

+0

와우, 무슨 발견인가? 나는 자연에 존재하지 않는 금속, 즉 순수한 금속을 모델링했습니다. 반사 된 빛을보기 위해서는 '금속성'을 0.99로 설정하고 주변 광을 40으로 설정하는 것으로 충분했습니다. 고마워요 !! – Nulik