Directional Light
Video Lecture
Description
Imagine the directional light as an OrthographicCamera, rather than a PerspectiveCamera. The light rays from a DirectionalLight are parallel in the direction.
Start Code
./src/client/client.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | // If using Relative Import References import * as THREE from '/build/three.module.js' import { OrbitControls } from '/jsm/controls/OrbitControls' import Stats from '/jsm/libs/stats.module' import { GUI } from '/jsm/libs/dat.gui.module' // If using Module Specifiers //import * as THREE from 'three' //import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //import Stats from 'three/examples/jsm/libs/stats.module' //import { GUI } from 'three/examples/jsm/libs/dat.gui.module' const scene: THREE.Scene = new THREE.Scene() const axesHelper = new THREE.AxesHelper(5) scene.add(axesHelper) var light = new THREE.DirectionalLight(); scene.add(light); var helper = new THREE.DirectionalLightHelper(light); scene.add(helper); const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement) // const planeGeometry: THREE.PlaneGeometry = new THREE.PlaneGeometry(20, 10)//, 360, 180) // const plane: THREE.Mesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial()) // plane.rotateX(-Math.PI / 2) // //plane.position.y = -1.75 // scene.add(plane) const torusGeometry: THREE.TorusGeometry[] = [ new THREE.TorusGeometry(), new THREE.TorusGeometry(), new THREE.TorusGeometry(), new THREE.TorusGeometry(), new THREE.TorusGeometry() ] const material: (THREE.MeshBasicMaterial | THREE.MeshLambertMaterial | THREE.MeshPhongMaterial | THREE.MeshPhysicalMaterial | THREE.MeshToonMaterial)[] = [ new THREE.MeshBasicMaterial(), new THREE.MeshLambertMaterial(), new THREE.MeshPhongMaterial(), new THREE.MeshPhysicalMaterial({}), new THREE.MeshToonMaterial(), ] const torus: THREE.Mesh[] = [ new THREE.Mesh(torusGeometry[0], material[0]), new THREE.Mesh(torusGeometry[1], material[1]), new THREE.Mesh(torusGeometry[2], material[2]), new THREE.Mesh(torusGeometry[3], material[3]), new THREE.Mesh(torusGeometry[4], material[4]) ] const texture = new THREE.TextureLoader().load("img/grid.png") material[0].map = texture material[1].map = texture material[2].map = texture material[3].map = texture material[4].map = texture torus[0].position.x = -8 torus[1].position.x = -4 torus[2].position.x = 0 torus[3].position.x = 4 torus[4].position.x = 8 // light.target = torus[0] // light.target.position.set(0, 10, 0) // scene.add(light.target) scene.add(torus[0]) scene.add(torus[1]) scene.add(torus[2]) scene.add(torus[3]) scene.add(torus[4]) camera.position.z = 7 window.addEventListener('resize', onWindowResize, false) function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) render() } const stats = Stats() document.body.appendChild(stats.dom) var data = { color: light.color.getHex(), mapsEnabled: true }; const gui = new GUI() const lightFolder = gui.addFolder('THREE.Light') lightFolder.addColor(data, 'color').onChange(() => { light.color.setHex(Number(data.color.toString().replace('#', '0x'))) }); lightFolder.add(light, 'intensity', 0, 1, 0.01); const directionalLightFolder = gui.addFolder('THREE.DirectionalLight') directionalLightFolder.add(light.position, "x", -100, 100, 0.01) directionalLightFolder.add(light.position, "y", -100, 100, 0.01) directionalLightFolder.add(light.position, "z", -100, 100, 0.01) directionalLightFolder.open() const meshesFolder = gui.addFolder('Meshes') meshesFolder.add(data, 'mapsEnabled').onChange(() => { material.forEach(m => { if (data.mapsEnabled) { m.map = texture } else { m.map = null; } m.needsUpdate = true; }) }); var animate = function () { requestAnimationFrame(animate) //helper.update() torus.forEach(t => { t.rotation.y += .01 }) render() stats.update() }; function render() { renderer.render(scene, camera) } animate(); |