如果你是初学者，那么学习三维动画可能是一项比拟艰难的工作。然而，应用 three.js 这个弱小的 JavaScript 库，能够让你轻松地制作出精美的三维动画。

首先，咱们须要导入 three.js 库，并创立场景、相机和渲染器。场景是三维空间中所有物体的容器，而相机则决定了咱们所看到的视角。渲染器则负责将场景出现在屏幕上。

接下来，咱们能够应用 OrbitControls 插件来管制相机的地位和视角，并应用 GLTFLoader 插件来加载三维模型文件。这里咱们应用的是 donuts.glb 文件，它蕴含了一个甜甜圈的三维模型。

为了让咱们的场景更加真切，咱们还能够应用 RGBELoader 插件来加载环境贴图，并将它设置为场景的背景。这样，咱们就能够在咱们的三维模型中感触到周围环境的光照成果了。

最初，咱们还能够在动画函数中增加代码来主动旋转模型，并播放它的动画。这样，咱们就能够轻松地制作出精彩的三维动画了。

总的来说，应用 three.js 制作三维动画十分不便，它提供了丰盛的插件和 API，让咱们可能疾速上手。如果你也想学习 three.js，无妨退出猿创营（v:dashuailaoyuan），一起交流学习。

import * as THREE from 'three';import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';// 三D三大件// 场景const scene = new THREE.Scene();// 相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth/innerHeight, 0.1, 10)// 渲染器const renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 设置相机地位camera.position.set(0.3,0.3,0.5);// 增加 控制器，能够拖拽，缩放const controls = new OrbitControls(camera, renderer.domElement);// 增加灯光，DirectionLight方向光const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);// scene.add(directionLight);let donuts;let mixer;// 加载 glb 模型new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {    // 模型增加到场景    scene.add(gltf.scene);    donuts = gltf.scene;    //     mixer = new THREE.AnimationMixer(gltf.scene);    const clips = gltf.animations;    clips.forEach((clip) => {        const action = mixer.clipAction(clip);        action.loop = THREE.LoopOnce;        action.clampWhenFinished = true;        action.play();    })})// 加载环境贴图 360全景图new RGBELoader()    .load('../resources/sky.hdr', (texture) => {        // 设置为场景背景        scene.background = texture;        texture.mapping = THREE.EquirectangularReflectionMapping;        // 设置环境光        scene.environment = texture;        renderer.outputEncoding = THREE.sRGBEncoding;        renderer.render(scene, camera);    });function animate() {    requestAnimationFrame(animate);    // 渲染场景    renderer.render(scene, camera);    // 更新控制器    controls.update();    // 主动旋转    if (donuts) {        donuts.rotation.y += 0.001;    }    // 播放动画    if (mixer) {        mixer.update(0.003);    }}animate();