HOW TO EMBED THREE.JS INTO SQUARESPACE

A simple guide by Eddie Lee and Edwon

Three.js is the magical 3D engine by Mr. Doob that allows you to make incredible 3D visualizations in any web browser that supports WebGL. I wanted to be able to make little three.js experiments and post them to my squarespace blog and use them as a background as well. After some struggle with setting it up I begged Eddie Lee of Funktronic Labs to figure out this little tech puzzle. After some hacking we got a simple step by step approach for getting three.js to run as a full screen background for your site, or constrained to a window in just one blog post. 

This has only been tested with Squarespace 7 and the "Avenue" and "Om" templates.

SETUP

[1] Download threejs locally to your computer:

Download the three.min.js file onto your computer (Right-Click and Save-As)

https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.min.js

[2] Upload the three.min.js file onto your squarespace

Follow this: http://answers.squarespace.com/questions/2080/where-do-i-upload-javascript-files

[3] Make your squarespace load: three.min.js file in the header

copy the following code to 

Settings (site wide settings) > Advanced > Code Injection > Header 

<script src="/s/three.min.js"></script>

TO EMBED THREE.JS INTO BLOG POST

On the blog post, make a Code Block.

Un-check "Display Source" and select "HTML".

Copy the following code into the Code Block.

<style>
    #blog-threejs canvas {
      /* force the canvas to fill out the entire area */
      width: 100%!important; height: 100%!important; 
      
      /* force the z-pos of the canvas to be on-top */
      z-index: 0; 
    }
</style>
<div id="blog-threejs"></div>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
  
    // this line adds threejs to the entire page, we don't want to do that
    // document.body.appendChild( renderer.domElement );
  
    // set the threejs to render onto the blog post's <div>
    document.getElementById("blog-threejs").appendChild( renderer.domElement ); 
  
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;
  
    // set default background color
    renderer.setClearColor( 0xffffff, 1);
  
    var render = function () 
    {
      requestAnimationFrame( render );

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
  
    render();
</script>

TO EMBED THREE.JS AS FULLSCREEN PAGE BACKGROUND

[1] Add a fullscreen canvas to a page

Screen Shot 2015-04-15 at 5.25.44 PM.png

Click on that little gear symbol to access the settings for your page. 

Copy the following code to

Advanced > Page Header Code Injection

<style>
    canvas { 
      /* force full-screen of threejs */
      width: 100%; height: 100%; 
      
      /* set position to fixed starting top-left of screen */
      /* fixed position causes the threejs to be stationary */
      position: fixed; top: 0px; left: 0px; 
      
      /* if you have other stuff on screen, you want to bring this threejs object behind it */
      z-index: -1; 
    }
  
  /* some themes may cause a fullscreen background color, so you want to set it transparent to be able to see the threejs */
  #canvas {
    background-color: transparent!important;
  }
</style>

[2] Add the three.js scene code to the page footer

Click on EDIT for the Footer Content of the page (not the site wide footer)

Make a new code block. Copy and paste the following code into it.

Un-check "Display Source" and select "HTML".

<script>
    var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
    };
render();
</script>

Source code is based on three.js example.