BufferGeometry - Cube

by black strings

HTML

<canvas id="c"></canvas>

CSS

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

JavaScript

// Three.js - Custom BufferGeometry - Cube
// from https://threejsfundamentals.org/threejs/threejs-custom-buffergeometry-cube.html
/**
Depending on the order of the vertices, the order of the UVs may need to be flipped or reversed to correctly display
the texture at the correct orientation.
source: https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html
*/

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';

//import OrbitControls from '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 = 3;
  //const controls = new THREE.OrbitControls( camera, renderer.domElement );

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }
  
  /* -- wrong front orientation
  { pos: [-1, -1,  1], norm: [ 0,  0,  1], uv: [0,1], },
    { 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, 1], },
    { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [0, 0], },
    { pos: [ 1,  1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
  */
  
  /* -- correct front orientation
    { pos: [-1, -1,  1], norm: [ 0,  0,  1], uv: [0,0], },
    { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1,0], },
    { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0,1], },

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

  // NOT A GOOD EXAMPLE OF HOW TO MAKE A CUBE!
  //...