【问题标题】:Three.js How to point child of Object3d to face camera?Three.js如何将Object3d的孩子指向相机?
【发布时间】:2012-11-19 22:36:28
【问题描述】:

事情就是这样。我有一个 Object3d,它由 6 个平面组成,形成一个立方体。现在,在基于鼠标输入应用四元数旋转之后并且在立方体停止之后 - 我需要立方体在其最近的一侧(平面子)直接转向相机。我现在正在做的是获取我的 Object3d 矩阵的当前欧拉角,对这个矩阵应用旋转并使用 setFromRotationMatrix() 函数将其设置回我的对象​​的四元数。有时这种方法有效(通常在低角度下),有时 Z 轴表现错误(或者可能是 Y,甚至所有这些都无法分辨)。

现在,我当然可以只计算最近的一侧并将这一侧的直接四元数应用于我的对象,这可行,但没有动画效果。

我正在使用此代码获取当前角度:http://www.cs.princeton.edu/~gewang/projects/darth/stuff/quat_faq.html#Q37。基于此,我计算每个轴最接近的 90 度旋转:

        function lookAtCamDeg(val){
            var d = 1;
            var s = 1;
            var newAngle;

            if(val < 0)d*=-1;

            val = Math.abs(val);

            if(val <= 45)s*=-1;
            if(val > 45)val=90-val;

            newAngle = val*d*s;

            return newAngle;
        }

并应用它来转动我的立方体:

            var angles = getAngles();http://www.cs.princeton.edu/~gewang/projects/darth/stuff/quat_faq.html#Q37
            var newX = lookAtCamDeg(angles.x);
            var newY = lookAtCamDeg(angles.y);
            var newZ = lookAtCamDeg(angles.z);

            var ma = cube.matrix;
            ma = ma.rotateX(-newX*DEGREES)
            ma = ma.rotateY(-newY*DEGREES)
            ma = ma.rotateZ(-newZ*DEGREES)
            cube.quaternion.setFromRotationMatrix(ma);

我现在想的是尝试使用我的立方体(子)的单独平面并根据它们的法线应用 lookAt() 方法,但不知道该怎么做,因为我需要旋转整个对象,不只是一个孩子。有人可以引导我走向正确的方向吗?满足我需求的最佳方式是什么?

【问题讨论】:

    标签: html canvas three.js 3d


    【解决方案1】:

    THREE.Quaterion 对象包含插值方法。所以计算原始人脸法线的四元数,你从setFromRotationMatrix(ma)这里得到的四元数,然后反复应用THREE.Quaterion.slerp()得到in-betweens,可以应用到cube.quaternion

    【讨论】:

    • 我以前从未使用过 slerps,所以说有点害怕:))) 我找到的解决方案是用公式 TransQ = InitQ^-1 计算 2 quat 之间的差异* FinQ,其中 ^-1 是 conjugate() 函数。因此,我只需创建新矩阵,对其应用旋转,最后使用setFromRotationMatrix() 将此矩阵应用于我的对象的quat。困难的部分是要了解这整个混乱究竟是如何造成的。不过感谢您的建议!)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-11-30
    • 1970-01-01
    • 1970-01-01
    • 2018-08-01
    • 1970-01-01
    • 2013-03-14
    • 2023-04-04
    相关资源
    最近更新 更多