<three-canvas>

<three-canvas> is a set of custom elements for three.js.

Although three.js is a superb library which allows us to use WebGL very easier than itself, its way to use WebGL is procedural. IMHO the definition of a 3D scene should be declarative because we are not interested in how the scene is built but interested in what the scene is. By utilizing <three-canvas> you can define a 3D scene in declarative way.

After building a 3D scene declaratively, you can handle objects in the scene as you like by using three.js (See this tutorial.) Build a scene declaratively, use objects procedurally; I believe this is the best way to handle a 3D scene.

Sample

<html>
    <head>
      <script src="webcomponentsjs/webcomponents-lite.js"></script>
      <link rel="import" href="three-canvas/dist/three-canvas.html">
    </head>
    <body>
      <!-- Build a scene declaratively -->
      <three-canvas width="200" height="200" antialias="true" clear-color="#000000" default-light="true">
        <three-camera position="0,0,8" look-at="0,0,0" controls="orbit"></three-camera>
        <three-box name="box" width="1" height="1" depth="1" rotation="0.2,0.2,0" color="#ff0000"></three-box>
      </three-canvas>
      <!-- Use objects procedurally -->
      <button onclick="rotateBox()">Rotate a Box</button>
      <script>
        function rotateBox() {
          var threeCanvas = document.getElementsByTagName('three-canvas')[0];
          var threeJsMesh = threeCanvas.scene.getObjectByName('box');
          threeJsMesh.rotation.x += 0.1;
        }
      </script>
    </body>
  </html>

How to Use

Run the following command in your webapp directory.
```
$ bower install three-canvas
```

Add the following codes in the head section of your html file.

<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="three-canvas/dist/three-canvas.html">

Build your own 3D scene by looking at the tutorials.