Jekyll with Three.js

[ threejs webgl javascript jekyll teapot-explotion ] 06 Feb 2017

Here is an example of embedding three.js and dat.gui on a Jekyll blog. It is working after a few attempts.

Demo

You can CLICK on the canvas to explode the teapot. Number of teapots and the tessellation level of them can be modifed via the GUI elements on the top right corner.

How?

Essentially, Jekyll is a tool to parse pre-defined styles, scripts and texts, and build static website out of these pieces. Three.js and dat.gui are perfectly static, and parsable for Jekyll. So, why not?

Canvas holder

In order for the canvas to be located on a specific position of the blog, like other blog components, a canvas holder is needed to hold the canvas. Therefore, all elements in the blog are displayed in a correct order. This is a little bit different from other demos of three.js, because in most cases, or examples, the three.js canvas is the whole screen.

Another role of the canvas holder is to place the dat.gui interface as well. We don’t want the default location of dat.gui (right top corner of the whole page).

Dat.gui holder

This div element is used for holding the dat.gui, in order for manipulate the location of the GUI easier.

The combination of canvas holder and dat.gui holder can be specified like this:

<style>
  canvas { width: inherit; position: relative; top: 0;}
</style>
<div id='canvas-holder' style="position: relative; width: inherit;">
  <div id="dat-gui-holder" style="position: absolute; top: 0em; right: 0em; z-index: 1;"></div>
</div>

The dat.gui holder has two interesting style definitions:

position:absolute places the GUI at fixed location relative to the parent.
z-index:1 places the GUI on top of the canvas, aka overlay.

You might noticed the additional style definition for canvas. Basically, it forces the actual rendered canvas to be the same size of the canvas holder.

Scripts

The auto placement of dat.gui should be turned off when it is initialized. It is highly inspired by this example.

var gui = new dat.GUI( { autoPlace: false } );
// Definition of GUI elements goes here
document.getElementById('dat-gui-holder').appendChild(gui.domElement);

In addition, the canvas is put inside canvas holder :

var canvasHolder = document.getElementById('canvas-holder');
// Apply your desired aspect ratio
var width = canvasHolder.clientWidth;
var height = width * 0.8;
canvasHolder.clientHeight = height;
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
canvasHolder.appendChild( renderer.domElement );

Finally

Blogs should be COOL.

Thanks!

Migration to Jekyll

[ jekyll wordpress blog markdown hyde ] 04 Feb 2017

I have used wordpress.com for blogging and hosting. After a few month of using it, I decided to migrate my personal blog to Jekyll and host it using Github pages. There are several reasons behind that:

Wordpress page takes a while to load.
Wordpress.com is charged.
Writing Markdown is essentially easier for me, as a programmer.
There are more restrictions on Wordpress than on Jekyll, or, it takes more effort to work around Wordpress than with Jekyll.

As a programmer, these reasons were sufficient for such a decision. I picked the popular theme hyde as my basic theme, and customized the style a little bit.

And here it is!

Long Qian