相关疑难解决方法(0)

通过添加div,THREE.js Ray Intersect失败

当页面上只有一个目标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)

html javascript three.js

16
推荐指数
2
解决办法
1万
查看次数

Three.js - 正交相机

我正在开发一款展示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控件的鼠标滚轮缩放功能,移动相机的算法不再适用.另外我不明白摄像机构造函数的参数......这些宽度和高度是几何体还是视口?

javascript 3d three.js

12
推荐指数
2
解决办法
3万
查看次数

标签 统计

javascript ×2

three.js ×2

3d ×1

html ×1