CODEWITHSUNDEEP
javascriptthree.js
Thomas Phan
Thomas Phan

Reputation: 247

Three JS scene not rendering triangle

I'm very new to Three.JS, and I'm simply just trying to create a single triangle in the scene, but for some reason it is not being rendered. I'm not sure what I'm doing wrong. Here is the JSFiddle link:

http://jsfiddle.net/mi496949/qvvzckh2/

/*global THREE, requestAnimationFrame*/

var scene, camera, renderer, scene, controls, canvasWidth, canvasHeight;

canvasWidth = window.innerWidth;
canvasHeight = window.innerHeight;

function onWindowResize(event) {
  'use strict';
  camera.aspect = canvasWidth / canvasHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(canvasWidth, canvasHeight);
}

function randomColor() {
  'use strict';
  var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' +
    Math.floor(Math.random() * 255) + ',' +
    Math.floor(Math.random() * 255) + ')';

  return (new THREE.Color(color));
}

function init() {
  'use strict';
  var container = document.createElement('div');
  document.body.appendChild(container);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
  camera.position.set(0, 0, 0);
  camera.lookAt(scene.position);

  scene.add(camera);

  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xccccff);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(canvasWidth, canvasHeight);
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);
}

function animate() {
  'use strict';
  renderer.render(scene, camera);
}

function createTriangle() {
  'use strict';
  var centerPoint, point1, point2, triangleGeometry, triangle, angle, length1, length2;

  angle = (2 * Math.PI) / 100;

  length1 = 450;
  length2 = Math.tan(angle / 2) * length1;

  triangleGeometry = new THREE.Geometry();

  triangleGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  triangleGeometry.vertices.push(new THREE.Vector3(-length2, length1, 0));
  triangleGeometry.vertices.push(new THREE.Vector3(length2, length1, 0));

  triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));

  triangle = new THREE.Mesh(triangleGeometry, new THREE.MeshNormalMaterial());

  scene.add(triangle);
}

init();
createTriangle();
animate();

I apologize beforehand if it turns out to be something stupid and simple that I missed. Thank you in advance for any help.

Upvotes: 0

Views: 218

Answers (1)

guardabrazo
guardabrazo

Reputation: 1229

There are several things in your code that need to be fixed so you can see the triangle:

First you need to set the camera away from the triangle. Since your triangle is drawn in the XY plane, lets move it away on the Z axis:

camera.position.set(0, 0, 1000);

Then you need to increase the far property of the camera so your triangle is inside the camera frustum. Since the camera is 1000 units away from the triangle, let's give it some room and place the far plane 2000 units away.

camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 2000);

The last thing that you need to do is to change the order in which you have added the vertices to the face. Right now the order (0, 1, 2) creates a face in clockwise order, with its normal vector pointing down (-Z) because Three.js follows the right-hand rule. If you change the order to (1, 0, 2), the vertices' order will be counterclokwise, the face's normal will point towards the camera (+Z), and you will be able to see it.

triangleGeometry.faces.push(new THREE.Face3(1, 0, 2));

An alternative to changing the vertices' order would be to change the side property of the material to THREE.DoubleSide so you can see both sides of the face and not just the one with the normal pointing at the camera:

triangle = new THREE.Mesh(triangleGeometry, new THREE.MeshNormalMaterial({side: THREE.DoubleSide}));

You can see a working example with your code in this JSFiddle.

Upvotes: 1

Related Questions