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 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"
       

de in firefox geopende webconsole

De, in firefox, geopende webconsole

 

foutmeldingen als javascripts niet worden gevonden

foutmeldingen als javascripts niet worden gevonden

 

syntax fout, als je op  .js klik kom je in de debugger
 
syntax fout, als je op  .js klik kom je in de debugger
 
onbegrepen waarschuwing  

 

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

 

spiegelbal in fractalstad