Question

我正在尝试进入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>

`

Answer 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>

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

1 个答案: