本文目录
- 前言
- 一、代码示例
- 1.1 FBXLoader
- 1.1.1 代码
- 1.1.2 效果
- 1.1.3 动画
- 1.1.3.1 动画效果
- 1.2 ColladaLoader
- 1.2.1 代码
- 1.2.2 效果
前言
本篇博客基于Threejs之加载3D模型（上）追加常用模型加载示例。
一、代码示例
1.1 FBXLoader
构造函数
FBXLoader( filepath, gltfCallback, progressCallback, errorCallback )
1.1.1 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}</style>
</head><body><script type="module">// 倒入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';import * as THREE from 'three';import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';// 创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0xffffff);// 创建相机const camera = new THREE.PerspectiveCamera( // 透视相机45, // 视角 角度数window.innerWidth / window.innerHeight, // 宽高比 占据屏幕0.1, // 近平面（相机最近能看到物体）1000, // 远平面（相机最远能看到物体）);camera.position.set(0, 2, 60);// 创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿});// 设置渲染器宽高renderer.setSize(window.innerWidth, window.innerHeight);// renderer（渲染器）的dom元素添加到我们的HTML文档中document.body.appendChild(renderer.domElement);// 加入灯光const light = new THREE.PointLight(0xffffff, 1200, 100);light.position.set(20, 20, 10);const pointLightHelper = new THREE.PointLightHelper(light, 3);scene.add(pointLightHelper);scene.add(light);const ambientLight = new THREE.AmbientLight(0x404040, 100); // 柔和的白光scene.add(ambientLight);// 地面const plane = new THREE.Mesh(new THREE.PlaneGeometry(80, 80),new THREE.MeshStandardMaterial({ color: 0x817936 }));plane.rotation.x = -Math.PI / 2;// 添加到场景中scene.add(plane);renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 更好的阴影质量renderer.shadowMap.needsUpdate = true;plane.receiveShadow = true;light.castShadow = true;// 导入fbx模型const fbxLoader = new FBXLoader();fbxLoader.load('../models/ZombieStandUp.fbx', (fbx) => {console.log(fbx);fbx.scale.set(0.1, 0.1, 0.1); // 将模型缩放fbx.traverse((child) => {if (child.isMesh) {console.log(child)child.castShadow = true; // 让模型产生阴影// child.receiveShadow = true; // 让模型接受阴影}});scene.add(fbx);})// 控制器const control = new OrbitControls(camera, renderer.domElement);// 开启阻尼惯性，默认值为0.05control.enableDamping = true;// 渲染循环动画function animate() {// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）requestAnimationFrame(animate);// 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用control.update();renderer.render(scene, camera);};// 执行动画animate();</script>
</body></html>
1.1.2 效果
可以看到我们加载了fbx的模型。
1.1.3 动画
由于我们这个模型是有动画的，我们接下来控制它播放动画，添加如下代码：
let mixer;// 在fbxLoader加载模型回调函数中添加如下代码
// 获取动画数组
const animations = fbx.animations;
// 创建AnimationMixer并播放动画
mixer = new THREE.AnimationMixer(fbx);
if (animations && animations.length > 0) {const clip = animations[0];const action = mixer.clipAction(clip);action.play(); // 播放动画}// 在animate循环渲染动画中加入如下代码
// 更新动画
if (mixer) {mixer.update(0.01);
}
1.1.3.1 动画效果
1.2 ColladaLoader
构造函数
ColladaLoader( filepath, gltfCallback, progressCallback, errorCallback )
1.2.1 代码
在上面代码的基础上，加入导入dae模型的代码：
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';// 导入dae模型const loader = new ColladaLoader();loader.load('../models/Romeo_Zombie.dae', // COLLADA文件路径 function (collada) {console.log(collada)collada.scene.scale.set(0.1,0.1,0.1);// 将场景中的对象添加到Three.js场景中（假设已有一个名为threeScene的场景） scene.add(collada.scene);// 加载的场景 // 如果模型包含动画，可以进一步处理动画 // ... },function (xhr) {// 加载进度回调（可选） console.log((xhr.loaded / xhr.total * 100) + '% loaded');},function (error) {// 加载错误回调（可选） console.error('An error happened', error);});
1.2.2 效果
在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
