WebGL Javascript Three.JS 3D Viewer

The model may take a few minutes to appear depending on network speed.

Click here to view the 3D viewer in full screen

Left mouse/One finger – Orbit

Middle mouse/Two fingers – Zoom

Right mouse/Three fingers – Pan

Using one of the featured models from our previous post, we decided to create a small and basic WebGL 3D model viewer based on Three.JS JavaScript libraries. This allows us to showcase models not only as still images or animations, but as interactive content where the end user can manipulate and observe the details from any angle. The level of interactivity can be further enhanced by adding buttons and menu systems to change lighting, environment, materials, and camera settings.

The Three.JS website has extensive documentation as well as examples of what can be achieved and sample code can be found on GitHub to get started.

Making of the 500 Special Image

To celebrate our milestone of reaching 500 likes on our facebook page, we decided to create a special image using the power of algorithms in Grasshopper. This Plug-in for Rhino allows us to create patterns, attractors, and many more complicated results that would either be impossible to do accurately in alternative software packages, or would be very inefficient due to the amount of time it would take.

In order to create the image, the data was first exported from Alias as .igs and then imported into Rhino. After linking the surfaces and curves to Grasshopper, a hex pattern was added using the Lunchbox plugin. Using attractors on each curve of the “500” text a subtle fade was created to make it appear as though the numbers were being created due to the change of scale in the pattern itself.

The full algorithm can be viewed below.

Grasshopper can be downloaded from: http://www.grasshopper3d.com/

Lunchbox can be downloaded from: http://www.food4rhino.com/app/lunchbox

Interior Scene Visualization – Lamborghini

  • Before-Behind the Scenes
    After-Behind the Scenes
    BeforeBehind the ScenesAfter

This project came about due to the need for us to show examples of our visualization services in interior design. We are fans of model cars at IDV.design so we decided to incorporate that aesthetic look of a modern living room decorated with automotive books, posters, and the highlight being the scale model of a Lamborghini Aventador LP 570-4 SV Roadster.

Utilizing extensive renders passes grants us control of lighting, highlights, and shadows after the image is rendered. This affords us to make granular tweaks to the image for a better final result.


Email us at info@idv.design or use the form below