Question

嘿伙计们，所以我试图让一条光线从镜头直接出来，与我看到的任何东西相交，但我见过的所有参考文献都使用了鼠标，我无法想象如何转换。

我到目前为止的代码：

var raycaster = new THREE.Raycaster();

function render() 
{ 
    raycaster.set(camera, 0);

    renderer.render( scene, camera );
}

Answer 1

我做了类似的事情，只是用鼠标位置而不是相机。

var x = (event.offsetX / renderer.domElement.width) * 2 - 1;
var y = -(event.offsetY / renderer.domElement.height) * 2 + 1;
var z = 0.5;
var mousePosition = new THREE.Vector3(x, y, z);
var raycaster = new THREE.Raycaster();

mousePosition.unproject(camera);
raycaster.set(camera.position, mousePosition.sub(camera.position).normalize());

var intersectObjects = raycaster.intersectObjects(scene.children);

if (intersectObjects.length) {
    // do something
}

您可以尝试将前两行event.offsetX和event.offsetY替换为画布的中心，如：

var x = ((canvasElement.clientWidth / 2) / renderer.domElement.width) * 2 - 1;
var y = -((canvasElement.clientHeight / 2) / renderer.domElement.height) * 2 + 1;

编辑：现在您可以使用相交多维数据集执行一些特殊操作。例如，显示他的线框，如：intersectObjects[0].material.wireframe = true。

注意：intersectObjects - 数组按距离排序。所以最近的对象将在索引0处。

编辑＃2：你可以创建一个＆＃34;更新循环＆＃34; （update()函数）使用上面的代码。我知道有两种方法可以做到这一点：

使用setInterval(update, 1000 / 60)：1000 / 60每秒拨打60次电话。否定：当update函数的执行时间超过16.6（1000/60）毫秒时，它将是不精确的
在update方法中调用render - 方法。正面：它将（更加）精确，并且您已经从渲染逻辑中分离了您的应用程序！

function update（）{ //在这里放上代码 }

function render（）{ // ... 更新（）; }

Three.js使用来自相机的raycast来选择项目

1 个答案: