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

Question

I have two canvas where two canvas has two different objects. I'm trying to set the rotation of one object to another. Here the second canvas object acts as a viewcube where it should only rotate when the object_1 gets rotated.
I have tried by set the rotation of the one camera to another but I can't seem to achieve it.
Here's the fiddle link 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.
To replicate the intended behavior in the second scene, it's not sufficient to just copy the rotation. Orbiting also transforms the position of the camera. Hence I suggest that you use a single camera for both scenes.
Also note that it's not necessary to update the projection matrix of your camera per frame. In your use case, do it once right after changing the zoom property.
Updated fiddle: https://jsfiddle.net/s0wzdm32/1/