同步定向照明和轨迹球控制 - Threejs

时间:2014-04-03 20:48:38

标签: javascript graphics three.js lighting

我有一个应用程序,我使用three.js渲染对象。我正在使用定向照明和轨迹球控制。我知道有了控制器,我正在移动相机,并且灯光位置是静止的。

然而,在移动时,我希望光与相机一起移动,使得在每个视点处,光照条件看起来相同。这样,悬浮物体就会旋转,而不是相机。

目前我有:

camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 3;

light = new THREE.DirectionalLight(0xAAAAAA, 1);
light.position = camera.position;
scene.add(light);

我尝试了什么:

  1. 使用不同类型的照明的类似方法(虽然这将是优先的)
  2. 尝试使用Render循环更新位置,这完全没有效果。
  3. 这产生的效果是光线位于物体的另一侧并且是静止的,这是没有意义的。我想,由于光线位置相同,它会指向同一方向。

    更新

    所以使用后:

    light.castShadow = true;
    light.shadowCameraVisible = true;
    

    我可以观察勾勒出正在投射的灯光的画面。我可以看到光的位置发生了变化,但光本身并没有从原来的位置重新绘制。是否需要启用某些东西才能重新绘制光线?

    感谢任何帮助。

2 个答案:

答案 0 :(得分:5)

如果您想创建对象旋转的错觉,请执行以下操作:

使用PointLight并将其添加为相机的子项,而不是场景中的孩子:camera.add( light );,并将点光源偏移为:light.position.set( 10, 10, 0 );

在这种情况下,您还需要将相机添加为场景的孩子:scene.add( camera );

three.js r.66

答案 1 :(得分:-1)

在我的测试中,我可以将定向光附加到相机并创建从侧面出现的灯光。如果你使用'定向灯'帮手,你可以很好地了解这个光源是如何发光的。

  var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.2); 
  directionalLight.position.set( 500, 100, 0 ); 
  directionalLight.target.position.set( 0, 0, 0 ); 

  dlightHelper = new THREE.DirectionalLightHelper(directionalLight, 50); 
  camera.add( dlightHelper);

  camera.add( directionalLight );