Question

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

我构建了一个包含我的threejs内容的原型，一切都运行良好（画布在原型window.innerWidth和window.innerHeight =＆gt;所以与我的浏览器窗口大小相同。选择效果很好，但我想要在我的网页应用程序上使用画布并选择3D表面也需要在那里工作。

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

对于选择我使用以下逻辑/代码 - ＆gt;这个在“全屏原型”中运行良好，但在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 );

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

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

Threejs对象选择问题

2 个答案: