Fun with Normals

forked from [email protected]

by Chrisssie

CSS

body{
  overflow: hidden;
  margin: 0;
}

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 { VertexNormalsHelper } from "https://cdn.skypack.dev/[email protected]/examples/jsm/helpers/VertexNormalsHelper.js";


let scene = new THREE.Scene();
// let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
let camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

camera.position.set(-5, 4, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
let helper = 0;

let points = [
  [1, 0],
  [5, 0],
  [5, 1],
  [1, 1]
].map(p => {
  return new THREE.Vector2(p[0], p[1])
});
points.push(points[0].clone());
console.log(points)

let loader = new THREE.CubeTextureLoader();
loader.setPath('https://threejs.org/examples/textures/cube/Bridge2/');

let textureCube = loader.load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']);

let g = new THREE.LatheGeometry(points, 40);
//let m = new THREE.MeshBasicMaterial( {color: 0x0000ff, wireframe:true } );
let m = new THREE.MeshBasicMaterial({envMap: textureCube});
let o = new THREE.Mesh(g, m);
scene.add(o)

renderer.setAnimationLoop(() => {
     if ( helper ) {
     	helper.geometry.dispose();
     	scene.remove( helper );
     }
     
     helper = new VertexNormalsHelper( o, 0.5, 0xff0000, 1 );
     scene.add( helper );
  renderer.render(scene, camera);
});