tunnel.js - TA159 - Notas, resueltos y trabajos practicos de la materia Sistemas Gráficos

Line numbers
   1 import * as THREE from 'three';
   2 import * as dat from 'dat.gui';
   3 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
   4 
   5 let scene, camera, renderer, container;
   6 
   7 import maderaUrl from '../assets/madera.jpg'
   8 
   9 const textures = {
  10     madera: { url: maderaUrl, object: null },
  11 };
  12 
  13 function onResize() {
  14     camera.aspect = container.offsetWidth / container.offsetHeight;
  15     camera.updateProjectionMatrix();
  16     renderer.setSize(container.offsetWidth, container.offsetHeight);
  17 }
  18 
  19 function setupThreeJs() {
  20     scene = new THREE.Scene();
  21     container = document.getElementById('mainContainer');
  22 
  23     renderer = new THREE.WebGLRenderer();
  24     renderer.setClearColor(0x606060);
  25     container.appendChild(renderer.domElement);
  26 
  27     camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
  28     camera.position.set(-50, 60, 50);
  29     camera.lookAt(0, 0, 0);
  30 
  31     const controls = new OrbitControls(camera, renderer.domElement);
  32 
  33     const ambientLight = new THREE.AmbientLight(0xffffff);
  34     scene.add(ambientLight);
  35 
  36     const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.25);
  37     scene.add(hemisphereLight);
  38 
  39     const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  40     directionalLight.position.set(100, 100, 100);
  41     scene.add(directionalLight);
  42 
  43     const gridHelper = new THREE.GridHelper(50, 20);
  44     scene.add(gridHelper);
  45 
  46     const axesHelper = new THREE.AxesHelper(5);
  47     scene.add(axesHelper);
  48 
  49     window.addEventListener('resize', onResize);
  50     onResize();
  51 }
  52 
  53 function buildScene() {
  54     console.log('Building scene');
  55 }
  56 
  57 function onTextureLoaded(key, texture) {
  58     texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  59     textures[key].object = texture;
  60     console.log('Texture `' + key + '` loaded');
  61 }
  62 
  63 function loadTextures(callback) {
  64     const loadingManager = new THREE.LoadingManager();
  65 
  66     loadingManager.onLoad = () => {
  67         console.log('All textures loaded');
  68         callback();
  69     };
  70 
  71     for (const key in textures) {
  72         console.log("Loading textures");
  73         const loader = new THREE.TextureLoader(loadingManager);
  74         const texture = textures[key];
  75         texture.object = loader.load(
  76             texture.url,
  77             onTextureLoaded.bind(this, key),
  78             null,
  79             (error) => {
  80                 console.error(error);
  81             }
  82         );
  83     }
  84 }
  85 
  86 function generateTunnel() {
  87     const tunnelHeight        = 20;
  88     const tunnelWidth         = 14;
  89     const tunnelWallThickness = 0.5;
  90     const tunnelLen           = 26;
  91 
  92     const path = new THREE.Path();
  93     path.moveTo(-tunnelWidth/2, 0);
  94     path.lineTo(-tunnelWidth/2, tunnelHeight*1/3);
  95     path.moveTo(-tunnelWidth/2, tunnelHeight*1/3);
  96     path.quadraticCurveTo(0, tunnelHeight, tunnelWidth/2, tunnelHeight*1/3);
  97     path.moveTo(tunnelWidth/2, 0);
  98     path.lineTo(tunnelWidth/2, 0);
  99 
 100 
 101     // cerramos la curva con otra de la misma forma con una diferencia de
 102     // `tunnelWallThickness`
 103     path.lineTo(tunnelWidth/2-tunnelWallThickness, 0);
 104     path.moveTo(tunnelWidth/2-tunnelWallThickness, 0);
 105 
 106     path.lineTo(tunnelWidth/2-tunnelWallThickness, tunnelHeight*1/3);
 107     path.moveTo(tunnelWidth/2-tunnelWallThickness, tunnelHeight*1/3);
 108 
 109     path.quadraticCurveTo(
 110         0, tunnelHeight-(tunnelWallThickness*2),
 111         -tunnelWidth/2+tunnelWallThickness, tunnelHeight*1/3);
 112 
 113     path.lineTo(-tunnelWidth/2+tunnelWallThickness, 0);
 114     path.moveTo(-tunnelWidth/2+tunnelWallThickness, 0);
 115 
 116     path.lineTo(-tunnelWidth/2, 0);
 117     path.moveTo(-tunnelWidth/2, 0);
 118 
 119     const points = path.getPoints();
 120 
 121     /*
 122     // muestra la curva utilizada para la extrusión
 123     const geometry = new THREE.BufferGeometry().setFromPoints(points);
 124     const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
 125     const curveObject = new THREE.Line(geometry, lineMaterial);
 126     scene.add(curveObject);
 127     */
 128 
 129     const shape = new THREE.Shape(points);
 130 
 131     const extrudeSettings = {
 132         curveSegments: 24,
 133         steps: 50,
 134         depth: tunnelLen,
 135     };
 136 
 137     const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
 138     geometry.translate(0, 0, -tunnelLen/2);
 139 
 140     textures.madera.object.wrapS = THREE.RepeatWrapping;
 141     textures.madera.object.wrapT = THREE.RepeatWrapping;
 142     textures.madera.object.repeat.set(0.10, 0.10);
 143     textures.madera.object.anisotropy = 16;
 144 
 145     const tunnelMaterial = new THREE.MeshPhongMaterial({
 146         side: THREE.DoubleSide,
 147         transparent: false,
 148         opacity: 1.0,
 149         shininess: 10,
 150         map: textures.madera.object
 151     });
 152 
 153     const mesh = new THREE.Mesh(geometry, tunnelMaterial) ;
 154     scene.add(mesh);
 155 }
 156 
 157 function mainLoop() {
 158     requestAnimationFrame(mainLoop);
 159     renderer.render(scene, camera);
 160 }
 161 
 162 function main() {
 163     generateTunnel();
 164     mainLoop();
 165 }
 166 
 167 setupThreeJs();
 168 loadTextures(main);