Question

In three.js, I have created a yellow sphere to represent the sun. I would like the sun to remain fixed in the same relative position in the sky as the camera moves.

Right now, the sun remains in the same spot when you move. I created a version of it where the sun moves with the camera, but the sun will move in front of other objects.

I would like the sun to remain in the background, behind all other objects; and remain in the same camera position as a move.

Here is a link to the code!

Answer 1

在你的太阳上做这个

mySun.material.depthWrite = false; // to disable writing to the depth buffer
mySun.renderOrder = -999; // to draw the sun before any other stuff

第一行是从订购角度“无限远”地绘制太阳。在太阳之后绘制的东西将被绘制在它前面，无论它们是否实际位于前方。

第二行应该首先处理太阳（但你可能想在天空盒之后绘制它）。默认情况下，所有对象都具有renderOrder == 0.

此时，太阳应该“落后”所有东西，但它可能仍会移动，改变大小，看起来并非无限远。

接下来你需要做的是确保太阳跟随你的相机并且在实际视角中显得无限远。您可以通过使其跟随摄像机位置而不是旋转来完成此操作。您可以将太阳放入容器中，然后将相机位置复制到每个刻度线的容器位置。您可以将太阳物体放置在该容器内（它相对于相机），只要它没有被剪切（在您的近处和远处之间）它将起作用。

Answer 2

A simple and intuitive solution is to move the sun far into the sky and let the scene's perspective take care of it. (Note this may be inefficient. See other answer for an alternative.)

For example:

// increase sun size to compensate the distance
var sungeometry = new THREE.SphereGeometry( 15.875, 12, 12 );
sun.position.y=200;
sun.position.z=-200;

You will see that the sun moves very little against the camera but stays realistically in the back of the scene. You can experiment with the size and distance to get the effect you want.

Creating a fixed background object in three.js

2 个答案: