Practical 02 - solucion

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 { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';

let scene, camera, mesh;
let controls;

init();


function createGeometry() {
    /**
     * (1) crea los vertices, faces, y normales para formar un cuadrado
     * v2-------v3
     * |        |
     * |        |
     * v0 -----v1
     * 
     * (2) podrías generalizarlo agregando multiples columnas?
     * 
     * v4------v5-------v6-------v7 
     * |        |        |        |
     * |        |        |        |
     * v0 -----v1 ------v2 ------v3 
     * 
     * 
     * (3) puedes generalizarlo una vez más agregando multiple filas?
     * v8------v9-------v10-------v11 
     * |        |        |        |
     * |        |        |        |
     * v4------v5-------v6-------v7 
     * |        |        |        |
     * |        |        |        |
     * v0 -----v1 ------v2 ------v3 
     */
    let vertices = [];
    let faces = []
    let normals = [] 
    
    const r = 2.0;
    const c = 3.0;
  
    // Cómo fijamos la escala para que siempre sea de 1x2?
    // dividimos por c y r para que el objeto tenga
    // Cómo fijamos el 0,0 para que corresponda el centro del objeto?
    // una vez escalado a 1x1 podemos simplemente restar (-0.5, -0.5)
    // a la posición en x, y
    for (let j=0; j<=r; j++){
        for (let i=0; i<=c; i++) {
            vertices.push(
                i * 1/c -0.5 , j * 1/r - 0.5, 0,
            );
            normals.push(
                0.0, 0.0, 1.0,
            );
        }
    }
    let stride = c + 1;
    for (let j=0; j<r; j++){
        for (let i=0; i<c; i++) {
            const v0 = stride * j + i;
            const v1 = v0 + 1;
            const v4 = v0 + stride;
            const v5 = v4 + 1;
            faces.push(v0, v1, v4);
            faces.push(v4, v1, v5);
      ...