Clase 05 - Practical

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';
import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

let scene, camera;
let controls;
let meshes = [];
init();

function createLight() {

    const light = new THREE.AmbientLight( 0x504040 );
    scene.add( light );

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

    });

    //https://threejs.org/docs/#SpotLight
    meshes.forEach((mesh, index) => {
        let color = 0xffffff;
        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);
      
    });

    // direciontal light connected to the camera
    const directionalLight = new THREE.DirectionalLight(0xcccccc, 0.2);
    directionalLight.position.set(0, 0, 0);
    directionalLight.target.position.set(0, 0, 0);
    
    scene.add(directionalLight.target);
    camera.add(directionalLight);

}

function createGeometry() {
    const geometry = new TeapotGeometry(0.5, 10 );
    const lambert = new THREE.MeshLambertMaterial({ 
        color: '#eeeeee' 
        });

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

    const phong2 = new THREE.MeshPhongMaterial({ 
        color: '#eeeeee',
        specular: '#ffffff' ,
        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);
       ...