three.js - THREE.PlaneGeometry 没有被渲染

Question

我试过玩 aerotwist 的教程。一切都很顺利，直到我弄乱了 THREE.PlaneGeometry，如下代码：

var $container = $('#container');
var WIDTH = $container.width(), HEIGHT = $container.height();
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var scene = new THREE.Scene();
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);

// create the mesh's material
var meshMaterial = new THREE.MeshBasicMaterial({color:0xCC0000});
var mesh = new THREE.Mesh(new THREE.CubeGeometry(100,100,1,1),meshMaterial);

// add the mesh to the scene
scene.add(mesh);
scene.add(camera);
renderer.render(scene, camera);

当我从

var mesh = new THREE.Mesh(new THREE.CubeGeometry(100,100,1,1),meshMaterial);

到

var mesh = new THREE.Mesh(new THREE.PlaneGeometry(100,100,1,1),meshMaterial);

或者

var mesh = new THREE.Mesh(new THREE.PlaneGeometry(100,100),meshMaterial);

然后什么都没有渲染。怎么了？

Answer 1

它可能不是双面的，或者您在当前角度看不到它，请检查平面旋转的这个 js 小提琴并玩弄那个以进行练习。

编辑：

看起来飞机朝下，所以相机看不到它，我更改了mesh.rotation.x它以证明它确实可以渲染。

请参阅 -更新示例

Answer 2

尼尔的回答是我首先要尝试的；也可能是您的比例（至少在一个轴上）设置为 0 或 NaN。