ThreeJS - 具有不同旋转中心和观察点的 OrbitControl

Question

我一直在我的应用程序中使用 OrbitControl 来允许在世界各地旋转相机。最近我在尝试增强控制，让相机可以围绕任意点旋转，而不仅仅是相机的lookAt点。我还没有取得多大的成功。

在代码中，如果我删除它：this.object.lookAt( this.target );它工作得不好。有任何想法吗？

一些图片来澄清：

我围绕对象的中心（枢轴）旋转了相机，但相机没有看中心。

Answer 1

只需更新 controls.target 属性，例如：

controls.target.set(1, 5, 7);

或以网格为目标：

controls.target.copy(mesh.position)

Answer 2

OrbitControls 设计用于绕场景运行，相机视口直接看着控件旋转目标。它们的设计目的不是为了处理与相机分开的对象旋转，它们具有 TransformControls，但不支持阻尼。

使用轨道控件旋转，锁定相机视口以查看中心（虚线），并绕中心（红线）旋转：

如果移动/平移目标，摄像机目标和旋转中心都会一起移动，如下所示：

您需要的是旋转中心和相机目标是独立的，因此相机围绕物体旋转，同时看着某个点，如下所示：

似乎有两种方法可以创建自定义相机/旋转功能：

1) 修改OrbitControls 更改camera.lookAt以偏离controls.target

查看 OrbitControls 所需的更改： https://github.com/sciecode/third.js/commit/dccf1578343bb9b7c79bb2eb2004d5ee34a76e6a#diff-ffef32863dd826c87a45cfb28c4ddd83

自定义轨道控件演示： https: //jsfiddle.net/kmturley/6qxh3zc9/28/

2) 修改 TransformControls 更改变换控件以允许阻尼、自由旋转并隐藏 Gizmo 叠加层。

自定义变换控件演示 https://jsfiddle.net/kmturley/2p1v6bcw/18/

3) 创建您自己的对象旋转控件

import * as THREE from "https://threejs.org/build/three.module.js";

var mesh, renderer, scene, camera, controls;
var radius = 5;
var group;
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var finalRotationY

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, radius * 2, radius * 2);
  camera.lookAt(0, radius, 0)

  // controls
  /*     controls = new OrbitControls( camera, renderer.domElement ); */
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // geometry
  var geometry = new THREE.SphereGeometry(radius, 12, 8);

  // material
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true,
    transparent: true,
    opacity: 0.7,
  });

  // mesh
  group = new THREE.Object3D();
  mesh = new THREE.Mesh(geometry, material);
  group.add(mesh);
  scene.add(group);
}

function onDocumentMouseDown(event) {
  event.preventDefault();
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mouseup', onDocumentMouseUp, false);
  document.addEventListener('mouseout', onDocumentMouseOut, false);
  mouseXOnMouseDown = event.clientX - windowHalfX;
  targetRotationOnMouseDownX = targetRotationX;
  mouseYOnMouseDown = event.clientY - windowHalfY;
  targetRotationOnMouseDownY = targetRotationY;
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;
  targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
  targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;
}

function onDocumentMouseUp(event) {
  document.removeEventListener('mousemove', onDocumentMouseMove, false);
  document.removeEventListener('mouseup', onDocumentMouseUp, false);
  document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentMouseOut(event) {
  document.removeEventListener('mousemove', onDocumentMouseMove, false);
  document.removeEventListener('mouseup', onDocumentMouseUp, false);
  document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentTouchStart(event) {
  if (event.touches.length == 1) {
    event.preventDefault();
    mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
    targetRotationOnMouseDownX = targetRotationX;
    mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;
    targetRotationOnMouseDownY = targetRotationY;
  }
}

function onDocumentTouchMove(event) {
  if (event.touches.length == 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.05;
    mouseY = event.touches[0].pageY - windowHalfY;
    targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.05;
  }
}

function animate() {
  requestAnimationFrame(animate);
  rotate();
  renderer.render(scene, camera);
}

function rotate() {
  group.rotation.y += (targetRotationX - group.rotation.y) * 0.1;
  finalRotationY = (targetRotationY - group.rotation.x);
  if (group.rotation.x <= 1 && group.rotation.x >= -1) {
    group.rotation.x += finalRotationY * 0.1;
  }
  if (group.rotation.x > 1) {
    group.rotation.x = 1
  }
  if (group.rotation.x < -1) {
    group.rotation.x = -1
  }
}

自定义旋转控件演示： https://jsfiddle.net/kmturley/6317jd95/11/

另一个人的例子： http ://projects.defmech.com/ThreeJSObjectRotationWithQuaternion/

Three.js github 项目中对这些方法进行了讨论： https://github.com/mrdoob/ Three.js/issues/18476