Practical 03 - solution

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>
<!-- <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/UV_checker_Map_byValle.jpg/1280px-UV_checker_Map_byValle.jpg"></img></div> -->
<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();

/** 
 * INSTRUCCIONES I:
 * El codigo `createCylinderGeometry` fue creado por chatgpt y tiene un problema
 * con su textura. Si observas las letras en las tapas del cylindro, aparecen correctamente (A3, A4, etc). Pero en los lados del cylindro aparecen reflejadas
 * Cómo podemos arreglar el UV map para que se vean correctamente?
 * **/
function createGeometry() {
    const [vertices, faces, normals, uvs] = createCylinderGeometry(
        {
            radiusTop: 1,
            radiusBottom: 1,
            height: 2,
            radialSegments: 32,
            heightSegments: 1,
            openEnded: false
        }
    )

    let geometry;

    const vertexBuffer = new THREE.BufferAttribute(new Float32Array(vertices), 3);
    const normalsBuffer = new THREE.BufferAttribute(new Float32Array(normals), 3);

    // NEW: create the uv buffer
    const uvsBuffer = new THREE.BufferAttribute(new Float32Array(uvs), 2);

    geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', vertexBuffer);
    geometry.setAttribute('normal', normalsBuffer);
    // NEW
    geometry.setAttribute('uv', uvsBuffer);

    geometry.setIndex(faces);

    const texture = loadTexture();
    const material = new THREE.MeshLambertMaterial({
        color: "#cccccc",
        map: texture,
    });
    mesh = new THREE.Mesh(geometry, material);

    /** 
     * INSTRUCCIONES II:
     * Que pása con el UV map cuando scalo, roto, translado el mesh?
     * **/
    mesh.scale.set(1.0, 1.0, 1.0);
    mesh.position.set(0.0, 0.0, 0.0);
    // mesh.rotation.set(Math.PI / 2.0, 0.0, 0.0);

    scene.add(mesh);

}


function loadTexture() {
    const textureLoader = new...