javascript - Threejs对象选择问题

Question

我目前正在开发一个使用 Threejs 的小型 Web 应用程序。我遇到了以下问题:

我构建了一个包含我的 Threejs 内容的原型(prototype)，这里一切正常( Canvas 位于原型(prototype) window.innerWidth 和 window.innerHeight => 中，因此与我的浏览器窗口大小相同。选择效果很好，但我想在我的网页应用程序上使用 Canvas ，并且 3D 表面的拾取也需要在那里工作。

我发现一旦通过 Canvas 的 CSS 更改边距或顶部，它就不再起作用了。 Web 应用程序基于滚动页面，并且 Threejs Canvas 位于 div 容器内，只能通过滚动页面才能看到。

对于选择，我使用以下逻辑/代码 -> 这个逻辑/代码在“全屏原型(prototype)”中运行良好，但在 Web 应用程序页面中运行不佳

self.renderer.domElement.addEventListener( '点击', 函数(事件){

    event.preventDefault();
   //将鼠标位置转换为正确的矢量
    var vector = new THREE.Vector3( ( event.clientX/window.innerWidth ) * 2 - 1, - ( event.clientY/window.innerHeight ) * 2 + 1, 0.5 );
   //将 2D 点从标准化设备坐标转换为可用于拾取的 RAYCASTER
    self.projector.unprojectVector( 矢量, self.camera );
   //需要射线转换器来检测与立方体表面的相互作用
    var raycaster = new THREE.Raycaster( self.camera.position, vector.sub( self.camera.position ).normalize() );
    var intersects = raycaster.intersectObjects( self.scene.children );
   //根据与元素的交集改变颜色
    if ( intersects.length > 0 ) {
       //选定的对象
    }
}， 错误的 );

我认为 var 向量的计算是错误的，但我只是不知道如何正确地进行计算。

如有任何帮助，我们将不胜感激谢谢最好的落后

Answer 1

200%方式

var x = event.offsetX == undefined ? event.layerX : event.offsetX;
var y = event.offsetY == undefined ? event.layerY : event.offsetY;

var vector = new THREE.Vector3();
vector.set( ( x / renderer.domElement.width ) * 2 - 1, - ( y / renderer.domElement.height ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

或者看看这个example 。查看控制台中的消息。

<script src="js/controls/EventsControls.js"></script>

EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.draggable = false;

EventsControls.onclick = function() {

       console.log( this.focused.name );

}

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh ); 

EventsControls.attach( mesh );

// 

function render() {
       EventsControls.update();
       controls.update();
       renderer.render(scene, camera);
}