Practical 02

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 vertexBuffer = new THREE.BufferAttribute(new Float32Array(vertices), 3);
    const normalsBuffer = new THREE.BufferAttribute(new Float32Array(normals), 3);
    let geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', vertexBuffer);
    geometry.setAttribute('normal', normalsBuffer);
    geometry.setIndex(faces);
    
    const material = new THREE.MeshLambertMaterial({ color: '#FF00FF' });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const helper = new VertexNormalsHelper( mesh, 0.1, 0xffff00 );
    scene.add( helper );
}

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

function createLight() {
    const light = new...