相关疑难解决方法(0)

我一直在尝试使用Projector和Ray类来进行一些碰撞检测演示.我已经开始尝试使用鼠标选择对象或拖动它们.我已经查看了使用这些对象的示例,但是它们似乎没有任何评论可以解释投影仪和Ray正在做什么的一些方法.我有几个问题,我希望有人能回答这些问题.

究竟发生了什么,Projector.projectVector()和Projector.unprojectVector()有什么区别？我注意到,在使用投影仪和光线对象的所有示例中,似乎在创建光线之前调用了unproject方法.你什么时候使用projectVector？

我在此演示中使用以下代码在使用鼠标拖动时旋转立方体.当我用mouse3D和相机取消投影然后创建Ray时,有人能用简单的术语解释究竟发生了什么.光线是否依赖于对unprojectVector()的调用

/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
    event.preventDefault();
    mouseDown = true;
    mouse3D.x = mouse2D.x = mouseDown2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = mouseDown2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;

    /** Project from camera through the mouse and create a ray */
    projector.unprojectVector(mouse3D, camera);
    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
    var intersects = ray.intersectObject(crateMesh); // …

我有一个THREE.js场景,其中出现了很多元素,我需要检测用户点击的对象.

到目前为止我所做的是以下内容.相机不会移动太多 - 它只会将垂直位置改变一个有限的数量,始终朝向同一点.我的近似方法如下:

• 如果相对于画布的点击,我会获取坐标
• 我通过简单的重新缩放将它们转换为webGL场景中的水平和垂直坐标,并添加一个足够远的Z坐标.
• 我从上面的点开始采用水平射线,由THREE.Ray()构建
• 我使用ray.intersectObjects()来查找沿光线的第一个元素.

这种方法大致有效,但有时距离实际点几个像素.

是否有更可靠的技术来找出用户点击的对象？

我有一个位置为(x,y,z)的3D对象.如何计算该对象的屏幕位置(x,y)？

我已经找到了它,一个解决方案是我必须找出投影矩阵然后将3D位置点乘以该矩阵以将其投影到某个2D观察表面(计算机屏幕)上.但我不知道如何在Three.js中找到这个矩阵.

我尝试这样的转换函数,但它给出了错误的结果

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

预先感谢.

目标

我想更新摄像机位置,以便平面世界位置与DIV 屏幕位置匹配.

初步想法

我需要计算camera.position.z- 这样即使调整画布大小,飞机的面也会匹配DIV- 的大小.

this.computeZ = function(meshHandle, cameraHandle, faceHeight, targetHeight){
    var face = meshHandle.geometry.vertices[2]
    var vFOV = cameraHandle.fov * Math.PI / 180;  
    var vHeightPartial = 2 * Math.tan( vFOV / 2 );
    var p1 = faceHeight * window.innerHeight;
    var p2 = face.z * vHeightPartial;
    var p3 = targetHeight * vHeightPartial;
    var p4 = targetHeight * p2;
    var p5 = p1 + p4;
    var …

我想让一个 DOM 节点在我的 THREE.js 模拟中跟踪一个粒子。我的模拟是使用 Points 对象构建的，使用 bufferGeometry。我正在设置渲染循环中每个顶点的位置。在模拟过程中，我移动/旋转相机和 Points 对象（通过其父 Object3d）。

我不知道如何为我的任何粒子获得可靠的屏幕坐标。我已经按照其他问题的说明进行操作，例如Three.JS: Get position of rotation object，以及使用 Projection 在 Three.js 中将世界坐标转换为屏幕坐标，但它们似乎都不适合我。在这一点上，我可以看到顶点的计算投影随着我的相机移动和对象旋转而变化，但不是我可以实际映射到屏幕的方式。此外，有时在屏幕上相邻的两个粒子会产生截然不同的投影位置。

这是我最近的尝试：

const { x, y, z } = layout.getNodePosition(nodes[nodeHoverTarget].id)

var m = camera.matrixWorldInverse.clone()

var mw = points.matrixWorld.clone()

var p = camera.projectionMatrix.clone()

var modelViewMatrix = m.multiply(mw)
var position = new THREE.Vector3(x, y, z)
var projectedPosition = position.applyMatrix4(p.multiply(modelViewMatrix))
console.log(projectedPosition)

基本上我已经复制了着色器中的操作来派生gl_Position.

projectedPosition 是我想存储屏幕坐标的地方。

如果我错过了一些明显的东西，我很抱歉......我已经尝试了很多东西，但到目前为止没有任何效果：/

在此先感谢您的帮助。