CODEWITHSUNDEEP
camerathree.js
clock131
clock131

Reputation: 181

How to put an object in front of camera in THREE.JS?

I'm trying to put an object in front of the camera, but have not been able to.

I'm using the FlyControls what moves the camera, and I now want to put an object in front of it. How can I do this? I've tried many different ways, but I did not succeed.

Thanks

Upvotes: 16

Views: 20408

Answers (7)

Mohamed
Mohamed

Reputation: 11

With this code ,your object have same position of your camera, if you want your object follow your camera when you move, add this code in your animate function before render

object.position.copy (new THREE.Vector3 (camera.position.x, camera.position.y, camera.position.z));

if you want to see your object for example :
instead to put < camera.position.z > you put < camera.position.z - 10 >
or < camera.position.z + 10 >

Upvotes: 0

alexandre
alexandre

Reputation: 146

Adding the object as a child to camera is the most straightforward way. I just tested it on THREE r126, be careful to add the camera to the scene then :)

Upvotes: 3

shrekuu
shrekuu

Reputation: 2262

Your can put the object at the position of the camera then move away a little bit.

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

If you do not want to rotate your object, you can rotate a helper object, then use the position of the helper object.

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

Upvotes: 3

jpsilva1-nasa
jpsilva1-nasa

Reputation: 71

I'm using three.js r88 and have worked out a solution starting from what Kaspar Lee posted.

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

Upvotes: 7

clock131
clock131

Reputation: 181

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

I tried to calculate the direction vector of the direction of the camera, and then calculate the line that passes through the chamber, put a point on this line at a distance from the camera

Upvotes: 2

poshaughnessy
poshaughnessy

Reputation: 2028

Here's another method - applying the quarternion of the camera to a vector (dist is how far away from the camera you want the object to be):

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

nanobot.position.copy( vec );

Making the object a child of the camera didn't work for me, but this applyQuarternion method did (adapted from @WestLangley's answer here: Three.js: Get the Direction in which the Camera is Looking)

You may wish to copy the rotation from the camera too, if you want it to always be facing the camera. And if you want to tweak the object's exact position after this, you can translateX, translateY etc.

Upvotes: 1

Tim
Tim

Reputation: 761

Have you tried making your object a child of your camera and then translating it forward?

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

The above places the nanobot permanently 100 units in front of the camera... and that's where it will stay until you do:

camera.remove(nanobot);

...at which point it should just stay where it is in global space until you move it using some other method.

Upvotes: 30

Related Questions