时间戳

首页 > 解决方案 > 旋转后如何使脸部正常？

javascript - 旋转后如何使脸部正常？

问题描述

在开始之前，我意识到这是一个重复的问题。但是，对于另一个没有明确的答案，只是一种不适用于我的解决方法。

我正在使用three.js 构建一个魔方。为了创建逼真的旋转，我将它们围绕一个点旋转。我正在使用的功能在这里：

THREE.Object3D.prototype.rotateAroundWorldAxis = function () {

    // rotate object around axis in world space (the axis passes through point)
    // axis is assumed to be normalized
    // assumes object does not have a rotated parent

    var q = new THREE.Quaternion();

    return function rotateAroundWorldAxis(point, axis, angle) {

        q.setFromAxisAngle(axis, angle);

        this.applyQuaternion(q);

        this.position.sub(point);
        this.position.applyQuaternion(q);
        this.position.add(point);

        return this;

    }

}();

我还建立了一个手动函数来计算 3 个点的面部法线。我意识到three.js 有其中之一，这只是我的调试过程。它运行得很好，但是当我使用函数在魔方上旋转一个面时，内置的法线或我的函数都没有给出正确的方向，它们只是返回它们最初面对的方向。我的法线函数如下。

function computeNormal(p,face) {
    let a=p.geometry.vertices[face.a]
    let b=p.geometry.vertices[face.b]
    let c=p.geometry.vertices[face.c]
    let d=new THREE.Vector3(0,0,0)
    d.crossVectors(b.sub(a),c.sub(a))
    console.log(a,b,c,d)
    return d.normalize()
}

感谢您提供任何帮助，如果您需要我的任何其他代码，我很乐意提供

标签： javascriptthree.jsnormals

解决方案

典型的我在发布后解决它！我刚刚意识到我们可以获得包含面部的部分的旋转并将其旋转添加到面部（或其他效果）。更新后的功能：

function computeNormal(p,face) {
    let n=face.normal
    let r=p.rotation
    n.applyEuler(r)
    console.log(n)
    return n
}

推荐阅读