Creating a Canvas Winter 3D Static Scene generated with Three Js

Published by: Emil // Date 12.12.2011 // Views: 6758 // Add to Twitter :: Facebook

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 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 ( ).

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:

Video on youtube as Rotation example:


JavaScript HTML5 Canvas Snow in 3D ( ):

Bind two shapes together as one (

Simple procedurally generated 3D shapes example by zz85