在使用Three.js导入3D模型时,通常会涉及到几个步骤,包括准备3D模型文件、选择合适的加载器以及在场景中添加模型。下面是一个基本的流程:
1. 准备3D模型文件
首先确保你的3D模型文件是Three.js支持的格式。常见的格式有 .glb(GLTF二进制格式),.gltf(GLTF JSON格式),.obj (加上.mtl材质文件),.fbx 等等。
2. 选择加载器
Three.js 提供了多个加载器来处理不同类型的3D模型文件。例如:
- GLTFLoader 用于加载 .glb 和 .gltf 文件。
- OBJLoader 用于加载 .obj 文件。
- FBXLoader 用于加载 .fbx 文件。
3. 加载模型
下面以 GLTFLoader 为例,展示如何加载一个 .glb 模型文件:
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function(gltf) {
// gltf.scene 是默认的场景节点
scene.add(gltf.scene);
}, undefined, function(error) {
console.error(error);
});
// 动画循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
这段代码首先创建了一个场景、相机和渲染器,并将渲染器添加到DOM中。然后它使用 GLTFLoader 加载一个 .glb 文件,并在加载完成后将模型添加到场景中。最后是一个简单的动画循环,不断更新场景并重新渲染。
请根据实际情况调整路径、模型格式以及加载器类型。如果你使用的是其他格式的3D模型,需要替换 GLTFLoader 为对应的加载器,并相应地调整模型加载部分的代码。
FBXLoader 来加载 FBX 文件
1.引入 three.js
在 Three.js 中导入 FBX 文件通常涉及以下几个步骤:设置场景、相机和渲染器,然后使用 FBXLoader 来加载 FBX 文件。以下是一个基本示例,展示如何在 Three.js 中加载和显示一个 FBX 文件:
<script src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.138.0/examples/jsm/loaders/FBXLoader.js"></script>
3. 设置场景、相机、渲染器
创建一个基本的 Three.js 场景,并设置相机和渲染器:
/ 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); // 设置相机位置
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 添加渲染器到页面
4. 使用 FBXLoader 加载 FBX 文件
加载 FBX 文件,并将其添加到场景中:
const loader = new FBXLoader();
loader.load('path/to/your/model.fbx', function (object) {
// 将模型添加到场景中
scene.add(object);
}, undefined, function (error) {
console.error(error); // 错误处理
});
5. 动画循环
添加一个动画循环来渲染场景:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
注意事项
确保 FBX 文件的路径正确,并且 FBX 文件已经放置在正确的目录下。如果 FBX 文件包含纹理或其他资源,请确保这些资源也能够正确加载。
以上就是一个基本的示例,展示了如何在 Three.js 中加载和显示一个 FBX 文件。你可以在此基础上添加光照、动画控制等功能来丰富你的应用。
这是一个我使用 Blender 建立的 3D 模型例子。https://javascript.net.cn/3d/my.html