groep van 8 kubussen en 3 cylinders
Three.js terug naar de startpagina
Three.js is een javascript framework om 3D animaties te maken en middels WebGL (Web Graphic Library) te renderen
Three.js is in 2010 ontwikkeld door Ricardo Cabello. Ga naar de website van Three.js voor de documentatie en de voorbeelden
Three.js is in 2010 ontwikkeld door Ricardo Cabello. Ga naar de website van Three.js voor de documentatie en de voorbeelden
De voorbeelden, documentatie en javascripts zijn te downloaden van github. De map build bevat het three.js script.
In de map examples/controls/ staat het OrbitControls.js script
Three.js heeft ook een zeer actief forum met een aantal categorieen met oa shocases, resources en questions
Om verwarring te voorkomen. De zelf gemaakte java bestanden noem ik schetsen en de bestanden van Three.js noem ik scripts.
Voor het editen van de schetsen maak ik gebruik van Atom.
De animaties zijn te bekijken via de in Atom geinstalleerde live server van jas-chen
via firefox --> webontwikkelaar --> webconsole kan je de code controleren op fouten en debuggen
In de start schets worden de basisprincipes van three.js uiteengezet.
De schetsen 1 t/m 8 staan in een .js bestand maken gebruik van een HTML en CSS bestand,
zie: benodigde HTML en CSS bestanden
module type
De schetsen 9, 11, 12 en 13 staan in een html bestand en zijn van het module type en maken gebruik van thee.module.js
De gebruikte libs zijn ook modules en werken dus alleen met three.module.js. De libs heb ik in de map "modlib" gestopt
In de nieuwere versies van three.js wordt alleen nog met modules gewerkt
| 1 | start schets | maakt alleen gebruik van het three.js script | |
| 2 | torus, bol en kubus animatie | een geometry demo met shadow's | |
| 3 | groep van 8 kubussen en 3 cylinders | een demo van roterende kubussen, te beinvloeden met orbit en GUI controls | |
| 4 | drie kubussen | met transparante afbeeldingen | |
| 5 | shaders in three.js | animatie met ShaderMaterial en GLSL (Open GL Shading Language) functies | |
| 6 | wereldbeeld | animatie met een equirectangulair image en wolken als achtergrond | |
| 7 | spiegelbal | in een 3D omgeving met de muis te manipuleren | |
| 8 | twee fractalboxen | gemaakt met de formules ABoxModKali _conj en de formule RandCubesIFS | |
| 9 | spiegelbal in de ruimtepuin fractal | spiegelbal in een roterende fractal van ruimtepuin | |
| 10 | spiegelbal in fractalstad en ruimtestad | twee animaties met roterende fractals en spiegelbal | |
| 11 | low poly car gemaakt in Blender | de car is als glTF bestand geimporteerd mbv de GLTFLoader module | |
| 12 | rollercoaster | VR effect met cardboard in telefoon naar de schets van Ricardo Cabello | |
| 13 | virtual reality met cardboard | met 12 VR animaties dit dankzij de module "DeviceOrientationControls" | |
