Geometry Jungle is an inspirational website playground that lets users create 2D/3D geometries with stunning visual effects, materials, noise NURBS, etc.

The website will enable users to select amongst three geometries: waving sphere, playful terrain, and origami mirrors. In each selection, the website GUI allows for adjusting its lighting, materiality, shape, and transformative effects to allow for easy and personal manipulations. I aim to inspire designers and non-designers alike to give access to 3D modeling creation without a precise understanding of 3D or NURBS modeling software.

I built the website on Javascript, HTML, and CSS. Then, using the Node.js engine, I implemented our website using Three.js, dat.GUI, orbit control, and GLTFLoader to build the website’s foundation.

Creation process

I mainly write the codes in typescript files to achieve all the geomtry creation, see “sphere_with_waves.ts”, “terrain_editor.ts” and ““origami_mirror_editor.ts”. I then use “wave.ts”, “terrain.ts” and “origami.ts” to import the functions and convert into javascript file for html file to display. (“webpack.config.js” is the file that converts typescript file into javasctip file.) The reason why I have to use typescript is that typescript allow me to import types that I need to create the geometry. I also found that typescript is a really good language for debugging compared to javascript, as it showed the bugs immediately when I were coding.