Question

我想渲染旋转立方体的静止图像。以下显示了立方体，但未旋转。如果我连续两次调用最后一行renderer.render(scene, camera);，它只会通过一次调用呈现旋转的多维数据集。谁可以给我解释一下这个？看起来奇怪我必须这样做才能渲染静态3D场景。

/* globals THREE, window, document */
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
        color: 'red'
      });


var cube = new THREE.Mesh( geometry, material );
cube.rotation.x = 40 * Math.PI/180;
cube.rotation.y = 40 * Math.PI/180;
cube.position.z = 1;
var box = new THREE.BoxHelper(cube);

scene.add( cube );
scene.add( box );

renderer.render(scene, camera);

Answer 1

在方框解决问题后，将多维数据集添加到场景中。

scene.add( box );
scene.add( cube );

jsfiddle

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshBasicMaterial({
    color: 'red'
 });

var cube = new THREE.Mesh( geometry, material );
cube.rotation.x = 40 * Math.PI/180;
cube.rotation.y = 40 * Math.PI/180;
cube.position.z = 1;

var box = new THREE.BoxHelper(cube);

scene.add( box );
scene.add( cube );

renderer.render(scene, camera);

为什么这个立方体的初始旋转不会对第一次渲染调用生效？

1 个答案: