How to rotate cubee by quaternion in three.js?

Question

I have some problems with understanding of how to rotate the figure by a quaternion. Can somebody please explain how to do it? In function render I want to rotate cubes by quaternions

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

You have an Object3d (Points, Lines, Meshes, etc.) that you want to rotate via quaternions. You have a mesh (the cube). The immediate answer is to:

cube.applyQuaternion(myquat);

And where does myquat come from? Probably from one of these:

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 )

I hope this gives you a start, even to ask a more specific question.