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

De voorbeelden, documentatie en javascripts zijn te downloaden van github. De map build bevat het three.js script.

Three.js heeft ook een zeer actief forum met een aantal categorieen met oa showcases, 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 

module type

De schetsen  staan in een index.html bestand en zijn van het ES6 module type en werken met thee.module.js  deze zit in de map "build"

mappenstructuur
map structuur
 
De gebruikte libs zijn ook modules en worden addons genoemd en werken dus alleen met three.module.js.
De libs zitten in submappen van de map "jsm"
mappenstructuur
mappen met de addons in de jsm map

 

bijvoorbeeld controls/OrbitControls.js , libs/lil-gui.module.min.js , loaders/STLLoader.js

In de nieuwere versies van three.js wordt alleen nog met modules gewerkt

 
 1  start schets    
 2 torus, bol en kubus animatie   met shadow's, maakt gebruik van de addons "orbitConrols.js" en "lil-gui.module.min.js"
 3 groep van 8 kubussen en 3 cylinders   een demo van roterende kubussen, te beinvloeden met orbit en GUI controls
 4 drie kubussen   met deels transparante afbeeldingen
 5 animatie met twee shaders   animatie met ShaderMaterial en GLSL (Open GL Shading Language) functies
 6 animatie met vier shaders   deels transparante shaders op drie boxen en een sphere
 7 wereldbeeld   animatie met een equirectangulair image en wolken als achtergrond
 8 spiegelbal en spiegeltorus   in een 3D omgeving met de muis te manipuleren
 9 spiegelbal in 3D VLSD afb   met "IcosahedronGeometry" als bol
10 twee fractalboxen   gemaakt met de formules ABoxModKali _conj en de formule RandCubesIFS
11 low poly car gemaakt in Blender   de car is als glTF bestand geimporteerd mbv de GLTFLoader module
12 7 animaties met STL vormen   met mooie schaduw effecten
13 dancing in the air   van twee dansende fbx modellen
14 reflecties in een spiegel    
15 reflecties in twee spiegels