Question

刚开始使用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显示

0 个答案: