Added THREE.js integration example

kkxlkkxllb · May 22, 2013 · 61d1e2e · 61d1e2e
1 parent c1edefe
commit 61d1e2e
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/examples/img/three.jpg b/examples/img/three.jpg
diff --git a/examples/three.html b/examples/three.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+    <head>
+        <title>sketch.js &raquo; THREE.js Example</title>
+        <link rel="stylesheet" href="css/example.css">
+        <style type="text/css">
+            html, body {
+                background: #2b2b2b;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="container"></div>
+        <header class="info">
+            <hgroup class="about">
+                <h1>sketch.js &rsaquo; THREE</h1>
+                <h2>Using a THREE.js renderer context with sketch.js</h2>
+            </hgroup>
+            <nav class="more">
+                <a href="https://github.com/soulwire/sketch.js/archive/master.zip" target="_blank">Download</a>
+                <a href="https://github.com/soulwire/sketch.js" target="_blank">View on Github</a>
+            </nav>
+        </header>
+        <script src="https://raw.github.com/mrdoob/three.js/r58/build/three.min.js"></script>
+        <script src="../js/sketch.js"></script>
+        <script>
+
+        var camera, scene, geometry, material, mesh, renderer = new THREE.WebGLRenderer();
+
+        var demo = Sketch.create({
+
+            type: Sketch.WEBGL,
+
+            // Use existing element
+            element: renderer.domElement,
+
+            // Use existing context
+            context: renderer.context,
+
+            setup: function() {
+
+                camera = new THREE.PerspectiveCamera( 75, this.width / this.height, 1, 10000 );
+                camera.position.z = 1000;
+
+                scene = new THREE.Scene();
+
+                geometry = new THREE.CubeGeometry( 200, 200, 200 );
+                material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
+
+                mesh = new THREE.Mesh( geometry, material );
+                scene.add( mesh );
+            },
+
+            resize: function() {
+
+                camera.aspect = this.width / this.height;
+                camera.updateProjectionMatrix();
+
+                renderer.setSize( this.width, this.height );
+            },
+
+            draw: function() {
+
+                mesh.rotation.x += 0.01;
+                mesh.rotation.y += 0.02;
+
+                renderer.render( scene, camera );
+            }
+        });
+
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -45,6 +45,15 @@ <h3>Examples</h3>
                     <p>An example using sketch.js in WebGL mode</p>
                 </figcaption>
             </figure>
+            <figure>
+                <a href="examples/three.html" target="_blank">
+                    <img src="examples/img/three.jpg">
+                </a>
+                <figcaption>
+                    <strong>THREE.js</strong>
+                    <p>How to integrate sketch.js with THREE.js</p>
+                </figcaption>
+            </figure>
             <figure>
                 <a href="http://soulwire.github.com/Muscular-Hydrostats/" target="_blank">
                     <img src="examples/img/tentacles.jpg">