javascript - Threejs对象选择问题

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

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

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

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

ojit_pre

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

或参见此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);
}

关于javascript - Threejs对象选择问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26488739/

ThreeJS

javascript - Threejs对象选择问题