three.js所THREE.Projector已经移动到

嗨，我知道有版本THREE 71three.js所THREE.Projector已经移动到

没有THREE.projector但我不已了解，如何更换THREE.projector函数，然后什么？

这是我的点击功能：

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


     }

什么是正确的做法？

来源

2015-03-31 Martin

现在有与两个正交和透视摄像机类型的工作更简单的模式：

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

来源

2015-03-31 16:14:03 WestLangley

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

来源

2015-03-31 11:52:54 BuildingJarl

你能给我们一个完整的例子吗？什么是对象？什么是递归标记？是什么 ... ？ thx – Suisse 2015-11-16 20:23:56

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

为了让您的特定代码的工作，取代：

projector.unprojectVector(vector, camera);

与

vector.unproject(camera);

来源

2015-11-22 15:00:46

你是否重复早先的答案，你可以upvote它？ – 2015-11-22 15:06:02

我注意到，这所有的一切之前说的是在一个完整的窗户，我觉得很好，但如果你有除了页面上的画布以外的其他内容，您需要获取点击事件目标的偏移量并将其删除。

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（当'点击'，功能（e）{<代码>}）;

[你会注意到我把负号在那里它更符合逻辑以及]

来源

2015-12-07 08:04:23

哦，上帝，谢谢你！谢谢！我确定我的光线投射不是因为我的偏移而失去的！我的大脑找不到获得良好价值的方法！对于其他人：是的，我们的画布可能不是全屏！ >。 Claod 2017-12-23 06:05:21

的THREE.JS raycaster documentation实际上给所有在这些答案布局以及所有失分的相关信息可能很难得到你的头。

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2(); 

function onMouseMove(event) { 
    // calculate mouse position in normalized device coordinates 
    // (-1 to +1) for both components 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
} 

function render() { 
    // update the picking ray with the camera and mouse position 
    raycaster.setFromCamera(mouse, camera); 
    // calculate objects intersecting the picking ray var intersects =  
    raycaster.intersectObjects(scene.children); 

    for (var i = 0; i < intersects.length; i++) { 
    intersects[ i ].object.material.color.set(0xff0000); 
    } 

    renderer.render(scene, camera); 
} 
window.addEventListener('mousemove', onMouseMove, false);   
window.requestAnimationFrame(render);`

希望它有帮助。

来源

2016-12-03 21:00:53 odlh

three.js所THREE.Projector已经移动到

回答

相关问题