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

本文主要是介绍Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题代码如下：

  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请求图片

  const texture = new THREE.TextureLoader().load(require('./image.png'));

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

import droneTexture from '../../assets/images/大疆无人机.png';const texture = new THREE.TextureLoader().load(droneTexture);

 

这篇关于Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---