如何在 three.js 中按四元数旋转立方体？

Question

我在理解如何按四元数旋转图形时遇到了一些问题。有人可以解释一下该怎么做吗？在函数 render 中，我想按四元数旋转立方体

function main() {
            const canvas = document.querySelector('#c');
            const renderer = new THREE.WebGLRenderer({canvas});

            const fov = 100;
            const aspect = 2;  // the canvas default
            const near = 0.1;
            const far = 5;
            const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
            camera.position.z = 3;

            const scene = new THREE.Scene();

            {
                const color = 0xFFFFFF;
                const intensity = 1;
                const light = new THREE.DirectionalLight(color, intensity);
                light.position.set(-1, 2, 4);
                scene.add(light);
            }


            function makeInstance(color, x, width, height, depth) {
                const material = new THREE.MeshPhongMaterial({color});
                const geometry = new THREE.BoxGeometry(width, height, depth);



                const cube = new THREE.Mesh(geometry, material);
                scene.add(cube);

                cube.position.x = x;

                return cube;
            }

            const cubes = [
                makeInstance(0x8844aa, -2, 3, 1, 1),
                makeInstance(0xaa8844,  0.5, 2, 1, 1),
            ];

            function resizeRendererToDisplaySize(renderer) {
                const canvas = renderer.domElement;
                const width = canvas.clientWidth;
                const height = canvas.clientHeight;
                const needResize = canvas.width !== width || canvas.height !== height;
                if (needResize) {
                    renderer.setSize(width, height, false);
                }
                return needResize;
            }

            function render(time) {
                time *= 0.001;

                if (resizeRendererToDisplaySize(renderer)) {
                    const canvas = renderer.domElement;
                    camera.aspect = canvas.clientWidth / canvas.clientHeight;
                    camera.updateProjectionMatrix();
                }

               // cubes.forEach((cube, ndx) => {
                //const speed = 1 + ndx * .1;
                //const rot = time * speed;
                //cube.rotation.x = rot;
                //cube.rotation.y = rot;
                //});

                renderer.render(scene, camera);

                requestAnimationFrame(render);
            }

            requestAnimationFrame(render);
        }

        main();

Answer 1

您有一个要通过四元数旋转的 Object3d（点、线、网格等）。你有一个网格（立方体）。直接的答案是：

cube.applyQuaternion(myquat);

myquat 从何而来？可能来自其中之一：

myquat = new THREE.Quaternion(); // now, Probably from one of these:
myquat.setFromAxisAngle ( axis : Vector3, angle : Float )
myquat.setFromEuler ( euler : Euler ) 
myquat.setFromRotationMatrix ( m : Matrix4 ) 
myquat.setFromUnitVectors ( vFrom : Vector3, vTo : Vector3 )

我希望这能给你一个开始，甚至是问一个更具体的问题。

如何在 three.js 中按四元数旋转立方体？

How to rotate cubee by quaternion in three.js?

graphics

quaternions

three.js