Welcome to the Ferris Wheel Simulation project. This project demonstrates a 3D Ferris wheel simulation using Three.js, complete with physics for swinging cabins and a debug GUI for adjusting various parameters.
This project showcases a 3D Ferris wheel simulation built with Three.js. It includes physics for swinging cabins and a debug GUI for real-time adjustments of various parameters such as swing amplitude, swing speed, and rotation speed.
- 3D Ferris wheel with rotating cabins
- Physics for swinging cabins
- Debug GUI for adjusting physics and light settings
- Responsive design
To get started with the project, clone this repository and install the dependencies:
git clone https://github.com/bckslash/Ferris-Wheel.git
cd Ferris-Wheel
npm installnpm run devTento projekt demonštruje počítačovú grafiku s použitím knižníc Three.js, lil-gui a ďalších nástrojov. Obsahuje interaktívne moduly, post-processing efekty a ovládanie kamery.
- Zodpovedný za vytvorenie scény, kamery a renderera.
- Pridáva Ferris Wheel (koleso) a iné modely do scény.
- Obsahuje animáciu a logiku na presun kamery do kabínky na kolotoči.
- Stará sa o zmenu veľkosti okna – aktualizuje rozmery kamery, renderera a post-processing.
- Umožňuje responzívne prispôsobenie scény pri zmene veľkosti okna.
- Vytvára samotné koleso (“Ferris Wheel”), jednotlivé kabínky a ostatné 3D objekty.
- Umožňuje meniť farbu kolesa a kabíniek cez funkcie updateWheelColor() a updateCabinColor().
- Inicializuje osvetlenie – DirectionalLight reprezentujúce slnko a PointLight pre dodatočné osvetlenie.
- Umožňuje manipuláciu s intenzitou a polohou svetiel.
- Obsahuje triedu Tree a funkcie na načítanie rôznych modelov stromov (klasický strom, borovica, jabloň).
- Vytvorením viacerých stromov dokáže vytvoriť prírodnú scenériu okolo kolesa.
- Vytvára ostrov – zelenú plochu, trávu, stánky a iné modely pre obohatenie scény.
- Umožňuje takto tvoriť detaily a dekorácie do prostredia.
- Slúži na zobrazovanie GUI panelu s možnosťou nastavenia rôznych parametrov scény, napr:
- Physics (amplitúda hojdačky, rýchlosť rotácie),
- Osvetlenie (intenzita, azimut),
- Post-processing (pixelSize, normalEdgeStrength),
- Farby kolesa a kabíniek,
- Export a import nastavení (kde sa ukladajú parametre do JSON súboru).
- Voliteľné komponenty, ktoré zobrazujú bannery s informáciami o projekte (GitHub link, ovládanie).
- Nainštalujte potrebné závislosti (napr. npm install).
- Spustite lokálny server (napr. pomocou Vite, Webpack alebo iného nástroja).
- Otvorte prehliadač na adrese, kde beží server (http://localhost:5173).
function animate() {
requestAnimationFrame(animate);
// Orbit/Odchyt vstupu alebo pohyb
// ...existing code...
composer.render();
}Tento blok zabezpečuje nepretržité vykresľovanie scény a spracovanie animácie.
const exportSettings = {
export: () => {
// Uloženie parametrov do JSON súboru
// ...existing code...
},
import: (event) => {
// Načítanie parametrov z JSON súboru
// ...existing code...
},
};Tu sa rieši export a import konfiguračných parametrov scény (osvetlenie, pozície kamery, atď.) do JSON súboru.
Tento projekt demonštruje rôzne grafické a interaktívne prvky – animáciu Ferris Wheel, pohyb kamery, import a export nastavení scény, zvládnutie svetiel i tieňovania. Každý súbor je zameraný na inú časť funkcionality, vďaka čomu je kód prehľadnejší a ľahšie udržiavateľný.
Nasledujúce úryvky ukazujú rôzne časti kódu s krátkym vysvetlením, ako v projekte fungujú.
// ...existing code...
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Nastavenie farby na čiernu
// ...existing code...Scénu vytvárame pomocou Three.js. Nastavujeme základnú farbu pozadia na čiernu (0x000000).
// ...existing code...
const camera = new THREE.PerspectiveCamera(
50,
sizes.width / sizes.height,
0.1,
1000
);
camera.position.z = 20;
// ...existing code...Tu je ukážka perspektívnej kamery s FOV 50, ktorá je od objektov vzdialená defaultne o 20 jednotiek pozdĺž osi Z.
// ...existing code...
const wheel1 = new THREE.Mesh(
new THREE.TorusGeometry(5, 0.15, 32, 10),
wheelMaterial
);
// ...existing code...Pre tvorbu kolotočového kolesa (Ferris Wheel) využívame torus (toroid). Využitie TorusGeometry uľahčuje vytvoriť kruhový tvar so šírkou, hrúbkou a počtom segmentov.
// ...existing code...
const sunLight = new THREE.DirectionalLight(0xffffff, 1);
sunLight.position.set(0, 45, 30);
sunLight.castShadow = true;
// ...existing code...Tento úryvok využíva DirectionalLight pre osvetlenie scény podobné slnku. Nastavujeme polohu a povolenie tieňov (castShadow).
// ...existing code...
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// ...existing code...Zapnutie tieňov v rendereri a použitie jemnejšieho tieňového typu PCFSoftShadowMap pre realistickejší vzhľad.
// ...existing code...
const physicsFolder = gui.addFolder("Physics");
physicsFolder.add(physics, "swingAmplitude", 0, 1).name("Swing Amplitude");
// ...existing code...Pomocou lil-gui vytvárame interaktívne ovládanie fyzikálnych parametrov. Umožňujeme meniť amplitúdu hojdania kolesových kabínok.
// ...existing code...
const renderPixelatedPass = new RenderPixelatedPass(4, scene, camera);
composer.addPass(renderPixelatedPass);
// ...existing code...Kombinujeme composery a rendery pre “pixelovaný” post-processing. Hodnota 4 určuje mieru pixelácie.
// ...existing code...
const intersects = raycaster.intersectObjects(cabins);
if (intersects.length > 0) {
selectedCabin = intersects[0].object.parent;
// ...existing code...
}
// ...existing code...Použitie Raycastera umožňuje zisťovať, či užívateľ klikol na kabínu (intersekcia s 3D objektom).
// ...existing code...
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
// ...existing code...Pri načítaní stromu z GLB modelu zapíname vrhanie a prijímanie tieňov, čím je scéna vizuálne pútavejšia.
// ...existing code...
function createIsland(scene) {
const ground = new THREE.Mesh(
new THREE.CylinderGeometry(20, 20, 1, 16),
new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
// ...existing code...
scene.add(ground);
}
// ...existing code...Vytvárame základný valec predstavujúci ostrov. Nastavujeme mu materiál s použitou textúrou a pridávame ho do scény.