当页面上只有一个目标div(包含renderer.domElement)时,我的Three.js脚本运行正常.只要我在目标div上方添加另一个固定高度和宽度的div,ray.intersectObjects就会返回null.我怀疑我为光线创建的矢量是否会导致问题.这是代码.
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 );
Run Code Online (Sandbox Code Playgroud)
关于如何解决这个问题的任何想法.
编辑:现在是THREE.Raycaster (three.js r.56)
我正在开发一款展示3D模型的应用程序.我们加载模型,创建网格,将它们添加到场景......标准程序.添加最后一个网格后,我们计算边界框以移动相机并覆盖所有场景,使用总几何的大小和视口的大小来进行数学运算.
if (bounds.bx / bounds.by < camera.aspect) {
/* Vertical max */
r = bounds.by / (2 * Math.tan(Math.PI / 8));
} else {
/* Horizontal max */
hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
r = bounds.bx / (2 * Math.tan((hFOV / 2)));
}
Run Code Online (Sandbox Code Playgroud)
bounds是包含边界框宽度和高度的对象.在这个计算之后,我们移动相机(加上一点比例,只是美学,我们想要在几何和屏幕边框之间有一点空间:))并渲染
camera.position.z = r * 1.05;
Run Code Online (Sandbox Code Playgroud)
到目前为止,这已实施并运行正常.这已经通过PerspectiveCamera完成.现在我们要改变它并使用OrthographicCamera ......结果是一团糟.模型太小,我们失去了TrackBall控件的鼠标滚轮缩放功能,移动相机的算法不再适用.另外我不明白摄像机构造函数的参数......这些宽度和高度是几何体还是视口?