vue中使用threejs的加载纹理没有效果

需要的效果：

但是导入纹理图片后，却不显示

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
// 加载纹理
const texture = textureLoader.load('./assets/v2.jpeg');

let planeGeometry = new THREE.PlaneGeometry(3, 3);
let planeMaterial = new THREE.MeshBasicMaterial({ 
  color: 0xffffff,
  map: texture,
 });

原因：

• 在 Vue 项目中，静态资源需要通过构建工具（如 Vite）处理

• 直接使用相对路径可能会导致路径解析问题

• 通过 import 导入可以让构建工具正确处理资源路径

  // 导入纹理图片
  import textureImage from './assets/v2.jpeg'
  // 创建纹理加载器
  const textureLoader = new THREE.TextureLoader();
  // 加载纹理
  const texture = textureLoader.load(textureImage);
  
  let planeGeometry = new THREE.PlaneGeometry(3, 3);
  let planeMaterial = new THREE.MeshBasicMaterial({ 
    color: 0xffffff,
    map: texture,
   });