Better Reflections via Normals Interpolation in JavaScript Demo

Demonstrates potential for improvements of reflections through proper normals interpolation - JS only. (Preempts the results of an advanced shader yet to be developed).

by Chrisssie

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GUI } from "https://cdn.skypack.dev/[email protected]/examples/jsm/libs/lil-gui.module.min.js";
import { VertexNormalsHelper } from "https://cdn.skypack.dev/[email protected]/examples/jsm/helpers/VertexNormalsHelper.js";

    let controls, camera, scene, renderer;
    let textureAlpine, textureGrid_uv, textureMap;
    let testMesh, testMaterial, testGeometry;
		const materialColor = new THREE.Color();
		let line;

    const PI_180 = Math.PI / 180.0;
    const points = [];

    let ambientLight, light;
    let parameters;
    let shading;
    let latheSegments = 4;
		let showWf = true;
    let helper = 0;
    var meshArray=[];
    let my_div = 1;					// tessellate each quad into (my_div * my_div) sub-quads
    let showTn = true;
    let defaultMap;
		let showBg = true;

    let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;


    init();
		
		setupGui();

    render();

    function init() {

			// CAMERA
		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
//			camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

		camera.position.set( -50, 40, -20 );
		camera.lookAt( 0, 0, 0);

			// SCENE
		scene = new THREE.Scene();

			// LIGHTS
		ambientLight = new THREE.AmbientLight( 0x222222 );

		light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
		light.position.set( 32, 39, -70 );

		scene.add( ambientLight );
		scene.add( light );

                                             
			// Textures
		const textureLoader = new THREE.TextureLoader();

		textureAlpine = textureLoader.load( 'https://vielzutun.ch/wordpress/public/pano_2k.jpg' );
		textureAlpine.mapping =...