Question

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

但是如果我点击精灵，交叉点对象的距离属性总是＆＃34;错误＆＃34; （有点像0.3），或者我可能不知道如何阅读和理解结果。我想＆＃34;距离＆＃34;交点的值是从相机到精灵的距离（因此，在我的情况下，类似于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/

那么我怎样才能将相机的距离变为精灵？

three.js r66

Answer 1

这样做，而不是

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

提示：阅读源代码Raycaster.js，以便了解它的作用。它目前正在返回从精灵中心到射线的垂直距离。

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

three.js r.66

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

1 个答案: