刚开始使用three.js库，显然有些东西我缺少或者我不明白 .

我试图在一个场景中创建我的第一个3D对象但却被我注意到的行为所困惑 . 我创建的网格对象是一个简单的立方体形状，它使用加载的图像作为纹理 .

纹理网格对象在场景中看起来很棒，但前提是我通过requestAnimationFrame（）函数重复渲染场景 . 如果我尝试仅使用render（）方法调用渲染对象，则立方体显示为纯黑色，并且没有可见的纹理图像 . 我还注意到，如果我只使用素材而不是图像，那么它就会完美呈现 . 出于某种原因，每当我尝试使用图像作为材质时，如果我不断地在循环内重新渲染场景，立方体将只能正确显示 .

我假设我应该能够只调用一次renderer.render（），而不是在循环内重复调用它 . 不应该只使用一次调用renderer.render（）来正确显示多维数据集及其图像纹理？就像我说的，如果我为立方体使用了一个简单的颜色，只需调用一次renderer.render（）即可渲染 .

下面的代码显示了一个简单的run方法，它充当循环以便重复调用render函数 . 通过使用该功能，具有纹理的立方体看起来很棒 . 但是，如果我注释掉该方法调用以禁用它然后再调用一次渲染方法，则立方体显示为纯黑色，其上没有可见的图像纹理 .

var渲染器，场景，摄像头;

function init（）{

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth /       window.innerHeight, 1, 4000);
        camera.position.set(0, 0, 3);
        camera.lookAt(scene.position);
        scene.add(camera);

        renderer = new THREE.WebGLRenderer({antialias : true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xEEEEEE, 1.0);

        var light = new THREE.DirectionalLight(0xffffff, 1.5);
        light.position.set(0, 0, 1);
        scene.add(light);

        var mapUrl = "images/monster.jpg";
        var monsterMap = new THREE.TextureLoader().load(mapUrl);

        var geometry = new THREE.CubeGeometry(1, 1, 1);
        var material = new THREE.MeshPhongMaterial({map:monsterMap});

        var cube = new THREE.Mesh(geometry, material);
        cube.rotation.x = Math.PI / 5;
        cube.rotation.y = Math.PI / 5;
        scene.add(cube);

        document.getElementById("WebGL-output")
            .appendChild(renderer.domElement);

        renderer.render(scene, camera);

        //run();
    }

    function run(){
            renderer.render(scene, camera);
            requestAnimationFrame(run);
    }

    window.onload = init;

编辑：谢谢@pailhead，@ WestLangley ....你是正确的，因为问题是由于在调用render方法之前图像没有完全加载 . 我不得不重新编写一些代码，但让它工作 . 非常感谢您的评论中的信息 .

three.js textures