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.
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 11 en 12 staan in een .js bestand en maken gebruik van een HTML en CSS bestand,

zie:   benodigde HTML en CSS bestanden

module type
De schetsen 1  t/m 10 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"
De gebruikte libs zijn ook modules en werken dus alleen met three.module.js. De libs zitten in submappen van de map "jsm"
In de nieuwere versies van three.js wordt alleen nog met modules gewerkt
 
 1  start schets   maakt alleen gebruik van de three.module.js lib
 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 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 en spiegeltorus   in een 3D omgeving met de muis te manipuleren
 8 twee fractalboxen   gemaakt met de formules ABoxModKali _conj en de formule RandCubesIFS
 9 low poly car gemaakt in Blender   de car is als glTF bestand geimporteerd mbv de GLTFLoader module
10 7 animaties met STL vormen   met mooie schaduw effecten
11  rollercoaster   VR effect met cardboard in telefoon naar de schets van Ricardo Cabello
12 virtual reality met cardboard   met 12 VR animaties dit dankzij de module "DeviceOrientationControls"
       

 

 
onbegrepen waarschuwing  

 

waarschuwing, ontstaat soms na het herstellen van een fout
 de waarschuwing verdwijnt na het opnieuw opstarten van Atom
 
shader07
 
 
spiegelbal in fractalstad
 
 
 
ftactalboxen
 
 

zeven animaties met STL modellen