three.js在Codepen平台BoxGeometry纹理加载后不显示问题求助

以下是你代码中可能存在的问题及对应修复方法：

• 异步加载时序问题：TextureLoader.load() 为异步执行逻辑，你当前的代码在纹理资源还未完成下载时就已经创建了材质和网格，若你的场景仅执行单次渲染，纹理加载完成后不会自动触发重绘，自然无法显示。
• 缺失持续渲染循环：如果没有配置requestAnimationFrame驱动的持续渲染逻辑，纹理加载完成后没有新的渲染帧更新画面，会一直保持无纹理的初始渲染状态。
• 跨域资源访问限制：未配置跨域参数的纹理加载器请求外部图片资源时，会被浏览器同源策略拦截，导致纹理加载失败。
• 纹理颜色空间配置缺失：three.js默认使用线性颜色空间，普通图片多为sRGB格式，未正确配置颜色空间的情况下可能出现纹理异常。
• 相机/渲染器配置异常：若相机位于立方体内部、裁剪面范围未包含立方体位置，或是未将渲染器生成的canvas元素插入页面DOM，也会导致看不到纹理效果。

修正后的核心代码示例 #

// 配置纹理加载器支持跨域资源加载
const loader = new THREE.TextureLoader();
loader.crossOrigin = 'anonymous';

// 加载纹理，完成后标记材质更新（无持续渲染循环时必须配置）
const cubetexture = loader.load('https://i.sstatic.net/9vixO.png', () => {
  material.needsUpdate = true;
});
// 配置纹理颜色空间匹配图片格式
cubetexture.colorSpace = THREE.SRGBColorSpace;

const geometry = new THREE.BoxGeometry( 10, 10, 10 );
const material = new THREE.MeshBasicMaterial( { map: cubetexture } );
const cube = new THREE.Mesh( geometry, material );
cube.rotateY(Math.PI / 3);
scene.add(cube);

// 确保相机位于立方体可视范围外，示例配置参考
camera.position.z = 30;

// 补充持续渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// 将渲染画布插入页面，确认页面中存在对应DOM容器时启用
// document.getElementById('container').appendChild(renderer.domElement);

内容的提问来源于stack exchange，提问作者Bernardo Olisan