commit 18fccb68842f513643f415933fca73c329e58c59
parent bd41dbf3284389dabeb9c42c0cd73038904b7ae1
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Thu, 4 Jul 2024 00:56:26 -0300
make `cameras` an array instead of a key-value object
Diffstat:
| M | tp/src/scene.js | | | 118 | +++++++++++++++++++++++++++++++++++++------------------------------------------ |
1 file changed, 55 insertions(+), 63 deletions(-)
diff --git a/tp/src/scene.js b/tp/src/scene.js
@@ -18,8 +18,15 @@ import { updateTrainCrankPosition } from '/src/train.js';
let scene, camera, renderer, container, terrainMaterial, terrainGeometry, terrain, time;
let treesForbiddenMapData, treesForbiddenMap, elevationMap, elevationMapData;
-let train, trainCamera, trainConductorCamera, trainBackCamera;
-let gui;
+let train, gui;
+let cameras = [];
+
+let settings = {
+ animationEnable: false,
+ showTrain: true,
+ currCameraIndex: 0,
+ trainSpeed: 1.00
+};
// actualizar la variable global `amplitude` de '/src/track-map/'
const widthSegments = 150;
@@ -38,34 +45,28 @@ const textures = {
treeForbiddenMap: { url: '/assets/tree_forbidden_zone_map_wider_path.png', object: null }
};
-let settings = {
- animationEnable: false,
- showTrain: true,
- currCamera: 'general',
-};
-
function onResize() {
const aspect = container.offsetWidth / container.offsetHeight;
- camera.aspect = aspect;
- camera.updateProjectionMatrix();
- if(trainCamera != undefined) {
- trainCamera.aspect = aspect;
- trainCamera.updateProjectionMatrix();
+ for(let i = 0; i < cameras.length; ++i) {
+ if(cameras[i] != undefined) {
+ cameras[i].aspect = aspect;
+ cameras[i].updateProjectionMatrix();
+ }
}
- if(trainConductorCamera != undefined) {
- trainConductorCamera.aspect = aspect;
- trainConductorCamera.updateProjectionMatrix();
- }
+ renderer.setSize(container.offsetWidth, container.offsetHeight);
+}
+function nextCamera() {
+ const camerasCount = cameras.length;
- if(trainBackCamera != undefined) {
- trainBackCamera.aspect = aspect;
- trainBackCamera.updateProjectionMatrix();
+ if(settings.currCameraIndex == (camerasCount - 1)) {
+ console.log("Restarting cameras");
+ settings.currCameraIndex = 0;
+ } else {
+ settings.currCameraIndex += 1;
}
-
- renderer.setSize(container.offsetWidth, container.offsetHeight);
}
function setupThreeJs() {
@@ -76,13 +77,14 @@ function setupThreeJs() {
// renderer.setClearColor(0x606060);
container.appendChild(renderer.domElement);
- camera = new THREE.PerspectiveCamera(
+ const topView = new THREE.PerspectiveCamera(
35, window.innerWidth / window.innerHeight, 0.1, 1000);
- camera.position.set(-50, 60, 50);
- camera.lookAt(0, 0, 0);
+ topView.position.set(-50, 60, 50);
+ topView.lookAt(0, 0, 0);
+ cameras.push(topView);
- const controls = new OrbitControls(camera, renderer.domElement);
+ const controls = new OrbitControls(topView, renderer.domElement);
const ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
@@ -108,24 +110,11 @@ function setupThreeJs() {
textures.sky.object.mapping = THREE.EquirectangularRefractionMapping;
scene.background = textures.sky.object;
+
window.addEventListener('keydown', (event) => {
switch (event.key) {
case "c":
- switch (settings.currCamera) {
- case 'general':
- settings.currCamera = 'train';
- break;
- case 'train':
- settings.currCamera = 'trainConductor';
- break;
- case 'trainConductor':
- settings.currCamera = 'trainBackCamera';
- break;
- case 'trainBackCamera':
- settings.currCamera = 'general';
- break;
- }
- console.log("Switched camera to `" + settings.currCamera + "`");
+ nextCamera();
break;
case ' ':
console.log("Toggling train animations");
@@ -186,6 +175,13 @@ function buildBridge() {
bridge2.position.set(-14, 0, -41);
// bridge2.rotateY(-Math.PI*0.118);
+ const bridgeCamera = new THREE.PerspectiveCamera(
+ 55, window.innerWidth / window.innerHeight, 0.1, 10000);
+
+ bridgeCamera.position.set(0, 16, -10);
+ bridgeCamera.lookAt(0, 18, -100);
+ bridge1.add(bridgeCamera);
+
scene.add(bridge1);
scene.add(bridge2);
}
@@ -194,26 +190,30 @@ function buildBridge() {
function buildLoco() {
train = buildTrain();
- trainConductorCamera = new THREE.PerspectiveCamera(
+ const trainConductorCamera = new THREE.PerspectiveCamera(
55, window.innerWidth / window.innerHeight, 0.1, 10000);
trainConductorCamera.position.set(0, 16, -20);
trainConductorCamera.lookAt(0, 20, 100);
train.add(trainConductorCamera);
+ cameras.push(trainConductorCamera);
- trainCamera = new THREE.PerspectiveCamera(
+ const trainCamera = new THREE.PerspectiveCamera(
55, window.innerWidth / window.innerHeight, 0.1, 10000);
trainCamera.position.set(-22, 12, -26);
trainCamera.lookAt(0, 10, 20);
train.add(trainCamera);
+ cameras.push(trainCamera);
- trainBackCamera = new THREE.PerspectiveCamera(
+ const trainBackCamera = new THREE.PerspectiveCamera(
55, window.innerWidth / window.innerHeight, 0.1, 10000);
trainBackCamera.position.set(0, 16, -10);
trainBackCamera.lookAt(0, 18, -100);
train.add(trainBackCamera);
+ cameras.push(trainBackCamera);
+
train.scale.set(0.075, 0.10, 0.09);
train.visible = settings.showTrain;
scene.add(train);
@@ -267,8 +267,6 @@ function buildRails() {
}
function buildTerrain() {
- // console.log('Building scene');
-
const width = 100;
const height = 100;
@@ -336,6 +334,14 @@ function buildTunnel() {
console.log(trainPathPos);
scene.add(tunnel);
+
+ const tunnelCamera = new THREE.PerspectiveCamera(
+ 65, window.innerWidth / window.innerHeight, 0.1, 10000);
+
+ tunnelCamera.position.set(-1, 12, 18);
+ tunnelCamera.lookAt(0, 10, -10);
+ tunnel.add(tunnelCamera);
+ cameras.push(tunnelCamera);
}
function buildTrees(count = 50) {
@@ -355,8 +361,8 @@ function createMenu() {
function buildScene() {
console.log('Building scene');
- buildTrees(200);
buildTunnel();
+ buildTrees(100);
buildTerrain();
buildRailsFoundation();
buildRails();
@@ -365,24 +371,10 @@ function buildScene() {
}
function mainLoop() {
- let cam;
- switch (settings.currCamera) {
- case 'general':
- cam = camera;
- break;
- case 'train':
- cam = trainCamera;
- break;
- case 'trainConductor':
- cam = trainConductorCamera;
- break;
- case 'trainBackCamera':
- cam = trainBackCamera;
- break;
- }
+ let currCamera = cameras[settings.currCameraIndex];
requestAnimationFrame(mainLoop);
- renderer.render(scene, cam);
+ renderer.render(scene, currCamera);
const dt = 0.001;
if(settings.animationEnable) {
