您如何在仍然注视目标的同时保持使相机平稳地移动到新位置? [英] How do you maintain make a camera move to a new position smoothy while still looking at a target?

问题描述

在这个

解决方案

您可以使用任何补间库(Tween.js、GSAP)将您的相机从当前位置平滑地移动到球体顶部的位置.

此外，使用 THREE.Spherical() 计算最终点.并且不要忘记使用 .makeSafe() 方法.

body {溢出:隐藏；边距:0；}按钮{位置:绝对；字体粗细:粗体；}

向上移动</button><script src="https://cdn.jsdelivr.net/npm/gsap@3.5.1/dist/gsap.min.js"></script><脚本类型=模块">从https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js"导入*为三；从https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js"导入{轨道控制}；让场景 = new THREE.Scene();Scene.fog = new THREE.Fog(0x000000, 6, 15);let camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 1, 100);相机位置设置(0, 0, 10);let renderer = new THREE.WebGLRenderer();renderer.setSize(innerWidth,innerHeight);document.body.appendChild(renderer.domElement);让控件 = new OrbitControls(camera, renderer.domElement);控制.maxDistance = 10;控制.minDistance = 7;let sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(4, 36, 18), new THREE.MeshBasicMaterial({color: "aqua", wireframe: true}));场景添加(球体)；moveUp.addEventListener("click", onButtonClick);让球面 = 新的 THREE.Spherical();让 startPos = new THREE.Vector3();让 endPos = new THREE.Vector3();让轴 = 新的 THREE.Vector3();让tri = new THREE.Triangle();函数 onButtonClick(event){球面.setFromVector3(camera.position);球面.phi = 0;球形.makeSafe();//重要的是，查看文档了解它的作用endPos.setFromSpherical(球形)；startPos.copy(camera.position);tri.set(endPos,scene.position,startPos);tri.getNormal(axis);让角度 = startPos.angleTo(endPos);让价值 = {价值:0};gsap.to(value, {value: 1,持续时间:2，更新:函数(){camera.position.copy(startPos).applyAxisAngle(axis, angle * value.value);控制更新()；},开始:功能(){moveUp.disabled = true;},onComplete: 函数(){moveUp.disabled = false;}}).玩();/**/}renderer.setAnimationLoop(()=>{renderer.render(场景，相机)；});</script>

In this question, I asked about how one would moves a camera to a different position relative to a target. A very kind gentleman @TheJim01 provided a veery nice answer.

However, I am getting issues with this where the camera is rotated and positioned strangely after I move it.

What are the strategies to keep the camera rotated and maintaining its view of the target smoothly?

解决方案

You can use any tweening library (Tween.js, GSAP) to move your camera smoothly from current position to the position atop of the sphere.

Also, use THREE.Spherical() to compute the final point. And don't forget to use .makeSafe() method.

body {
  overflow: hidden;
  margin: 0;
}
button{
  position: absolute;
  font-weight: bold;
}

<button id="moveUp">MOVE UP</button>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.5.1/dist/gsap.min.js"></script>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 6, 15);
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
controls.maxDistance = 10;
controls.minDistance = 7;

let sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(4, 36, 18), new THREE.MeshBasicMaterial({color: "aqua", wireframe: true}));
scene.add(sphere);

moveUp.addEventListener("click", onButtonClick);

let spherical = new THREE.Spherical();
let startPos = new THREE.Vector3();
let endPos = new THREE.Vector3();
let axis = new THREE.Vector3();
let tri = new THREE.Triangle();

function onButtonClick(event){
  spherical.setFromVector3(camera.position);
  spherical.phi = 0;
  spherical.makeSafe(); // important thing, see the docs for what it does
  endPos.setFromSpherical(spherical);
  
  startPos.copy(camera.position);
  
  tri.set(endPos, scene.position, startPos);
  tri.getNormal(axis);
  
  let angle = startPos.angleTo(endPos);
  
  let value = {value: 0};
  gsap.to(value, {value: 1, 
    duration: 2,
    onUpdate: function(){
      camera.position.copy(startPos).applyAxisAngle(axis, angle * value.value);
      controls.update();
    },
    onStart: function(){
      moveUp.disabled = true;
    },
    onComplete: function(){
      moveUp.disabled = false;
    }
    })
    .play();/**/
}

renderer.setAnimationLoop(()=>{
  renderer.render(scene, camera);
});
</script>

这篇关于您如何在仍然注视目标的同时保持使相机平稳地移动到新位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！