How to get object in WebGL 3d space from a mouse click coordinate

You’re looking for an unproject function, which converts screen coordinates into a ray cast from the camera position into the 3D world. You must then perform ray/triangle intersection tests to find the closest triangle to the camera which also intersects the ray. I have an example of unprojecting available at jax/camera.js#L568 — but you’ll still … Read more

Rotate object on specific axis anywhere in Three.js – including outside of mesh

If you want to rotate an object around an arbitrary line in world space, you can use the following method. The line is specified by a 3D point and a direction vector (axis). THREE.Object3D.prototype.rotateAroundWorldAxis = function() { // rotate object around axis in world space (the axis passes through point) // axis is assumed to … Read more

How to use iOS (Swift) SceneKit SCNSceneRenderer unprojectPoint properly

Typical depth buffers in a 3D graphics pipeline are not linear. Perspective division causes depths in normalized device coordinates to be on a different scale. (See also here.) So the z-coordinate you’re feeding into unprojectPoint isn’t actually the one you want. How, then, to find the normalized-depth coordinate matching a plane in world space? Well, … Read more

Converting 3D position to 2d screen position [r69!]

I’ve written for my project the following function; it receives an THREE.Object3D instance and a camera as a parameters and returns the position on the screen. function toScreenPosition(obj, camera) { var vector = new THREE.Vector3(); var widthHalf = 0.5*renderer.context.canvas.width; var heightHalf = 0.5*renderer.context.canvas.height; obj.updateMatrixWorld(); vector.setFromMatrixPosition(obj.matrixWorld); vector.project(camera); vector.x = ( vector.x * widthHalf ) + widthHalf; … Read more