Clase 06 - 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';

let scene, group, mesh, camera, camera2;
let controls, helpers = [];

let canvas, renderer;

init();

/** Called during the init function to create and add the camera(s) to the scene 
 *  https://threejs.org/manual/?q=Ca#en/cameras
 * **/
function addCamera() {
    const aspect = canvas.clientWidth / canvas.clientHeight;

    // Esta es la cámara que controlamos con el mouse
    // El viewport principal que vemos.
    camera = new THREE.PerspectiveCamera(
        /*fov=*/60, aspect, /*near=*/0.1, /*far=*/100);
    camera.position.set(10, 15, 2);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    // Esto es lo que permite que controlemos la cámara 
    // con el mouse
    controls = new OrbitControls(camera, canvas);
    controls.update();

    // Agregamos una segunda camara en la escena
    // Esta es la que estamos usando para dibujar en la esquina izquierda.
    // TODO: modifica los valores de fov, aspect, near y far para 
    // ver lo que sucede.
    camera2 = new THREE.PerspectiveCamera(
        /*fov=*/20, /*aspect=*/1.0, /*near=*/2, /*far=*/10);
    camera2.position.set(5.5, 1.0, 5.5);
    camera2.up.set(0.0, 1.0, 0.0);
    camera2.lookAt(0, 0, 0);
    scene.add(camera2);

    // TODO: Descomenta el codigo para cambiar la camara2 a una cámara ortografica.
    // {
    //     camera2 = new THREE.OrthographicCamera(
    //         /*left=*/-1,  
    //         /*right=*/1, 
    //         /*top=*/1, 
    //         /*bottom=*/-1, 
    //         /*near=*/2, 
    //         /*far=*/10);
    //     camera2.position.set(5.5, 1.0, 5.5);
    //     camera2.lookAt(0, 0, 0);
    // }

    let cameraHelper = new THREE.CameraHelper(camera2);
    helpers.push(cameraHelper);
    scene.add(cameraHelper);

}

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