本文目录
- 前言
- 一、代码示例
- 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.05
control.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 效果
在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
