Cube with Text

by gilomer88

CSS

body,
html {
  margin: 0%;
  padding: 0%;
}

body {
  background-color: wheat;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';

let container;
let camera, scene, renderer, rayCaster, controls;
let mesh, mixer;
let cubesArray = [];
let objectsForRayCasterArray = [];
let mouseX, mouseY;
var mousePositionVector = new THREE.Vector2();

let cubeMesh;
var primaryColorName = "blue";
var secondaryColorName =  "yellow";
/* var secondaryColorName =  "pink";  */
/* var secondaryColorName =  "red"; */



// Option 1: Using IMAGES for each side of the Cube
var textureLoader = new THREE.TextureLoader();

const image1Texture = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-1.jpg' );
const image2Texture  = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-2.jpg' );
const image3Texture  = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-3.jpg' );
const image4Texture  = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-4.jpg' );
const image5Texture  = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-5.jpg' );
const image6Texture  = textureLoader.load( 'https://threejsfundamentals.org/threejs/resources/images/flower-6.jpg' );



//  Option 2: Using TextGeometry for each side of the Cube:
const textContentsArray = ["Every", "Good", "Boy", "Does", "Fine", "Really"];
var textGeometriesArray = [];
var textMeshesArray = [];
const fontLoader = new THREE.FontLoader();


const textMaterialsArray = [
			new THREE.MeshPhongMaterial( { color: "blue", flatShading: true } ), // front
			new THREE.MeshPhongMaterial( { color: "yellow" } ) // side
	];




function loadFont() {
  console.log("In 'loadFont()'!");
        /* https://github.com/mrdoob/three.js/blob/master/examples/fonts/helvetiker_regular.typeface.json */
        
  // THIS...