CODEWITHSUNDEEP
three.js
Jackey Cheung
Jackey Cheung

Reputation: 175

THREE.PlaneGeometry doesn't get rendered

I've tried playing around with the tutorial from aerotwist. Everything went well, until I messed with THREE.PlaneGeometry, as the code below:

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

When I change the line from

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

to

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

or

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

Then nothing is rendered. What is wrong?

Upvotes: 3

Views: 4358

Answers (2)

Engineer
Engineer

Reputation: 8847

Neil's answer is what I'd try first; it may also be that your scale (in at least one axis) is set to 0 or NaN.

Upvotes: 0

Neil
Neil

Reputation: 8111

It's possible that its not double sided or that you can't see it on its current angle, check this js fiddle of plane rotating and play around with that one for practice.

EDIT:

Looks like the plane faces down so the camera can't see it, I changed the mesh.rotation.x to prove it does render.

See - updated example

Upvotes: 3

Related Questions