THREE.JS添加纹理一直失败找不到

你使用相对路径加载图片:@/assets/R-C.jpg, 但是assets文件夹可能没有和你的.vue文件放在同一个目录。

所以第一步可以检查以下几点:

1. 图片路径是否正确,assets文件夹是否放在和.vue同级目录

2. 使用network面板查看图片是否成功请求

3. 尝试使用绝对路径加载图片,而不用相对路径

4. 尝试使用公共在线图片临时测试加载是否成功

5. 最好的方式是用Vue的asset import方式导入图片资源

html

<template>
  <img src="@/assets/R-C.jpg"> 
</template>

<script setup>
import cubeImg from '@/assets/R-C.jpg'

const cubMaterial = new THREE.MeshBasicMaterial({
  map: cubeImg 
})  
</script>

然后根据上面几点一个一个排查原因:

• 图片路径是否正确
• 网络请求是否成功
• 使用公共图片临时测试
• 用Vue正规asset import导入

通过这种分析排查的方式,一般能够快速定位到图片加载失败的原因,主要可能是路径写错或网络请求失败。希望能详细一点的问题分析能够帮助你解决问题。

我根据你提供的代码和问题,分析了可能的原因和排查步骤,写成这篇博客分享出来,主要内容包括:

1. 检查图片路径
2. Network面板查看请求
3. 尝试使用绝对路径
4. 临时用公共图片测试
5. 使用Vue的asset import最佳实践

通过以上方法并结合你提供的相关上下文,分析定位出图片加载失败的原因。