After working extensively with BufferGeometry, I considered myself quite familiar with it. However, I am currently facing an issue while trying to create a simple square plane - there is no visible plane, no errors, and everything seems to be set up correctly. Despite researching similar posts, none of the suggested solutions have worked for me so far.
Upon inspecting the scene, I can see that the mesh exists, has the correct material, and the geometry is properly defined. Yet, all I get is a black viewport. There must be a basic step that I am overlooking but I just can't seem to figure it out. What could I be doing wrong?
Fiddle + code: http://jsfiddle.net/TheJim01/kafybhge/34/
// BufferGeometry Tester
var hostDiv, scene, renderer, camera, root, controls, light;
var WIDTH = 500;//window.innerWidth,
HEIGHT = 500;//window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000;
function createBufferGeometryMesh(){
var geo = new THREE.BufferGeometry();
var vertices =
[
-10., 10., 0., // 0 - top left
10., 10., 0., // 1 - top right
10., -10., 0., // 2 - bottom right
-10., -10., 0. // 3 - bottom left
],
normals =
[
0., 0., 1.,
0., 0., 1.,
0., 0., 1.,
0., 0., 1.
],
indices = [ 0, 1, 2, 0, 2, 3 ];
geo.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
geo.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), 3 ) );
geo.addAttribute( 'index', new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
var mat = new THREE.MeshPhongMaterial( {
color: 0xffffff,
ambient: 0xffffff,
specular: 0xffffff,
shininess: 50,
side: THREE.DoubleSide
} );
var msh = new THREE.Mesh(geo, mat);
return msh;
}
function init() {
hostDiv = document.createElement('div');
document.body.appendChild(hostDiv);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
hostDiv.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;
controls = new THREE.TrackballControls(camera, renderer.domElement);
light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.copy(camera.position);
scene = new THREE.Scene();
scene.add(camera);
scene.add(light);
var square = createBufferGeometryMesh();
scene.add(square);
animate();
}
function render() {
renderer.render(scene, camera);
}
function animate() {
light.position.copy(camera.position);
requestAnimationFrame(animate);
render();
controls.update();
}
init();
Despite this current challenge, here's a previous example of my work using BufferGeometry. This code functions correctly when substituted in place of the createBufferGeometryMesh() above. I have experimented with defining the buffers explicitly, but unfortunately, it hasn't made any difference.
function colorCube(scale){
scale = scale || 1;
var geo = new THREE.BufferGeometry();
// Definition of cube faces ... (code continues)
}