I am working on a 3D scene using three.js and adding sprites, but I want to accurately determine the distance between the camera and a sprite when I click on the screen. To achieve this, I am utilizing a Raycaster.
However, when clicking on the sprite, the "distance" property of the intersection object is consistently displaying what seems to be an incorrect value (such as 0.3), leading me to question whether I am interpreting the result correctly. My expectation was that the "distance" value of the intersection object would represent the actual distance from the camera to the sprite (which in my scenario should be around 5).
Here is a condensed snippet of my code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({color: 0x00ff00}));
scene.add(sprite);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
window.addEventListener('mousedown', function (e) {
if (e.target == renderer.domElement) {
var vector = new THREE.Vector3((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects([sprite]);
console.log(intersects[0]);
}
}, false);
For a live demonstration, you can access it here: http://jsfiddle.net/pWr57/
Given the above, can anyone advise me on how to obtain the accurate distance from the camera to a sprite?
Version used: three.js r66