Clase 05 - Materiales

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 meshes = [];
init();



function createLight() {

    //https://threejs.org/docs/?q=Point#PointLight
    meshes.forEach((mesh, index) => {
        let color = 0xff0000;
       
        const pl = new THREE.PointLight(color, 1, 0, 2);
        pl.position.set(0, 1.5, 0);
        mesh.add(pl);
    
        // const plh = new THREE.PointLightHelper(pl, 0.1);
        // scene.add( plh );
    });

    //https://threejs.org/docs/#SpotLight
    meshes.forEach((mesh, index) => {
        let color = 0x00ff00;
        const pl = new THREE.SpotLight(color, 1, 0, 40 * Math.PI / 180, 1.0);
        pl.position.set(0, 0, 1.5);
        pl.target.position.set(0, 0, 0);
        mesh.add(pl);
        mesh.add(pl.target);
      
    });
    const directionalLight = new THREE.DirectionalLight(0xcccccc, 0.2);
    directionalLight.position.set(0, 0, 0);
    directionalLight.target.position.set(0, 0, 0);

    // Q5. Cual debe ser el padre de directionalLight? y de directionalLight.target
    scene.add(directionalLight.target);
    camera.add(directionalLight);

}

function createGeometry() {
    const geometry = new THREE.SphereGeometry();
    const lambert = new THREE.MeshLambertMaterial({ 
        color: '#cccccc' 
        });

    const phong = new THREE.MeshPhongMaterial({ 
        color: '#cccccc',
        specular: '#cccccc' ,
        shininess: 30,
        });

    const phong2 = new THREE.MeshPhongMaterial({ 
        color: '#cccccc',
        specular: '#cccccc' ,
        shininess: 200,
        });    
    
    const materials = [lambert, phong, phong2]
    
    for (let i=0; i < 3; i++) {
        let mesh = new THREE.Mesh(geometry, materials[i]);
        mesh.position.set(3*i - 3, 0, 0);
        scene.add(mesh);
        meshes.push(mesh);
        
    }

}

function...