Rectangular Pyramid

Questions
1

I wrote a code to create a rectangular pyramid. There are no errors in console, but no output is shown.
Here is my code:

  <script src=https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js></script>
  <script src="DragControls.js"></script>
  <script src="TrackballControls.js"></script>
  <script>
var camera,scene,renderer;
function init() {
  // SCENE
  scene = new THREE.Scene();
  // CAMERA
  camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
  //creating renderer, setting its size and appending it
  renderer=new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
  //Creating Pyramid
  var geometry = new THREE.Geometry();
  //Creating Vectors
  geometry.vertices.push(
      new THREE.Vector3(3,3,3),
      new THREE.Vector3(8,5,2),
      new THREE.Vector3(8,1,2),
      new THREE.Vector3(8,1,4),
      new THREE.Vector3(8,5,4)
  );
  geometry.faces.push(
      new THREE.Face3(0,1,2),
      new THREE.Face3(0,2,3),
      new THREE.Face3(0,3,4),
      new THREE.Face3(0,1,4),
      new THREE.Face3(1,2,3,4)
  );
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  scene.add( new THREE.Mesh( geometry, material ) );
}
  var render = function () {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    };

init();
render();
  </script>
</body>
</html>
2

THREE.Face3(), first three parameters are indices of vertices, the fourth one is normal, which must be THREE.Vector3() and not a number.
You need to build two faces (triangles) for the base of the pyramid.

Take a look at codepen with a pyramid: Sci-fi Scene that I made - #7 by prisoner849 It’s made of THREE.BufferGeometry() though.

1 Like
3 
new THREE.Face3(1,2,3),

    new THREE.Face3(1,3,4)

I changed it like this,but still no output. :confused:

4

You’re using THREE.MeshStandardMaterial() and no lights in your scene.
Try to add a light source. Kind of:

  var light = new THREE.DirectionalLight(0xffffff, 0.5);
  light.position.setScalar(1);
  scene.add(light);
  scene.add(new THREE.AmbientLight(0xffffff, 0.5));

and moreover, change the position of your camera.
https://jsfiddle.net/prisoner849/jq0xa297/

5

Hey! Yeah, I forgot adding lights to the scene!!! Thankyou Prisoner for letting us come out of the prison…!! :smiley:

1 Like