Warm tip: This article is reproduced from serverfault.com, please click

"vector.project" to the Normalized Screen Position of the Camera? (react-three-fiber)

发布于 2020-11-30 19:58:06

Please help me find the normalized screen position forEach Vector3 of my 3D model. I attempted to use the "vector.project(camera)" method to save the projected screen vectors separately, but it doesn't seem to work. I'm using these vectors for camera raycasts.

Codesandbox: code

enter image description here

Questioner
user14440113
Viewed
0
Marquizzo 2020-12-02 01:54:56

Ok, this is what you're doing now:

// Calling project() on the object's position changes its value
const vector = ref.current.position.project(camera);
const projVec = new THREE.Vector3(vector.x, vector.y, vector.z);

As we discussed in the comments, calling .project() on a vector will reset it in the [-1, 1] range. That's what the documents describe. So when you take the position of the model, and call project(), you're changing its position to somewhere within the [-1, 1] range!

Like I suggested, you have to create a new vector, then call project on the new vector, not on the object's position:

// Create new vector
const projVec = new THREE.Vector3();

// Copy the object's position into new vector
projVec.copy(ref.current.position);

// Perform projection on NEW vector
projVec.project(camera);

// Now we have a vector in screen-space [-1, 1] range
console.log(projVec);