How to use three.js in a blog post

The three.js introduction introduction for setting up a scene suggests you dynamically append a canvas to the document. Totally screwing up your nicely formatted blog.

Rioki has nice way to solve that issue.

First we need a canvas element:

<div>
    <canvas id="myCanvas" width="100%" style="background-color: #aaaaaa"></canvas>
</div>

I want a nice square canvas so I let the width go to 100% and use some Javascript to do the rest.

canvas.height = canvas.width  = canvas.clientWidth;

This code will set the canvas width and height to be the same. If you just set the clientHieght you get a square canvas but the viewport is off center. three.js must use these properties during the renderer.setViewport call.

View the source to see the gory details! Otherwise enjoy the spinny cube and I’m off to making more three.js blog posts.