How to create a 3D Scene using Seen.js

Just a few years ago we needed high-end 3D software to create any kind of 3D scene.

Now, we have plenty of ways of creating even complex 3D scenes and render them directly in the browser.

But if we want to take a really easy route, we can use a library, like the awesome Seen.js that makes life a little easier by creating 3D scenes with just a few lines of code.

CoffeeScript

SeenJS is built using CoffeeScript, and all of the examples that they provide are written in CoffeeScript.

Although you can use vanilla JavaScript, I’m going to use CoffeeScript in this article to make it easier to follow.

Creating our scene

First let’s create the canvas that will hold our scene:

<canvas width="500" height="500" id="canvas"></canvas>

As always in a 3D scene, the first thing we’re going to need is a shape. In our case, we’ll use a icosahedron but you can search in the annotated source for other shapes to use.

To create the icosahedron we need to call Shapes and then the shape we’re using. Following that, we need to scale it up to the size we want:

shape = seen.Shapes.icosahedron().scale(150)

We’ve created a shape, but it’s not yet added to the scene. To do that we first need to create the scene:

scene = new seen.Scene

After this is instantiated, we’ll add our shape as a model of this scene:

    model    : seen.Models.default().add(shape)
    viewport : seen.Viewports.center(500, 500)

As we can see we called Models and then the default() function that contains a set of 3 lights that will illuminate our scene properly. After the lights are added we call the add() function and set our shape as the value.

After the Model we also set the viewport and in here you should simply place the width of your desired viewport, in our case it will be the dimensions of the canvas.

And just like that our icosahedron has been added to the scene.

Our simple scene is really close to being finalized, all that is left to do is to render the scene so that we can finally see it in our browser:

context = seen.Context('canvas', scene).render()

We called seen.Context() which takes two parameters: the first is the ID of the canvas or SVG file where the scene will be rendered, and the second is the scene itself.

Lastly, we call the render() function and you can now see the icosahedron in your browser.

Adding Interactivity

Our scene is ready, but it’s not much to write home about. Let’s start to fix that by adding a random color to the surface:

seen.Colors.randomSurfaces2(shape)

(This should be added right beneath the line creating the icosahedron.)

Reload your page now and you’ll see it works nicely.

Next, let’s add the interactivity. We want the user to be able to rotate the scene by clicking and dragging with the mouse. For which, we’ll need to instantiate a new Drag object and pass the canvas ID to it:

drag = new seen.Drag('canvas', {inertia : true})

As you can see, I’ve also passed a property called ‘inertia’ and a value of true, which will ensure some easing when you stop dragging producing a smoothing effect.

After this we need a function that will run when the user drags the shape:

drag.on('drag.rotate', (e) ->
    xform = seen.Quaternion.xyToTransform(e.offsetRelative...)
    shape.transform(xform)
    context.render()
)

Conclusion

This is all you need to do in order create a simple 3D scene with some interactivity using SeenJS, you can see this pen I created if you want to see a demo.

The arrival of these kinds of library just shows how much the Web has changed over the past few years. I hope you’ll consider embracing this new technology, because it’s more usable than ever!