JavaScript / Three.js - 添加移动过渡曲线以改变 z 轴上的相机位置答案

【问题标题】：JavaScript / Three.js - Adding mooving transition curve to changing camera position in z axisJavaScript / Three.js - 添加移动过渡曲线以改变 z 轴上的相机位置
【发布时间】：2020-03-11 08:45:34
【问题描述】：

我正在尝试进入 Three.js，但我遇到了一个小问题。我的场景中间有一个旋转的二十面体，当我单击一个按钮时，它应该开始旋转得更快一些，并且相机应该更靠近它，所以它看起来更大。问题是我正在以线性方式改变距离/旋转速度。我想要实现的是为这个动画添加某种加速曲线。

但是……我迷路了。我查看了大量的教程和示例，但没有一个向我解释如何实现类似三次贝塞尔的效果。

我也在尝试使用 GSAP 让它工作，但我没有任何效果。如果您无法提供帮助，那么也许知道我可以从中学习这些东西的任何好文章？或者可能是涵盖此类转换的教程？

这是我的代码：

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 5000 );
    
let renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

window.addEventListener('resize',() => {
  let width = window.innerWidth;
  let height = window.innerHeight;
  renderer.setSize( width, height );
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

camera.position.z = 10;

var pointL1 = new THREE.PointLight( 0xffffff, 2, 30);
pointL1.position.x = -4;
pointL1.position.y = 7;
pointL1.position.z = 8;
scene.add( pointL1 );


var geometry1 = new THREE.IcosahedronGeometry(5, 1);
var material1 = new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true } );
var icosahedron = new THREE.Mesh( geometry1, material1 );
scene.add( icosahedron );

icosahedron.rotation.y -= 1;


let maxCameraDist = 10;
let minCameraDist = 8;
let cameraDist = 10;
        
let duringChange = false;

function render () {
  if (duringChange == false) {
    icosahedron.rotation.y += 0.001;
    icosahedron.rotation.z += 0.001;
      if (cameraDist < maxCameraDist) {
        cameraDist += 0.05;
        camera.position.z = cameraDist;
      }
    } else {
      icosahedron.rotation.y += 0.003;
      icosahedron.rotation.z += 0.003;
      if (cameraDist > minCameraDist) {
        cameraDist -= 0.05;
        camera.position.z = cameraDist;
      }
  }
}
let loop = function() {
  requestAnimationFrame(loop);
  render();
  renderer.render(scene, camera);
}
loop();
        
        
        
document.querySelector('button').addEventListener('click',() => {
  if (duringChange == false) duringChange = true; else duringChange = false;
})

button {
  padding: 20px;
  position: absolute;
  z-index: 2;
}
canvas {
  position: absolute;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<body>
<button>Change it</button>
</body>

【问题讨论】：

可以使用tween.js来达到想要的效果。
我正在使用 GSAP 3，所以 tween.js 从这一点开始有点过时了。

标签： javascript three.js transition

【解决方案1】：

一个未弃用库的示例 - GSAP 3。

轻松点在这里：https://greensock.com/docs/v3/Eases

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);

let renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  let width = window.innerWidth;
  let height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

camera.position.z = 15;

var pointL1 = new THREE.PointLight(0xffffff, 2, 30);
pointL1.position.x = -4;
pointL1.position.y = 7;
pointL1.position.z = 8;
scene.add(pointL1);


var geometry1 = new THREE.IcosahedronGeometry(5, 1);
var material1 = new THREE.MeshBasicMaterial({
  color: 0x222222,
  wireframe: true
});
var icosahedron = new THREE.Mesh(geometry1, material1);
scene.add(icosahedron);

icosahedron.rotation.y -= 1;


let cameraDistFrom = 15;
let cameraDistTo = 8;
let rotSpeed = 0.1;
let clock = new THREE.Clock();

function render() {
  let t = clock.getDelta();
  icosahedron.rotation.y += rotSpeed * t;
  icosahedron.rotation.z += rotSpeed * t;
}
let loop = function() {
  requestAnimationFrame(loop);
  render();
  renderer.render(scene, camera);
}
loop();



document.querySelector('button').addEventListener('click', () => {
  rotSpeed = 0.3;
  gsap.fromTo(camera.position, {
    z: cameraDistFrom
  }, {
    z: cameraDistTo,
    duration: 1,
    ease: "back.out(3)"
  });
})

body {
  overflow: hidden;
  margin: 0;
}

button {
  padding: 20px;
  position: absolute;
  z-index: 2;
}

canvas {
  position: absolute;
  z-index: 1;
}

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

<body>
  <button>Change it</button>
</body>

【讨论】：