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

【问题标题】：Syncing Directional Lighting and Trackball Control - Threejs同步定向照明和轨迹球控制 - Threejs
【发布时间】：2014-05-15 22:26:08
【问题描述】：

我有一个使用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);

我尝试过的：

使用不同类型照明的类似方法（尽管这是首选）
尝试使用 Render 循环更新位置，但完全没有效果。

这样产生的效果是灯光在物体的反面并且是静止的，这没有任何意义。我可以想象，由于灯光位置相同，它会指向相同的方向。

更新：

所以使用后：

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

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

感谢任何帮助。

【问题讨论】：

不幸的是，这不起作用。灯光不随控件移动，效果与之前相同，灯光出现在对象的另一侧。
是的，我遵循了建议，但有一个非常不同的问题我没有意识到。同时创建一个简单的jsfiddle。我意识到这确实非常有效。在我的应用程序中，我尝试使用掩盖了相机正确位置运动的发光效果。非常感谢。如果您作为答案回复，我很乐意接受。
我听从了你的指示。 :-)

标签： javascript graphics three.js lighting

【解决方案1】：

如果您想创建物体在旋转的错觉，请执行以下操作：

使用 PointLight 并将其添加为相机的子对象，而不是场景的子对象：camera.add( light );，并像这样偏移点光源：light.position.set( 10, 10, 0 );

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

three.js r.66

【讨论】：

【解决方案2】：

在我的测试中，我可以将定向光连接到相机并创建从侧面出现的光。如果您使用“定向光”助手，您可以很好地了解此光源的发光方式。

  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 );

【讨论】：