我有两个画布，其中两个画布具有两个不同的对象。我正在尝试将一个对象的旋转设置为另一个对象。在这里，第二个画布对象充当一个视图多维数据集，仅在object_1旋转时才应旋转。
我尝试将一台摄像机的旋转设置为另一台，但是我似乎无法实现。
这是小提琴链接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();
});
答案 0 :(得分：2)
我尝试将一台摄像机的旋转设置为另一台，因为我无法实现它。
要在第二个场景中复制预期的行为，仅复制旋转是不够的。绕行也会改变相机的位置。因此，我建议您在两个场景中都使用单个摄像机。
还请注意，不必每帧更新相机的投影矩阵。在您的用例中，请更改zoom属性后立即执行一次。