Javascript 在三个js中使用光线投射理解精灵距离

我正在使用three.js在3d场景中添加精灵，我想知道当我点击屏幕时相机和精灵之间的距离。所以我用了一个Raycater

但是如果我点击精灵，相交对象的距离属性总是“错误”（比如0.3），或者我不知道如何读取和理解结果。我认为交叉点的“距离”值是从相机到精灵的距离（所以，在我的例子中是5）

以下是我的代码的简化版本：

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);

你可以在这里看到它的作用：

那么我怎样才能拥有从相机到精灵的距离呢

three.js r66

改为这样做

console.log( raycaster.ray.origin.distanceTo( intersects[0].point ) );

提示：阅读源代码，

Raycaster.js

，这样您就知道它在做什么。它当前正在返回从精灵中心到光线的垂直距离

在这种情况下，我同意最好返回与摄影机的距离

3.js r.66