如何在THREE.JS中将物体放在相机前?

时间:2013-06-20 15:44:17

标签: camera three.js

我正试图将一个物体放在相机前面,但一直无法使用。

我正在使用FlyControls移动相机,我现在想在它前面放一个物体。我怎样才能做到这一点?我尝试了很多不同的方法,但我没有成功。

谢谢

5 个答案:

答案 0 :(得分:16)

您是否尝试过将物体作为相机的一个孩子,然后将其向前翻译?

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

上面将纳米机器人永久地放置在相机前面的100个单位......这就是它将一直存在的地方:

camera.remove(nanobot);

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

答案 1 :(得分:1)

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

我试图计算相机方向的方向向量,然后计算穿过腔室的线,在距离相机一定距离的线上放一个点

答案 2 :(得分:1)

我正在使用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 :(得分:0)

这是另一种方法 - 将相机的四分之一应用于矢量(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

如果您希望它始终面向相机,您也可以从相机复制旋转。如果你想在此之后调整对象的确切位置,你可以翻译X,翻译等等。

答案 4 :(得分:0)

你可以把物体放在相机的位置然后移开一点。

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