Three.js의 최대 점등 수

점등을 사용하여 Three.js 장면에서 큐브의 각면을 밝게하려고합니다. 그러나 큐브의 위쪽과 아래쪽면이 어둡게 남아 있기 때문에 장면에 추가하는 6 개의 조명 중 4 개만 실제로 렌더링됩니다. 전면 및 후면 조명을 제거하면 갑자기 상단 및 하단 조명이 작동합니다.Three.js의 최대 점등 수

장면에서 Three.js가 동시에 4 점 표시등 만 지원하거나 잘못된 동작을하는 것이 가능합니까?

출처

2011-11-06 Elegia

three.js가 4 개 이상의 조명을 지원하는지 확인할 수 있습니다. 나는 캔버스 등의 예를 수정하여 간단한 테스트를하고 그것을 작동 :

이

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>three.js canvas - point light</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       background-color: #000; 
       margin: 0px; 
       overflow: hidden; 
      } 

      #info { 
       position: absolute; 
       top: 0px; width: 100%; 
       color: #ffffff; 
       padding: 5px; 
       font-family: Monospace; 
       font-size: 13px; 
       text-align: center; 
      } 

      a { 
       color: #ff0080; 
       text-decoration: none; 
      } 

      a:hover { 
       color: #0080ff; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="container"></div> 
     <div id="info"> 
      based on <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br /> 
     </div> 

     <script src="../build/Three.js"></script> 

     <script src="js/RequestAnimationFrame.js"></script> 

     <script> 

      var camera, scene, renderer, 
      mesh,sphere; 

      init(); 
      animate(); 

      function init() { 

       var container = document.getElementById('container'); 

       camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.z = 100; 

       scene = new THREE.Scene(); 

       var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF]; 

       var PI2 = Math.PI * 2; 
       var program = function (context) { 

        context.beginPath(); 
        context.arc(0, 0, 1, 0, PI2, true); 
        context.closePath(); 
        context.fill(); 

       } 

       var nl = lc.length; 
       var ai = PI2/nl; 
       for(var i = 0; i < nl ; i++){ 
        var light = new THREE.PointLight(lc[i], 2, 50); 
        scene.add(light); 
        light.position.x = Math.cos(ai*i) * 40; 
        light.position.y = Math.sin(ai*i) * 40; 

        var p = new THREE.Particle(new THREE.ParticleCanvasMaterial({ color: lc[i], program: program })); 
        p.position.copy(light.position); 
        p.scale.multiplyScalar(0.5); 
        scene.add(p); 
       } 

       sphere = new THREE.SphereGeometry(20, 12, 6, false); 
       mesh = new THREE.Mesh(sphere, new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading })); 
       mesh.overdraw = true; 
       scene.add(mesh); 

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

      } 

      // 

      function animate() { 

       requestAnimationFrame(animate); 
       render(); 

      } 

      function render() { 

       mesh.rotation.y -= 0.01; 
       renderer.render(scene, camera); 

      } 

     </script> 
    </body> 
</html>

당신이 필요의 대부분은 그러나 초기화에 있습니다 :

이

three.js point lights demo

여기에 참조 할 수 있도록 전체 코드입니다

var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF]; 

       var PI2 = Math.PI * 2; 
       var program = function (context) { 

        context.beginPath(); 
        context.arc(0, 0, 1, 0, PI2, true); 
        context.closePath(); 
        context.fill(); 

       } 

       var nl = lc.length; 
       var ai = PI2/nl; 
       for(var i = 0; i < nl ; i++){ 
        var light = new THREE.PointLight(lc[i], 2, 50); 
        scene.add(light); 
        light.position.x = Math.cos(ai*i) * 40; 
        light.position.y = Math.sin(ai*i) * 40; 

        var p = new THREE.Particle(new THREE.ParticleCanvasMaterial({ color: lc[i], program: program })); 
        p.position.copy(light.position); 
        p.scale.multiplyScalar(0.5); 
        scene.add(p); 
       }

lc 배열에 더 많은 색상을 추가하고 자유롭게 빛을 시험해보십시오.

그것은 당신의 설정이 무엇인지 말해, 그러나 첫번째 여부를 확인하기 어렵다 : 지금까지 닫습니다 최소한의 영향을하거나하지하는 (모델을하지 형성

당신의 조명이 적당한 거리 /받은 위치에 있습니다 (예 : 모델 내부) 빛이 나지 않을 것입니다.
빛이 반짝이는 강도가 적당합니다.

출처

2011-11-06 13:57:43

이것은 캔버스 렌더러에서 작동하지만 webgl 렌더러에서는 작동하지 않습니다. 빛의 수를 늘리려면 다음과 같이 렌더러를 초기화해야합니다. 렌더러 = 새 THREE.WebGLRenderer ({maxLights : 6}), ' 일부 하드웨어에서는 작동하지 않을 수 있습니다. –

Three.js의 최대 점등 수

답변

관련 문제