Threejs对象选择问题

Question

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

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

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

为了挑选，我使用以下逻辑/代码 -> 这个在“全屏原型”中效果很好，但在 Web 应用程序页面中效果不佳

self.renderer.domElement.addEventListener( 'click', function(event){

    event.preventDefault();
    //CONVERT MOUSE POSITION TO CORRECT VECTOR
    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    //TRANSLATES A 2D POINT FROM Normalized Device Coordinates TO RAYCASTER THAT CAN BE USED FOR PICKING
    self.projector.unprojectVector( vector, self.camera );
    //RAYCASTER IS NEEDED TO DETECT INTERACTION WITH CUBE SURFACE
    var raycaster = new THREE.Raycaster( self.camera.position, vector.sub( self.camera.position ).normalize() );
    var intersects = raycaster.intersectObjects( self.scene.children );
    //CHANGE COLOR BASED ON INTERSECTION WITH ELEMENT
    if ( intersects.length > 0 ) {
        //SELECTED OBJECT
    }
}, false );

我认为 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);
}

Answer 2

如果你想在你的网页中使用它，你可能需要用你的画布元素而不是你的整个浏览器窗口的窗口来计算宽度和高度的向量。