Как вращать куби кватернионом в три. js? - PullRequest
Новая
       50

Как вращать куби кватернионом в три. js?

0 голосов
/ 16 апреля 2020

У меня есть некоторые проблемы с пониманием того, как повернуть фигуру кватернионом. Может кто-нибудь объяснить, пожалуйста, как это сделать? В функции 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();

1 Ответ

2 голосов
/ 16 апреля 2020

У вас есть Object3d (Точки, Линии, Сетки и т. Д. c.), Который вы хотите вращать через кватернионы. У тебя есть я sh (куб). Непосредственный ответ: 

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 )

Я надеюсь, что это даст вам старт, даже для того, чтобы задать более конкретный c вопрос.

...