three.js加载带有颜色的.fbx模型

three.js是一个JavaScript库，用于创建WebGL交互式3D图形。如果你想要加载带有颜色的.fbx（FBX）模型，首先需要确保你的环境中安装了Three.js和fbx-loader这个插件，它允许我们处理FBX文件格式。

以下是基本步骤：

1. 引入必要的库：

import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

2. 创建场景、相机和渲染器：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 加载FBX模型：

const loader = new FBXLoader();
loader.load('path_to_your_fbx_model_with_colors.fbx', function (geometry, materials) {
  // 检查是否有材质信息，如果有的话，创建Mesh并给每个面分配对应的颜色
  if (materials && materials.length > 0) {
    const mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
    scene.add(mesh);
    
    // 渲染模型
    render();
  }
}, undefined, function (error) {
  console.error('Error loading FBX model:', error);
});

4. 定义渲染函数 `render()` 并添加动画循环：

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}