javascript - 三.js制作静态立方体

Question

我是 Three.js 的新手，所以，我只是想制作静态立方体。所以，我找到了一个旋转立方体的例子。这是:

var camera, scene, renderer;
var mesh;

init();
animate();
//renderer.render( scene, camera );
function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();
    var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var axes = new THREE.AxisHelper( 20 );


    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    renderer.render( scene, camera );

}

好的，一切正常。现在我只想制作静态立方体，我已经写了

var camera, scene, renderer;
var mesh;

init();
renderer.render( scene, camera );
function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();
    var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var axes = new THREE.AxisHelper( 20 );


    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

输出只是黑屏，我做错了什么？

Answer 1

纹理加载是异步的，您在完成之前渲染场景。添加回调到图像加载器并再次渲染:

var texture = THREE.ImageUtils.loadTexture('16.jpg', undefined, function () {
    renderer.render(scene, camera);
});

或者使用requestAnimationFrame连续渲染:

init();
animate();

//...

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