three.js - ThreeJS : How to clone the rotation of one object to another

Question

我有两个 Canvas ，其中两个 Canvas 有两个不同的对象。我正在尝试将一个对象的旋转设置为另一个。在这里，第二个 Canvas 对象充当一个 View 立方体，只有在 object_1 旋转时它才应该旋转。

我曾尝试将一台相机的旋转设置为另一台，但似乎无法实现。

这是 fiddle 链接 https://jsfiddle.net/jvy396x8/2/

     var cube = document.querySelector('.cube');
        // var container = document.getElementById('container');
     var scene_1Rotation;

        var scene = new THREE.Scene();

        var scene_1 = new THREE.Scene();

        var object;
        var w = window.innerWidth;
        var h = window.innerHeight;
        var viewSize = h;
        var aspectRatio = w / h;

        _viewport = {
            viewSize: viewSize,
            aspectRatio: aspectRatio,
            left: (-aspectRatio * viewSize) / 2,
            right: (aspectRatio * viewSize) / 2,
            top: viewSize / 2,
            bottom: -viewSize / 2,
            near: -10000,
            far: 10000
        }

        var camera = new THREE.OrthographicCamera(
            _viewport.left,
            _viewport.right,
            _viewport.top,
            _viewport.bottom,
            _viewport.near,
            _viewport.far
        );
        camera.zoom = 25;
        var camera_1 = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.001, 1000000);
        // var camera = new THREE.OrthographicCamera(window.innerWidth / -30, window.innerWidth / 30, window.innerHeight / 30, window.innerHeight / -30, 1, 1000)
        camera.position.set(20, 0, 0);

        var renderer = new THREE.WebGLRenderer({
            antialias: true
        });

        var renderer_1 = new THREE.WebGLRenderer({
            antialias: true
        });


        $('#container').append(renderer_1.domElement);



        $('#scene').html(renderer_1.domElement);
        // var zoom = orthoWidth / meshWidth;
        // _Camera.setZoom(zoom);
        object = new THREE.Group();
        scene.background = new THREE.Color(0xffffff0);
        console.log(scene);
        scene_1.background = new THREE.Color(0xffffff);
        console.log(scene_1);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        var controls_1 = new THREE.OrbitControls(camera_1, renderer_1.domElement);

        var geometry_1 = new THREE.BoxGeometry();
        var material_1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube_1 = new THREE.Mesh(geometry_1, material_1);
        scene_1.add(cube_1);
        var geometry_2 = new THREE.BoxGeometry();
        var material_2 = new THREE.MeshBasicMaterial({ color: 0x00fff0   });
        var cube_2 = new THREE.Mesh(geometry_2, material_2);
        cube_2.position.x = 1;
        scene_1.add(cube_2);
        controls_1.noPan = true;
        controls_1.noZoom = true;

        camera_1.position.z = 2;

        var material = new THREE.LineBasicMaterial({
            color: 0x0000ff
        });

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(0, 7, 0),
            new THREE.Vector3(0, 0, 0)
        );

        var line = new THREE.Line(geometry, material);
        object.add(line)
        scene.add(object);

        var material = new THREE.LineBasicMaterial({
            color: 0xcc0000
        });

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(7, 0, 0)
        );

        var line = new THREE.Line(geometry, material);
        object.add(line)
        scene.add(object);

        var material = new THREE.LineBasicMaterial({
            color: 0x008900
        });

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3(0, 0, 7),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(0, 0, 0)
        );

        var line = new THREE.Line(geometry, material);
        object.add(line)

        scene.add(object);

        // ' X ' AXIS dashed material  |
        var xPlaneDashedMaterial = new THREE.LineDashedMaterial({ color: 0x00008b, dashSize: Math.PI * 2 / 20, gapSize: Math.PI * 2 / 20, linewidth: 10 }),
            xPlaneDashedCircleGeometry = new THREE.CircleGeometry(7, 75, 69.9, 5);
        xPlaneDashedCircleGeometry.vertices.shift();
        var xPlaneDashedGeomtry = new THREE.Line(xPlaneDashedCircleGeometry, xPlaneDashedMaterial);
        xPlaneDashedGeomtry.computeLineDistances();
        object.add(xPlaneDashedGeomtry)

        scene.add(object);

        var xPlanePlainMaterial = new THREE.MeshBasicMaterial({ color: 0x00008b });
        var xplanePlainCirleGeometry = new THREE.CircleGeometry(7, 75, 18.3, 1.3);
        xplanePlainCirleGeometry.vertices.shift();
        var xPlanePlainGeomtry = new THREE.Line(xplanePlainCirleGeometry, xPlanePlainMaterial);
        object.add(xPlanePlainGeomtry)

        scene.add(object);

        // ' Y ' AXIS dashed material  -

        var yPlaneDashedMaterial = new THREE.LineDashedMaterial({ color: 0xcc0000, dashSize: Math.PI * 2 / 20, gapSize: 1 * Math.PI * 2 / 20, linewidth: 10 });
        var yPlaneDashedCircleGeometry = new THREE.CircleGeometry(7, 30, 7., 4.8);
        yPlaneDashedCircleGeometry.vertices.shift();
        var yPlaneDashedGeomtry = new THREE.Line(yPlaneDashedCircleGeometry, yPlaneDashedMaterial);
        yPlaneDashedGeomtry.computeLineDistances();
        yPlaneDashedGeomtry.rotation.x = 17.27;
        object.add(yPlaneDashedGeomtry)

        scene.add(object);


        var yPlanePlainMaterial = new THREE.MeshBasicMaterial({ color: 0xcc0000 });
        var yPlanePlainCirleGeometry = new THREE.CircleGeometry(7, 75, 18.1, 1.5);
        yPlanePlainCirleGeometry.vertices.shift();
        var yPlanePlainGeomtry = new THREE.Line(yPlanePlainCirleGeometry, yPlanePlainMaterial);
        yPlanePlainGeomtry.rotation.x = 17.27;
        object.add(yPlanePlainGeomtry)

        scene.add(object);


        // ' Z ' AXIS material /
        var zPlanePlainMaterial = new THREE.LineDashedMaterial({ color: 0x008900, dashSize: 1 * Math.PI * 4 / 40, gapSize: 1 * Math.PI * 4 / 40, linewidth: 10 });
        var zPlanePlainCirleGeometry = new THREE.CircleGeometry(7, 75, 69.9, 10);
        zPlanePlainCirleGeometry.vertices.shift();
        var zPlanePlainGeomtry = new THREE.Line(zPlanePlainCirleGeometry, zPlanePlainMaterial);
        zPlanePlainGeomtry.computeLineDistances();
        zPlanePlainGeomtry.rotation.y = 17.27;
        object.add(zPlanePlainGeomtry)
        scene.add(object);
        // ' X 'CONE geomtry|
        var xPlaneConeGeometry = new THREE.ConeGeometry(0.2, 1, 32);
        var xPlaneConeGeomtryMaterial = new THREE.MeshBasicMaterial({ color: 0x00008b });

        var xPlaneConeGeometryLeft = new THREE.Mesh(xPlaneConeGeometry, xPlaneConeGeomtryMaterial);
        object.add(xPlaneConeGeometryLeft)
        scene.add(object);

        //' X ' CONE
        xPlaneConeGeometryLeft.position.y = 6.5;

        //' Y 'CONE geomtry
        var yPlaneConeGeometry = new THREE.ConeGeometry(0.2, 1, 32);
        var yPlaneConeGeomtryMaterial = new THREE.MeshBasicMaterial({ color: 0xcc0000 });

        var zPlaneConeGeometry = new THREE.ConeGeometry(0.2, 1, 32);
        var zPlaneConeGeomtryMaterial = new THREE.MeshBasicMaterial({ color: 0x008900 });

        var yPlaneConeGeometryLeft = new THREE.Mesh(yPlaneConeGeometry, yPlaneConeGeomtryMaterial);
        object.add(yPlaneConeGeometryLeft);
        scene.add(object);

        var zPlaneConeGeometryRight = new THREE.Mesh(zPlaneConeGeometry, zPlaneConeGeomtryMaterial);
        object.add(zPlaneConeGeometryRight)
        scene.add(object);

        console.log("object");
        console.log(object.children.rotation);

        // ' Y ' CONE
        yPlaneConeGeometryLeft.position.x = 6.5;
        yPlaneConeGeometryLeft.rotation.z = 4.7;
        zPlaneConeGeometryRight.position.z = 6.5;
        zPlaneConeGeometryRight.rotation.x = 1.6;


        var mat = new THREE.Matrix4();
        renderer_1.setAnimationLoop(() => {

            mat.extractRotation(camera_1.matrixWorldInverse);


            renderer_1.render(scene_1, camera_1);

            camera_1.updateProjectionMatrix();

        });

        renderer.setAnimationLoop(() => {

            mat.extractRotation(camera.matrixWorldInverse);


            renderer.render(scene, camera);


            camera.updateProjectionMatrix();

        });

Answer 1

I have tried by set the rotation of the one camera to another by I can't able to achieve it.

要在第二个场景中复制预期行为，仅复制旋转是不够的。环绕也改变了相机的位置。因此，我建议您在两个场景中使用单个相机。

另请注意，没有必要每帧更新相机的投影矩阵。在您的用例中，在更改 zoom 后立即执行一次属性(property)。

更新 fiddle : https://jsfiddle.net/s0wzdm32/1/