当前位置：首页 > article >正文

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

article 2025/3/31 20:04:08

需要的效果：

在这里插入图片描述

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

// 创建纹理加载器
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,
 });