Question

我是Three.js的新手，所以，我正在尝试制作STATIC立方体。所以，我找到了一个旋转立方体的例子。这是：

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 );

}

好的，一切正常。现在我想制作STATIC立方体，我写了

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

纹理加载是异步的，您在完成之前渲染场景。添加一个回调到Image Loader并再次渲染：

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

或者使用requestAnimationFrame连续渲染：

init();
animate();

//...

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

Answer 2

看起来当你摆脱animate()时，你也摆脱了对

的呼唤

renderer.render( scene, camera );

所以你需要把它放回到某个地方的代码中来渲染你的场景

Three.js制作静态立方体

2 个答案: