Three.js立方体各面贴图失败求助：无报错但纹理未显示

你的代码存在几个核心问题，导致纹理无法正常显示，以下是修复方案：

问题1：事件绑定错误 #

你写的window.addEventListener('load', init());会立即执行init函数，而不是在页面加载完成后触发。正确写法是传递函数引用：

window.addEventListener('load', init); // 去掉括号

问题2：异步纹理加载与单次渲染 #

TextureLoader.load是异步操作，你仅在init末尾执行了一次renderer.render(scene, camera)，此时纹理大概率还没加载完成，导致渲染出的立方体无纹理。同时Three.js需要通过动画循环持续渲染画面，才能实时更新纹理、物体状态等。

修复方式：添加动画循环+加载管理器 #

使用THREE.LoadingManager监听所有纹理加载状态，确保加载完成后再启动渲染循环；同时用requestAnimationFrame实现持续渲染：

修改后的JS代码：

import * as THREE from './build/three.module.js';
const section = document.getElementById("myCanvas");

window.addEventListener('load', init);

function init(){
    const renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    section.appendChild(renderer.domElement);
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth/window.innerHeight,
        0.1,
        5000
    );
    camera.position.set(0, 2, 5);

    const geo = new THREE.BoxGeometry(3,1,0.5);
    const loadingManager = new THREE.LoadingManager();
    const loader = new THREE.TextureLoader(loadingManager);

    const urls = [
        "./pics/Adobe_1.png", "./pics/Adobe_2.png",
        "./pics/Adobe_3.png", "./pics/Adobe_4.png",
        "./pics/Adobe_5.png", "./pics/Adobe_6.png"
    ]
    const materials = urls.map(url => {
        return new THREE.MeshLambertMaterial({
            map: loader.load(url)
        })
    });
    const cube = new THREE.Mesh(geo, materials);

    const light = new THREE.DirectionalLight(0x345fff);
    light.position.set(2,4,4);
    scene.add(light);

    cube.position.set(1,1,1);
    scene.add(cube);

    // 所有纹理加载完成后启动动画循环
    loadingManager.onLoad = function() {
        function animate() {
            requestAnimationFrame(animate);
            // 添加旋转动画方便查看所有面
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    };
}

额外检查项 #

• 确认图片路径正确：./pics/目录下的6张图片是否存在，文件名、后缀是否与代码一致
• 避免跨域问题：本地直接打开HTML文件可能被浏览器限制资源加载，建议用本地服务器（比如VSCode的Live Server插件）运行项目

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