I’m trying to move a sphere with the mouse. I want the sphere’s Z to always be 0 and I want it to always be directly under the mouse. I’m using this Three.js example code on Stack Overflow as a guide:
I like that example because it doesn’t rely on any objects being in the scene. It just takes the screen coordinates and converts to world with a Z of 0. Other examples use scene.pick for this, but I’m not trying to pick any objects and don’t really like the idea of creating a plane at Z = 0 just to have a pick target.
Solved! For some reason I didn’t need the * 2 + 1 and * 2 - 1 bits.
I also decided to use engine render width and height rather than the inner window width and height. This code doesn’t work in the playground but does work with my full screen app.
window.addEventListener("mousemove", function (event) {
event.preventDefault();
if (!player) return;
mouseVector.set((event.clientX / engine.getRenderWidth()), (event.clientY / engine.getRenderHeight()), 0.5);
let uvec = BABYLON.Vector3.Unproject(mouseVector, 1, 1, BABYLON.Matrix.Identity(), camera.getViewMatrix(), camera.getProjectionMatrix());
var dir = uvec.subtract(camera.position).normalize();
var distance = -camera.position.z / dir.z;
var pos = camera.position.clone().add(dir.scale(distance));
player.position = pos;
});