您如何保持照相机平稳地移动到新位置，同时仍然看着目标? [英] 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;}按钮{位置:绝对；font-weight:粗体;}  

 < button id ="moveUp">向上移动</button>< script src ="https://cdn.jsdelivr.net/npm/gsap@3.5.1/dist/gsap.min.js"</script>< script type ="module">从"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"导入{OrbitControls}；让场景= new THREE.Scene();scene.fog =新的THREE.Fog(0x000000，6，15);让相机=新的THREE.PerspectiveCamera(60，innerWidth/innerHeight，1，100);camera.position.set(0，0，10);让renderer = new THREE.WebGLRenderer();renderer.setSize(innerWidth，innerHeight);document.body.appendChild(renderer.domElement);让控件=新的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);让球形=新THREE.Spherical();让startPos = new THREE.Vector3();让endPos = new THREE.Vector3();让axis = new THREE.Vector3();让tri = new THREE.Triangle();函数onButtonClick(事件){spheric.setFromVector3(camera.position);sphere.phi = 0;spheric.makeSafe();//重要的事情，请参阅文档以了解其作用endPos.setFromSpherical(spherical);startPos.copy(camera.position);tri.set(endPos，scene.position，startPos);tri.getNormal(axis);让angle = startPos.angleTo(endPos);let value = {value:0};gsap.to(value，{value:1，持续时间:2onUpdate:function(){camera.position.copy(startPos).applyAxisAngle(轴，角度*值.值);controls.update();}，onStart:function(){moveUp.disabled = true;}，onComplete:function(){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屋！