Improved reflections in LatheGeometry within Three.js

Reflections are improved through alternative normals interpolation on the JS side.

by Chrisssie

CSS

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

JavaScript

// activate this line for non-affine, perspective correct texturing (with vertical lines in texture rendered as STRAIGHT lines, PLUS correct normals for reflections)
import * as THREE from "https://vielzutun.ch/wordpress/public/three.module_fn.js";

// activate this line for standard affine texturing (with vertical lines in texture rendered as zig-zag)
//import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { GUI } from "https://threejs.org/examples/jsm/libs/lil-gui.module.min.js";
import { VertexNormalsHelper } from "https://threejs.org/examples/jsm/helpers/VertexNormalsHelper.js";

var renderer, scene, camera, controls;

let testMesh, testMaterial, testGeometry;

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

let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
let ambientLight, light;
let parameters;
let shading = 'reflective';
let latheSegments = 5;
let helper = 0;


init();
render();

function init() {

    // camera
  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
//  camera = new THREE.OrthographicCamera( window.innerWidth / - 40, window.innerWidth / 40, window.innerHeight / 40,   window.innerHeight / - 40, 1, 1000 );
  camera.position.set(0, 70, 60);


// renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  document.body.appendChild(renderer.domElement);

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

  // controls
  controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener( 'change', render );


  // light
  ambientLight = new THREE.AmbientLight(0x444444);

  light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(32, 39, 70);
  
  scene.add( ambientLight...