三个js中使用Raycast了解Sprite距离答案

【问题标题】：Understanding Sprite distance using Raycast in three js三个js中使用Raycast了解Sprite距离
【发布时间】：2026-01-15 05:15:01
【问题描述】：

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

但是如果我点击精灵，intersection 对象的 distance 属性总是“错误”（比如 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);

你可以在这里看到它的实际效果：http://jsfiddle.net/pWr57/

那么我怎样才能让相机到精灵的距离呢？

三个.js r66

【问题讨论】：

标签： javascript three.js

【解决方案1】：

改为这样做

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

提示：阅读源代码Raycaster.js，这样您就知道它在做什么。它目前正在返回从精灵中心到射线的垂直距离。

在这种情况下，我同意返回相机的距离会更好。

three.js r.66

【讨论】：