如何在 THREE.JS 中将对象放在相机前面？

Posted 2023-02-27

【中文标题】如何在 THREE.JS 中将对象放在相机前面？

【英文标题】：How to put an object in front of camera in THREE.JS?

【发布时间】：2013-06-17 13:41:23

【问题描述】：

我正在尝试将一个物体放在相机前，但没能做到。

我正在使用 FlyControls 来移动相机，现在我想在它前面放置一个对象。我怎样才能做到这一点？我尝试了很多不同的方法，但都没有成功。

谢谢

【问题讨论】：

您能否显示一些代码以便我们查看错误所在？

【参考方案1】：

您是否尝试过让您的对象成为相机的子对象，然后将其向前平移？

camera.add(nanobot);
nanobot.position.set(0,0,-100);

以上内容将纳米机器人永久放置在摄像机前 100 个单位......它会一直停留在你这样做之前：

camera.remove(nanobot);

...此时它应该保持在全局空间中的位置，直到您使用其他方法移动它。

【讨论】：

您还必须将相机设置为场景的子节点（通常不是默认设置）scene.add(camera)

确保nanobot.position.set(0,0,-100); 在之后 camera.add(nanobot);：position 是相对于相机的本地位置。 [threejs r89]

这个答案已有 6 年历史，所以我想我应该预料到会出现错误。我在camera.add() 上收到object not an instance of Object3d。有没有办法解决这个问题？

简单地说，你不能了。在将相机视为 3d 对象之前，现在已更改为将其视为单独的实体

这个答案对我有用，只是将它添加到我正在处理的一个非常复杂的 webxr 项目中，在最新的 three.js (0.120.1) 上运行。这是在 webxr 场景中，所以相机移动很多，场景坐标不稳定，但精灵保持在应有的位置。

【参考方案2】：

我正在使用 three.js r88，并从 Kaspar Lee 发布的内容开始制定了解决方案。

function updatePositionForCamera(camera) 
    // fixed distance from camera to the object
    var dist = 100;
    var cwd = new THREE.Vector3();
    
    camera.getWorldDirection(cwd);
    
    cwd.multiplyScalar(dist);
    cwd.add(camera.position);
    
    myObject3D.position.set(cwd.x, cwd.y, cwd.z);
    myObject3D.setRotationFromQuaternion(camera.quaternion);

【参考方案3】：

您可以将物体放在相机的位置，然后移开一点。

// from: https://github.com/mrdoob/three.js/issues/641#issuecomment-2369456

object.position.copy( camera.position );
object.rotation.copy( camera.rotation );
object.updateMatrix();
object.translateZ( - 10 );

如果不想旋转对象，可以旋转辅助对象，然后使用辅助对象的位置。

// from: https://github.com/mrdoob/three.js/issues/641#issuecomment-808045236
var helperObject = new Object3d()

helperObject.position.copy( camera.position );
helperObject.rotation.copy( camera.rotation );
helperObject.updateMatrix();  // this line seems unnecessary
helperObject.translateZ( - 10 );

// just use helperObject.position and do not rotate yourObject
yourObject.position.set(helperObject.position)

【参考方案4】：

这是另一种方法 - 将相机的四分位数应用于矢量（dist 是您希望对象离相机有多远）：

var vec = new THREE.Vector3( 0, 0, -dist );
vec.applyQuaternion( camera.quaternion );

nanobot.position.copy( vec );

使对象成为相机的子对象对我不起作用，但这种 applyQuarternion 方法可以（改编自 @WestLangley 的回答：Three.js: Get the Direction in which the Camera is Looking）

如果您希望它始终面向相机，您可能也希望从相机复制旋转。如果您想在此之后调整对象的确切位置，可以使用 translateX、translateY 等。

【参考方案5】：

var cx, cy, cz, lx, ly, lz;



dir.set(0,0,-1);
dir.applyAxisAngle(0,camera.rotation.x);
dir.applyAxisAngle(1,camera.rotation.y);
dir.applyAxisAngle(2,camera.rotation.z);
var dist = 100;

cx = camera.position.x;
cy = camera.position.y;
cz = camera.position.z;

lx = dir.x;
ly = dir.y;
lz = dir.z;


var l;

l = Math.sqrt((dist*dist)/(lx*lx+ly*ly+lz*lz));

var x1, x2;
var y1, y2;
var z1, z2;     

x1 = cx + lx*l;
x2 = cx - lx*l;

y1 = cy + ly*l;
y2 = cy - ly*l;

z1 = cz + lz*l;
z2 = cz - lz*l;


nanobot.position.set(x1, y1, z1 );

我试着计算相机方向的方向向量，然后计算出穿过腔室的线，在这条线上与相机有一定距离的地方放一个点