Clase 05 - Lights

by pancha00

HTML

<script type="importmap">
{
"imports": {
  "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
  "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
<canvas id="canvas" ></canvas>

CSS

body {
	  margin: 0;
    padding: 0;
}

canvas {
  display: block;
}

canvas {
  width: 100%;
  height:  100vh;
  display: block;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let scene, camera;
let controls;
let pointLights = [];
let spotLights = [];
const N = 3;

init();



function createLight() {

    //https://threejs.org/docs/?q=Point#PointLight
    for (var i=0; i < N; i++ ){
        let color = 0xff0000;
        // color = color >> 8 * i;
        const pl = new THREE.PointLight(color, 1, 0, 2);
        pl.position.set(2*(i-1), 1.0 + 0.3 * i, 0);
        scene.add(pl);
        pointLights.push(pl);

        // const plh = new THREE.PointLightHelper(pl, 0.1);
        // scene.add( plh );
    }

    //https://threejs.org/docs/#SpotLight
    for (var i=0; i < N; i++ ){
        let color = 0x00ff00;
        // color = color >> 8 * i;
        // color, intensity, distance, angle
        const pl = new THREE.SpotLight(color, 1, 0, 40 * Math.PI / 180, 1.0);
        
        pl.position.set(2*(i-1), 0, 1.0 + 0.3 * i);
        pl.target.position.set(2*(i-1), 0, 0.0);
        scene.add(pl);
        scene.add(pl.target);
        spotLights.push(pl);

        // const plh = new THREE.SpotLightHelper(pl, 0.1);
        // scene.add( plh );
    }

}

function createGeometry() {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshLambertMaterial({ color: '#ffffff' });
    
    for (let i=0; i < N; i++) {
        let mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(2*(i - 1), 0, 0);
        scene.add(mesh);
        
    }

}

function createCamera() {
    const aspect = canvas.clientWidth / canvas.clientHeight;
    camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 100);
    camera.position.set(2, 5, 5);
    scene.add(camera);
}



/** Updates the elements of the scene before the call to render */
function update(time) {
   

}

/** Creates the scene and initalizes the elements in it **/
function init() {
    const...