Creating a Canvas Winter 3D Static Scene generated with Three Js
After I create the 3D Solar system with Three Js using primitive geometric shapes, I became more enthusiast and I wanted to do something with complex shapes. Idea with Threes and Hot Air Balloon came first by drawing a mock up scene on paper, where I tried to fit different primitive geometric shapes and to obtain a cloud ( 3 spheres mixed ), a three ( 2 cylinders mixed ) or a air balloon ( 1 sphere mixed with 2 cylinders ). After doing a small reseach I found in stackoverflow.com a topic with this title "bind two shapes together as one", providing the solution. Than everything was really easy to be implemented. Having all these custom geometric forms I had to chose a good position for the camera for a better view, the clouds position had to be somewhere up, the threes had to stay on a plane randomly arranged with randomly sizes, and for the end I thought that would be intesesting a snow effect in the 3D space. The 3D Snow FX came from Seb Lee-Delisle Snow experiment ( sebleedelisle.com ).
After I saw again this animation I got a new idea, what if I replace the snow particles bullets, the Air Ballon with Neo shape from Matrix, the Threes with Agents? I would be interesting to see this by rotating the 3D scene... right? Well, I have to find a way to obtain 3D objects in JSON format to build such a thing :)
You can run the demo here:
http://maran-emil.de/experiments/demo6/
Video on youtube as Rotation example:
http://www.youtube.com/watch?v=AuMpidJbc7Y
References:
JavaScript HTML5 Canvas Snow in 3D ( sebleedelisle.com ):
http://sebleedelisle.com/2010/11/javascript-html5-canvas-snow-in-3d/
Bind two shapes together as one (stackoverflow.com):
http://stackoverflow.com/questions/8322759/three-js-bind-two-shapes-together-as-one
Simple procedurally generated 3D shapes example by zz85
http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html