Question

我正在尝试使相机perspectiveCamera绕椭圆或矩形形状的场景旋转。我似乎想不出一种方法来使相机在碰到边缘时自动缩小，以免场景被切断。

出于可视化的目的，我非常希望this effect

我整天都在尝试，而且缺少硬编码位置（这不是正确的解决方案），我没有达到要求。

Answer 1

一个非常粗略的曲线概念（鼠标事件的代码摘自here）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10, 10, -10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

scene.add(new THREE.GridHelper(20, 20, 0x404040, 0x404040));

// island
var boxGeo = new THREE.BoxBufferGeometry();
boxGeo.translate(0, 0.5, 0);
var boxMat = new THREE.MeshLambertMaterial({
  color: 0x909090
});
for (let x = -5; x < 6; x++) {
  for (let y = -3; y < 4; y++) {
    let box = new THREE.Mesh(boxGeo, boxMat);
    box.scale.y = THREE.Math.randInt(1, 3);
    box.position.set(x - 0.5, 0, y - 0.5);
    scene.add(box);
    let edgesGeo = new THREE.EdgesGeometry(boxGeo);
    let edges = new THREE.LineSegments(edgesGeo, new THREE.LineBasicMaterial({
      color: 0xaaaaaa
    }));
    box.add(edges);
  }
}

//path
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 6, 6),
  new THREE.Vector3(12, 6, 0),
  new THREE.Vector3(0, 6, -6),
  new THREE.Vector3(-12, 6, 0)
])
curve.closed = true;

curve.getPoint(0, camera.position);
camera.lookAt(scene.position);

var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var currentPoint = 0;
var currPoint = 0;

document.addEventListener('mousedown', onDocumentMouseDown, false);

function onDocumentMouseDown(event) {
  event.preventDefault();
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mouseup', onDocumentMouseUp, false);
  document.addEventListener('mouseout', onDocumentMouseOut, false);
  mouseXOnMouseDown = event.clientX - windowHalfX;
  targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
  currPoint = (targetRotation - targetRotationOnMouseDown) * 0.05;
}

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);
}

render();

function render() {
  requestAnimationFrame(render);
  curve.getPoint(currPoint, camera.position);
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

Answer 2

@ prisoner849的副本，其中某些问题已已修复，用于修复的某些定义。想过只编辑该答案，但以为我做了太多更改。如果不合适的话，很高兴把它记下来

修复不连续性错误
删除对窗口大小的依赖
使代码句柄调整大小
处理鼠标捕获

注意：从v69开始，Chrome的iframe中的鼠标抓取功能均无法使用，此处实现的Safari也无法使用。它确实可以在Firefox中使用。换句话说，单击图像，将拖到窗口外。如果您是iframe，则将其拖到框架之外就将停止获取事件。如果您是顶层框架，则将继续在窗口外获取事件事件。

这有很多问题。

如果您按原样保留代码，并且您位于iframe中，则用户在iframe中单击并拖动，将鼠标移出iframe，然后放开鼠标按钮，拖动将被粘住到鼠标，直到用户单击框架（mouseup事件永远不会到达）

一种解决方案是将监听器添加到mouseout中以删除所有听众。该解决方案的问题在于鼠标触摸iframe的边缘或鼠标断开连接的窗口拖动，这是一个糟糕的用户体验。

另一种可能的解决方案是仅在mouseout时断开鼠标在iframe中，但是仍然存在这样的问题，即用户滑出iframe时，即使鼠标不松动，鼠标也会断开连接鼠标并最终拖回框架中

检查其他站点，似乎大多数站点选择只让鼠标卡在拖动模式下（嵌入的Google地图将此行为显示为将Three.js相机控件作为两个示例）。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement
document.body.appendChild(canvas);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10, 10, -10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

scene.add(new THREE.GridHelper(20, 20, 0x404040, 0x404040));

// island
var boxGeo = new THREE.BoxBufferGeometry();
boxGeo.translate(0, 0.5, 0);
var boxMat = new THREE.MeshLambertMaterial({
  color: 0x909090
});
for (let x = -5; x < 6; x++) {
  for (let y = -3; y < 4; y++) {
    let box = new THREE.Mesh(boxGeo, boxMat);
    box.scale.y = THREE.Math.randInt(1, 3);
    box.position.set(x - 0.5, 0, y - 0.5);
    scene.add(box);
    let edgesGeo = new THREE.EdgesGeometry(boxGeo);
    let edges = new THREE.LineSegments(edgesGeo, new THREE.LineBasicMaterial({
      color: 0xaaaaaa
    }));
    box.add(edges);
  }
}

//path
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 6, 6),
  new THREE.Vector3(12, 6, 0),
  new THREE.Vector3(0, 6, -6),
  new THREE.Vector3(-12, 6, 0)
])
curve.closed = true;

curve.getPoint(0, camera.position);
camera.lookAt(scene.position);

var mouseXOnMouseDown = 0;
var currPoint = 0;
var currPointOnMouseDown = 0;

canvas.addEventListener('mousedown', onCanvasMouseDown, true);

function onCanvasMouseDown(event) {
  event.preventDefault();
  event.stopPropagation();  
  window.addEventListener('mousemove', onDocumentMouseMove, true);
  window.addEventListener('mouseup', removeListeners, true);
  mouseXOnMouseDown = event.clientX;
  currPointOnMouseDown = currPoint;
}

function onDocumentMouseMove(event) {
  event.preventDefault();
  event.stopPropagation();
  var deltaMouseX = event.clientX - mouseXOnMouseDown;
  currPoint = THREE.Math.euclideanModulo(currPointOnMouseDown + deltaMouseX * 0.0005, 1);
}

function removeListeners() {
  window.removeEventListener('mousemove', onDocumentMouseMove, true);
  window.removeEventListener('mouseup', removeListeners, true);
}

render();

function resize(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() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  
  curve.getPoint(currPoint, camera.position);
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

html, body {
  height: 100%;
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

Three.js将相机旋转为椭圆形

2 个答案: