在 Vue 3 项目中使用 Three.js 加载模型并添加纹理，可以按照以下步骤操作：

明确指令

使用 Vue 3 和 Three.js。
加载 3D 模型（如 .glb 或 .gltf 文件）。
给模型添加纹理。

解决方案

1. 初始化 Vue 3 项目

确保你已经创建了一个 Vue 3 项目。如果尚未创建，可以通过以下命令初始化：

npm init vue@latest
cd your-project-name
npm install

安装 Three.js：

npm install three

2. 创建 Three.js 场景

在 Vue 组件中设置一个基础的 Three.js 场景。

示例代码：

<template>
  <div ref="canvasContainer" class="canvas-container"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  name: "ThreeJsModel",
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 创建场景
      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({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.canvasContainer.appendChild(renderer.domElement);

      // 添加光源
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(10, 10, 10).normalize();
      scene.add(light);

      // 加载模型
      const loader = new GLTFLoader();
      loader.load('path/to/your-model.glb', (gltf) => {
        const model = gltf.scene;
        scene.add(model);

        // 加载纹理并应用到模型
        const textureLoader = new THREE.TextureLoader();
        textureLoader.load('path/to/your-texture.jpg', (texture) => {
          model.traverse((child) => {
            if (child instanceof THREE.Mesh) {
              const material = new THREE.MeshStandardMaterial({ map: texture });
              child.material = material;
            }
          });
        });
      });

      // 动画循环
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    }
  }
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 100vh;
}
</style>

3. 关键点解析

加载模型：
使用 GLTFLoader 加载 .glb 或 .gltf 格式的模型文件。确保模型路径正确。
加载纹理：
使用 TextureLoader 加载纹理图片，并将其应用于模型的材质。通过遍历模型的所有子对象，找到 THREE.Mesh 类型的对象，为其设置材质。
材质类型：
使用 THREE.MeshStandardMaterial，因为它支持 PBR（基于物理的渲染），能更好地表现纹理效果。
动画与交互：
可以通过 requestAnimationFrame 实现动画效果，也可以结合 OrbitControls 实现模型旋转和缩放。

4. 注意事项

确保模型和纹理文件路径正确。
如果模型本身已有材质，需要判断是否覆盖或混合。
如果需要更复杂的交互，可以引入 three-orbit-controls 或其他库。

如何给模型不同的区块加载不同的纹理图片

在 Three.js 中，给模型的不同区域加载不同的纹理图片，可以通过修改模型的材质来实现。通常情况下，模型本身需要支持多材质（Multi-Material），或者你可以手动为模型的不同部分分配不同的材质。

以下是具体步骤：

明确指令

使用 Vue 3 和 Three.js。
给模型的不同区域加载不同的纹理图片。

解决方案

1. 确保模型支持多材质

如果模型是通过建模软件（如 Blender、Maya）导出的，确保模型的每个区域已经分配了独立的材质。例如，在 Blender 中可以为模型的不同面指定不同的材质，并在导出时保留这些材质信息。

2. 加载模型并分配不同纹理

使用 GLTFLoader 加载模型后，遍历模型的子对象，根据条件为每个部分分配不同的纹理。

示例代码：

<template>
  <div ref="canvasContainer" class="canvas-container"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  name: "ThreeJsModel",
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 创建场景
      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({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.canvasContainer.appendChild(renderer.domElement);

      // 添加光源
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(10, 10, 10).normalize();
      scene.add(light);

      // 加载模型
      const loader = new GLTFLoader();
      loader.load('path/to/your-model.glb', (gltf) => {
        const model = gltf.scene;
        scene.add(model);

        // 定义不同区域的纹理
        const textureLoader = new THREE.TextureLoader();
        const textures = {
          body: textureLoader.load('path/to/body-texture.jpg'),
          head: textureLoader.load('path/to/head-texture.jpg'),
          arms: textureLoader.load('path/to/arms-texture.jpg')
        };

        // 遍历模型的所有子对象
        model.traverse((child) => {
          if (child instanceof THREE.Mesh) {
            let material;

            // 根据对象名称或材质索引分配纹理
            if (child.name.includes('Body')) {
              material = new THREE.MeshStandardMaterial({ map: textures.body });
            } else if (child.name.includes('Head')) {
              material = new THREE.MeshStandardMaterial({ map: textures.head });
            } else if (child.name.includes('Arms')) {
              material = new THREE.MeshStandardMaterial({ map: textures.arms });
            } else {
              material = child.material; // 默认材质
            }

            child.material = material;
          }
        });
      });

      // 动画循环
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    }
  }
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 100vh;
}
</style>

关键点解析

模型命名规则：
- 在建模软件中，为模型的不同部分设置唯一的名称（如 Body、Head、Arms）。
- 在加载模型后，可以通过 child.name 判断当前对象属于哪个区域。
多材质支持：
- 如果模型本身支持多材质（例如 .glb 文件中包含多个材质定义），可以直接使用 gltf.materials 获取材质列表，并为其分配纹理。
- 如果模型不支持多材质，可以在加载后动态创建新的材质并替换默认材质。
纹理加载：
- 使用 THREE.TextureLoader 加载纹理图片。
- 将纹理应用到 THREE.MeshStandardMaterial 的 map 属性上。
遍历模型子对象：
- 使用 model.traverse 方法遍历模型的所有子对象。
- 对于每个 THREE.Mesh 类型的对象，根据条件为其分配不同的材质。