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

Ian10252024-09-10 16:12

问题代码如下：

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);