Three.js - Custom BufferGeometry - Cube

by punund

HTML

<canvas id="c"></canvas>
<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>

CSS

body {
   margin: 0;
}

#c {
   width: 100vw;
   height: 100vh;
   display: block;
}

JavaScript

// Three.js - Custom BufferGeometry - Cube
// from https://r105.threejsfundamentals.org/threejs/threejs-custom-buffergeometry-cube.html

'use strict';

/* global THREE */

function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({
      canvas
   });

   const fov = 75;
   const aspect = 2; // the canvas default
   const near = 0.1;
   const far = 100;
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 5;

   const scene = new THREE.Scene();

   {
      const color = 0xFF00ff;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.position.set(-1, 2, 4);
      scene.add(light);
   }

   // NOT A GOOD EXAMPLE OF HOW TO MAKE A CUBE!
   // Only trying to make it clear most vertices are unique
   const vertices = [
      // front
      {
         pos: [-1, -1, 1],
         norm: [0, 0, 1],
         uv: [0, 1],
      },
      {
         pos: [1, -1, 1],
         norm: [0, 0, 1],
         uv: [1, 1],
      },
      {
         pos: [-1, 1, 1],
         norm: [0, 0, 1],
         uv: [0, 0],
      },

      {
         pos: [-1, 1, 1],
         norm: [0, 0, 1],
         uv: [0, 0],
      },
      {
         pos: [1, -1, 1],
         norm: [0, 0, 1],
         uv: [1, 1],
      },
      {
         pos: [1, 1, 1],
         norm: [0, 0, 1],
         uv: [1, 0],
      },
      // right
      {
         pos: [1, -1, 1],
         norm: [1, 0, 0],
         uv: [0, 1],
      },
      {
         pos: [1, -1, -1],
         norm: [1, 0, 0],
         uv: [1, 1],
      },
      {
         pos: [1, 1, 1],
         norm: [1, 0, 0],
         uv: [0, 0],
      },

      {
         pos: [1, 1, 1],
         norm: [1, 0, 0],
         uv: [0, 0],
      },
      {
         pos: [1, -1, -1],
         norm: [1, 0, 0],
         uv: [1, 1],
      },
      {
         pos: [1, 1, -1],
         norm: [1, 0, 0],
         uv: [1, 0],
      },
      // back
    ...