commit dafc276475d0c70d5f3f34e1ec5e9c19e4c98b71
parent f67d99412dcedad4a256988b8cf09043ac2291f2
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Sun, 2 Jun 2024 01:27:30 -0300
split each scene's element into its own html page
temporary until all the elements are complete, after that merge
them into the final scene
Diffstat:
5 files changed, 164 insertions(+), 2 deletions(-)
diff --git a/tp/index.html b/tp/index.html
@@ -9,10 +9,24 @@
padding: 0;
margin: 0;
height: 100%;
+ font-family: Baskerville, "Times New Roman", serif;
+ }
+ body {
+ margin-left: auto;
+ margin-right: auto;
+ width: 800px;
+ padding: 1em;
+ font-size: 14px;
+ }
</style>
</head>
<body>
- <div id="mainContainer"></div>
- <script type="module" src="/src/main.js"></script>
+ <h1>Trabajo Practico: Escena 3D</h1>
+ <p>Sistemas Graficos (86.43) - FIUBA</p>
+ <h2>Componentes de la Escena</h2>
+ <ul>
+ <li><a href="terrain.html">Terreno</a></li>
+ <li><a href="trees.html">Arboles</a></li>
+ </ul>
</body>
</html>
diff --git a/tp/src/main.js b/tp/src/terrain.js
diff --git a/tp/src/trees.js b/tp/src/trees.js
@@ -0,0 +1,112 @@
+import * as THREE from 'three';
+import * as dat from 'dat.gui';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { vertexShader, fragmentShader } from '/assets/shaders.js';
+
+let scene, camera, renderer, container, material;
+
+const textures = {
+ tierra: { url: '/assets/tierra.jpg', object: null },
+ roca: { url: '/assets/roca.jpg', object: null },
+ pasto: { url: '/assets/pasto.jpg', object: null },
+ elevationMap: { url: '/assets/elevation_map2.png', object: null },
+};
+
+function onResize() {
+ camera.aspect = container.offsetWidth / container.offsetHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(container.offsetWidth, container.offsetHeight);
+}
+
+function setupThreeJs() {
+ scene = new THREE.Scene();
+ container = document.getElementById('mainContainer');
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setClearColor(0x606060);
+ container.appendChild(renderer.domElement);
+
+ camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera.position.set(-40, 50, 30);
+ camera.lookAt(0, 0, 0);
+
+ const controls = new OrbitControls(camera, renderer.domElement);
+
+ const ambientLight = new THREE.AmbientLight(0xffffff);
+ scene.add(ambientLight);
+
+ const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.25);
+ scene.add(hemisphereLight);
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+ directionalLight.position.set(1, 1, 1);
+ scene.add(directionalLight);
+
+ //const gridHelper = new THREE.GridHelper(50, 20);
+ //scene.add(gridHelper);
+
+ const axesHelper = new THREE.AxesHelper(5);
+ scene.add(axesHelper);
+
+ window.addEventListener('resize', onResize);
+ onResize();
+}
+
+function buildScene() {
+ console.log('Building scene');
+
+ console.log('Generating water');
+ const terrainGeometry = new THREE.PlaneGeometry(50, 50);
+ const terrainMaterial = new THREE.MeshPhongMaterial( {color: 0x365829, side: THREE.DoubleSide} );
+ const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+ terrain.rotateX(Math.PI/2);
+ terrain.position.set(0, 0, 0);
+ scene.add(terrain);
+}
+
+function onTextureLoaded(key, texture) {
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+ textures[key].object = texture;
+ console.log('Texture `' + key + '` loaded');
+}
+
+function loadTextures(callback) {
+ const loadingManager = new THREE.LoadingManager();
+
+ loadingManager.onLoad = () => {
+ console.log('All textures loaded');
+ callback();
+ };
+
+ for (const key in textures) {
+ console.log("Loading textures");
+ const loader = new THREE.TextureLoader(loadingManager);
+ const texture = textures[key];
+ texture.object = loader.load(
+ texture.url,
+ onTextureLoaded.bind(this, key),
+ null,
+ (error) => {
+ console.error(error);
+ }
+ );
+ }
+}
+
+function createMenu() {
+ const gui = new dat.GUI({ width: 400 });
+}
+
+function mainLoop() {
+ requestAnimationFrame(mainLoop);
+ renderer.render(scene, camera);
+}
+
+function main() {
+ setupThreeJs();
+ buildScene();
+ createMenu();
+ mainLoop();
+}
+
+main();
diff --git a/tp/terrain.html b/tp/terrain.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Trabajo Practico Sistemas Graficos | Martin Klöckner</title>
+ <link rel="icon" href="data:,"> <!-- Do not request favicon -->
+ <style>
+ html, body, #mainContainer {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ </style>
+ </head>
+ <body>
+ <div id="mainContainer"></div>
+ <script type="module" src="/src/terrain.js"></script>
+ </body>
+</html>
diff --git a/tp/trees.html b/tp/trees.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Trabajo Practico Sistemas Graficos | Martin Klöckner</title>
+ <link rel="icon" href="data:,"> <!-- Do not request favicon -->
+ <style>
+ html, body, #mainContainer {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ </style>
+ </head>
+ <body>
+ <div id="mainContainer"></div>
+ <script type="module" src="/src/trees.js"></script>
+ </body>
+</html>
