Javascript 对象选择问题

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

我构建了一个原型，其中包含我的threejs内容，这里一切都很好（画布位于原型窗口中。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向量的计算是错误的，但我就是不知道如何正确计算

任何帮助都将不胜感激 非常感谢。 最佳饲养方式

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

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

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

EventsControl=新的EventsControl（camera、renderer.doElement）；
EventsControl.draggable=false；
EventsControl.onclick=函数（）{
console.log（this.focused.name）；
}
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
EventsControl.attach（网格）；
// 
函数render（）{
eventsControl.update（）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}

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

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

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

EventsControl=新的EventsControl（camera、renderer.doElement）；
EventsControl.draggable=false；
EventsControl.onclick=函数（）{
console.log（this.focused.name）；
}
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
EventsControl.attach（网格）；
// 
函数render（）{
eventsControl.update（）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}

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

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

请参阅嘿，谢谢您的反馈我尝试过，但仍然不起作用：（我发现了一些包含更多内容的页面，因此画布也可以通过滚动来访问…他的情况的不同之处在于他使用的是iFrame…我想做同样的事情，但没有iFrame…感谢您的帮助Hey感谢您的反馈我尝试过，但仍然不起作用：（我发现了一些包含更多内容的页面，因此画布也可以通过滚动来访问…他的情况的区别是他使用的是iFrame…我想做同样的事情，但没有iFrame…谢谢你的帮助这是我多次尝试的，但它不起作用这是我多次尝试的，但是它不起作用