Three.js - Lights - Ambient

by Gwyn Milcote

HTML

<canvas id="model_viewer"></canvas>
<br><span id='info'></span>

CSS

html, body {
  margin: 0;
  height: 100%;
}
#model_viewer {
  width: 100%;
  height: 90%;
  display: block;
}

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';

let canvas, scene, camera, controls, renderer, animal, animalGeo, animalMat, gui;

canvas = document.querySelector('#model_viewer');
    renderer = new THREE.WebGLRenderer({alpha:true, canvas});
    renderer.shadowMap.enabled = true;

    camera = new THREE.PerspectiveCamera();
    camera.position.set(0, 10, 20);

    controls = new OrbitControls(camera, canvas);
    controls.target.set(0, 5, 0);
    controls.update();

    scene = new THREE.Scene();
    scene.background = new THREE.Color('#ded5b6');

// The current animal species being dealt with.
// The class is used for material/pose options.
let animalType, animalClass;

// Simple materials. Later use UV-mapped texture images.
// Or can they be bundled with model, from Blender?

let redMat = new THREE.MeshLambertMaterial({color:0xff0000});
let yellowMat = new THREE.MeshLambertMaterial({color:0xFFCC33}); 
let greyMat = new THREE.MeshLambertMaterial({color:0x333333});
let tealMat = new THREE.MeshLambertMaterial({color:0x00ffff});
let blueMat = new THREE.MeshLambertMaterial({color:0x0000ff});
let purpleMat = new THREE.MeshLambertMaterial({color:0xff00ff});
let normalMat = new THREE.MeshNormalMaterial();

// MATERIALS

// Will be texture images, that are UV-mapped to models.
// File names are: horseBay.png, catBlack.png...
// If model is "horse", choose "White" to load horseWhite.png

// For now, using simple hex codes.
// Later won't need objects. Just names.
// ["Bay", "White", "Black" ...]

// List of coat colours (textures) for each animal.
// They can be chosen from dropdown list in GUI.
let materials = {
    horse: {
        Bay: "#B7523C",
        White: "#F6EFEE",
       ...