examples/element_cube.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Threestrap - Basic Cube in DOM element</title>
  <script type="text/javascript" src="../vendor/three.js"></script>
  <script type="text/javascript" src="../build/threestrap.js"></script>
</head>
<body>
  <style type="text/css" media="screen">
    #three {
      width: 500px;
      height: 500px;
    }
  </style>
  <h1>Cube in a Div</h1>
  <div id="three"></div>
  <script>

    // Bootstrap into element
    var three = THREE.Bootstrap({
      plugins: ['core', 'stats'],
      element: document.querySelector('#three'),
    });

    // Insert a cube
    var mesh = new THREE.Mesh(new THREE.CubeGeometry(.5, .5, .5), new THREE.MeshNormalMaterial());
    three.scene.add(mesh);

    // Orbit the camera
    three.on('update', function () {
      var t = three.Time.now;
      three.camera.position.set(-Math.cos(t), Math.sin(t), Math.sin(t * .718));
      three.camera.lookAt(new THREE.Vector3());
    });

  </script>
</body>
</html>