在使用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



真诚赞赏，手留余香

微信支付