测试WebGL演示时出现空白屏幕

Question

我从演示中复制了这个。它应该只是在屏幕上绘制一个立方体，但没有任何东西出现。本来我装了一个带有纹理的OBJ，但是没有用，所以我决定通过绘制一个立方体来使它变得更简单。到目前为止，我知道它通过animate函数和渲染函数运行，我看到清晰的屏幕颜色，但无法显示任何对象。

这是test.js：

var CubeTest = function(container) {

var scene, renderer;
var camera

var backgroundColour = 0xeeeeee;
var cube;

function init()
{
    //
    camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 350;

    // scene
    scene = new THREE.Scene();

    // create the Cube
    cube = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );
    scene.add(cube);

    //
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(backgroundColour, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
}

//
function animate()
{
    render();
}

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

//
init();
this.animate = animate;

//
return this;
};

这是test.html的脚本部分：

<script>
//
var container = document.getElementById('container');
var cube1 = new CubeTest(container);
cube1.animate();
</script>

是的，有一个容器div。

Answer 1

您应该阅读Three.js指南。它包含一个简单的示例，说明如何准确地完成您正在寻找的内容，绘制一个多维数据集。

该指南可在以下位置找到：http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

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

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var render = function () {
    requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();

---

直播示例： http://jsbin.com/suqojejiqihi/1/

---

修改

在您的示例中，您正在使用THREE.Camera并传递其不适合使用的参数。看看THREE.Camera的构造函数：

https://github.com/mrdoob/three.js/blob/master/src/cameras/Camera.js

THREE.Camera = function () {

    THREE.Object3D.call( this );

    this.matrixWorldInverse = new THREE.Matrix4();
    this.projectionMatrix = new THREE.Matrix4();

};

现在让我们将它与THREE.PerspectiveCamera的构造函数进行比较：

https://github.com/mrdoob/three.js/blob/master/src/cameras/PerspectiveCamera.js

THREE.PerspectiveCamera = function ( fov, aspect, near, far ) {

    THREE.Camera.call( this );

    this.fov = fov !== undefined ? fov : 50;
    this.aspect = aspect !== undefined ? aspect : 1;
    this.near = near !== undefined ? near : 0.1;
    this.far = far !== undefined ? far : 2000;

    this.updateProjectionMatrix();

};