当页面上只有一个目标div(包含renderer.domElement)时,我的Three.js脚本运行良好。只要在目标div上方添加另一个具有固定高度和宽度的div,ray.intersectObjects就会返回null。我怀疑我为ray创建的向量会引起问题。这是代码。
var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 - 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( myObjects, true );
关于如何解决此问题的任何想法。
编辑:现在是THREE.Raycaster (three.js r.56)
THREE.Raycaster
简短的答案是您必须考虑offset画布的材质。
offset
长答案取决于代码的编写方式,因此我将给您两个答案,其中应涵盖基础知识。
有很多可能的组合,因此您可能必须进行试验。同样,不同的浏览器可能会采取不同的行动。
假设您的HTML是这样的:
#canvas { width: 200px; height: 200px; margin: 100px; padding: 0px; position: static; /* fixed or static */ top: 100px; left: 100px; } <body> <div id="canvas"> </body>
您的JS是这样的:
var CANVAS_WIDTH = 200, CANVAS_HEIGHT = 200; var container = document.getElementById( 'canvas' ); document.body.appendChild( container ); renderer = new THREE.WebGLRenderer(); renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT ); container.appendChild( renderer.domElement );
方法1 为使以下方法正常工作,请将画布位置设置为 static ;边距> 0和padding> 0都可以
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1; mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
方法2 对于此替代方法,将画布位置设置为 fixed ;置顶> 0,置左> 0; 填充必须为0;边距> 0可以
mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1; mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;
如果您想尝试,这里有一个小提琴:http : //jsfiddle.net/cn7ecoaa/
编辑:小提琴更新为three.js r.84