Three.js THREE.Projector 已移至 [英] Three.js THREE.Projector has been moved to
问题描述
我知道版本 71 中没有 THREE.projector
(请参阅 已弃用列表),但我不明白如何替换它,特别是在这段代码中检测到哪个对象被点击了:
I understand there is no THREE.projector
in version 71 (see the deprecated list), but I don't understand how to replace it, particularly in this code that detects which object has been clicked on:
var vector = new THREE.Vector3(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(
camera.position,
vector.sub(camera.position).normalize()
);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
clicked = intersects[0];
console.log("my clicked object:", clicked);
}
推荐答案
现在有一种更简单的模式,适用于正交和透视相机类型:
There is now an easier pattern that works with both orthographic and perspective camera types:
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once
...
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects, recursiveFlag );
three.js r.84
three.js r.84
Objects = 要检查与射线相交的对象.
Objects = The objects to check for intersection with the ray.
recursiveFlag = 如果为真,它还检查对象的所有后代.否则它只检查与对象的交集.默认为真
recursiveFlag = If true, it also checks all descendants of the objects. Otherwise it only checks intersection with the objects. Default is true
[文档][1]
renderer = 显示您精心制作的场景的东西domelement = 渲染器也绘制的 html 元素.一个
元素.[1]:https://threejs.org/docs/?q=raycaster#api/en/core/Raycaster
renderer = this thing that displays your beautifully crafted scene
domelement = the html element which the renderer draws too. A <canvas>
element.
[1]: https://threejs.org/docs/?q=raycaster#api/en/core/Raycaster
这篇关于Three.js THREE.Projector 已移至的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!