Hi,
I’m trying to move mesh so that its centre is located at the top left corner of the item div.
I have noticed that when I set the mesh’s position inside animate, it moves to where I want it, as shown in the first image. However, when I move the code to set mesh’s position outside animate, I get the result shown in the second image. This is confusing to me since I assumed that point, the mesh’s new position, would be constant regardless of where it is defined. But this turns out not to be the case. Through analysis, I found that the line ray.unproject(camera) is the reason for this discrepancy. ray’s z value changes when I move the six lines outside the animate function. I don’t understand why.
Does anyone know why this is happening? My end goal is to animate the mesh moving in a curving pattern outside the item div, which I plan to do using gsap. I figure I just need to call gsap.to() outside the animate function, which has worked in my experiments so far, but if this would not be the ideal way to achieve what I want, then I’d be happy to hear suggestions.
const item = document.querySelector(".item")
const topX = item.offsetLeft;
const topY = item.offsetTop;
const x = (topX / window.innerWidth) * 2 - 1;
const y = - (topY / window.innerHeight) * 2 + 1;
const ray = new THREE.Vector3();
const point = new THREE.Vector3();
function animate() {
requestAnimationFrame(animate);
// Move sphereMesh to the 3d point corresponding to pixel coordinate (x,y)
ray.set(x, y, 0.5);
ray.unproject(camera); // this line changes whether inside/outside animate()
ray.sub(camera.position).normalize();
const distance = - camera.position.z / ray.z;
point.copy(camera.position).add(ray.multiplyScalar(distance));
mesh.position.copy(point)
renderer.render(scene, camera);
};
animate();
Output when mesh’s position is set inside animate:
Output when mesh’s position is set outside animate:
