Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色

问题代码如下:

javascript 复制代码
  const texture = new THREE.TextureLoader().load('./image.png');
  droneGeometry = new THREE.PlaneGeometry(1, 1);
  droneMaterial = new THREE.MeshBasicMaterial({ map: texture});
  droneMesh = new THREE.Mesh(droneGeometry, droneMaterial);
  droneMesh.position.set(0, 1, 0);
  scene.add(droneMesh);
  renderer.render(scene, camera);

问题出在.TextureLoader()是一个异步函数,加载图片未完成便渲染图片了,参考网上解决方案有以下几种

1、使用回调

2、使用require请求图片

javascript 复制代码
  const texture = new THREE.TextureLoader().load(require('./image.png'));

作者使用的是vite + vue3的技术栈,未能通过上述方法解决,如下方法可以成功加载图片

javascript 复制代码
import droneTexture from '../../assets/images/大疆无人机.png';
 
const texture = new THREE.TextureLoader().load(droneTexture);
相关推荐
软件技术NINI3 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie4 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀4 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻4 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树5 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城5 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04125 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj505 小时前
前端基础之《React(1)—webpack简介》
前端·react