关于three.js:使用-threejs-加载基本三维模型-大帅老猿threejs特训

如果你是初学者，那么学习三维动画可能是一项比拟艰难的工作。然而，应用 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();