纹理无法加载 - 三个.js

Question

我试图使用three.js为网格加载纹理，但我得到的不是加载的纹理，而是纯黑色对象。我在三个.js文档中都是这样做的(https://threejs.org/docs/?q=texture#api/en/loaders/TextureLoader-示例(，也尝试了不同的解决方案，但都没有成功。这是代码

//Creating The Sun model
const sunGeometry = new THREE.SphereGeometry(16, 30, 30);
const texture = new THREE.TextureLoader().load('assets/images/sun.jpg');
const sunMaterial = new THREE.MeshBasicMaterial({ map: texture }); // not working
//const sunMaterial = new THREE.MeshBasicMaterial({ color: 'skyblue' }); //working
const sun = new THREE.Mesh(sunGeometry, sunMaterial);
//Adding The Sun to the Scene
scene.add(sun);
renderer.render(scene, camera);

设置网格颜色效果非常好。也尝试过使用url，没有区别。我使用的是Angular，代码在构造函数中
编辑：图像路径正确

Answer 1

创建Mesh后立即调用renderer.render(scene, camera);，但此时纹理尚未加载。纹理可能需要几分之一秒的时间来加载，因此在加载纹理时，渲染已经发生。如果你以每秒60帧的速度调用render()，你可能不会注意到这种延迟，但如果你只调用一次，那么你会得到一个黑色的素材。

如果您只想在加载纹理后调用render()一次，则只需在文档页面的代码示例中列出的方法中使用onLoad回调即可。