【愚公系列】2023年08月 Three.js专题-动画

愚公搬代码

发布于 2025-05-28 17:15:36

1860

前言

动画是一种通过图像快速连续播放的技术，以创造出一种运动和变化的错觉。通常是通过制作一系列静态的图像，然后将它们连续播放以产生运动的效果。动画常用于电影、电视、广告、游戏和教育等领域，可以创造出各种形式的角色和场景，提供视觉上的乐趣和教育价值。常见的动画类型有手绘动画、数字动画、3D动画等。

一、动画

1.tween.js基本使用

tween.js是一个用于在JavaScript中进行补间动画（Tween Animation）的库，可以让我们快速轻松地创建平滑的动画效果。

使用tween.js的基本步骤如下：

在HTML文件中引入tween.js库，可以通过下载tween.js文件或者在CDN中获取。

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

在JavaScript中创建一个Tween对象。创建Tween对象需要指定三个参数：起始值(initial value)、结束值(target value)和动画持续时间(duration)。

var tween = new TWEEN.Tween({x: 0}) // 起始值为 { x: 0 }
  .to({x: 100}, 1000) // 结束值为 { x: 100 }，动画持续时间为 1000 ms

添加动画效果。使用Tween对象提供的方法，可以添加各种动画效果，比如线性移动、淡入淡出等。

tween.easing(TWEEN.Easing.Quadratic.InOut) // 缓动效果为二次缓入缓出

开始动画。使用Tween对象的start()方法启动动画。

tween.start()

渲染动画效果。使用TWEEN库提供的update()方法，可以实时更新动画效果。

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
}
animate();

以上是tween.js库的基本使用步骤，更加详细的用法和参数设置可以查看tween.js的官方文档。

2.Three.js的动画案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/tween.min.js"></script>
</head>
<body>

</body>
</html>

<script>
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0,0,20);

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加一个立方体
  // 定义了一个立方体的对象
  const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);

  // 创建材质

  const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })
  const basic = new THREE.MeshBasicMaterial({ wireframe: true })

  const cube = THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [
    lambert,
    basic
  ])

  // 添加到场景里
  scene.add(cube);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-10,10,90);
  scene.add(spotLight);

  new TWEEN.Tween(cube.rotation).to({
    x: cube.rotation.x + 2,
    y: cube.rotation.y + 2,
    z: cube.rotation.z + 2,
  }, 2000).start().repeat(Infinity);

  const animation = () => {
    TWEEN.update();
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>