Question

我知道版本71中没有THREE.projector（请参阅deprecated list），但我不知道如何替换它，特别是在此代码中检测到哪个对象已被点击于：

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

Answer 1

现在有一种更简单的模式适用于正交和透视相机类型：

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

Answer 2

https://github.com/mrdoob/three.js/issues/5587

var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var dir = new THREE.Vector3();

...

if ( camera instanceof THREE.OrthographicCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, - 1 ); // z = - 1 important!

    vector.unproject( camera );

    dir.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );

    raycaster.set( vector, dir );

} else if ( camera instanceof THREE.PerspectiveCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); // z = 0.5 important!

    vector.unproject( camera );

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

}

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

Answer 3

您可以使用上述最新推荐版本。

要使您的特定代码正常工作，请替换：

projector.unprojectVector( vector, camera );

与

vector.unproject(camera);

Answer 4

我注意到之前所说的所有这些在我想的完整窗口中都很好，但是如果页面上还有其他东西除了画布，你需要获得点击事件目标的偏移并将其删除。

e =事件，mVec是THREE.Vector2

    let et = e.target, de = renderer.domElement;
    let trueX = (e.pageX - et.offsetLeft);
    let trueY = (e.pageY - et.offsetTop);
    mVec.x = (((trueX / de.width) * 2) - 1);
    mVec.y = (((trueY / de.height) * -2) + 1);
    wup.raycaster.setFromCamera( mVec, camera );
    [Then check for intersections, etc.]

在使用window.addEventListener（'click'，function（e）{＆lt; code＆gt;}）时，看起来你需要注意拖动（鼠标移动）或从拖动中释放会触发不需要的点击;

[你会发现我把负号放在更符合逻辑的地方。]

Three.js THREE.Projector已被转移到

4 个答案: