added a demo.html

jeromeetienne · Feb 26, 2014 · 922cf3d · 922cf3d
1 parent b9c8005
commit 922cf3d
Show file tree

Hide file tree

Showing 13 changed files with 38,247 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Currently, the available events are
 
 
 Show Don't Tell
-===============
+=============== 
 * [examples/basic.html](http://jeromeetienne.github.io/threex.domevents/examples/basic.html)
 \[[view source](https://github.com/jeromeetienne/threex.domevents/blob/master/examples/basic.html)\] :
 It shows a simple usage of ```threex..

diff --git a/examples/basic.html b/examples/basic.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<script src='../../../vendor/three.js/build/three.min.js'></script>
+<script src='vendor/three.js/build/three-min.js'></script>
 <script src='../threex.domevents.js'></script>
 <body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script>
 	var renderer	= new THREE.WebGLRenderer()
@@ -18,7 +18,14 @@
 	var material	= new THREE.MeshNormalMaterial();
 	var mesh	= new THREE.Mesh( geometry, material );
 	scene.add( mesh );
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		init domEvents							//
+	//////////////////////////////////////////////////////////////////////////////////
 
+	var domEvents	= new THREEx.DomEvents(camera, renderer.domElement)
+
 	//////////////////////////////////////////////////////////////////////////////////
 	//		comment								//
 	//////////////////////////////////////////////////////////////////////////////////
@@ -28,6 +35,7 @@
 		console.log('you clicked on mesh', mesh)
 	}, false)
 
+
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Camera Controls							//
 	//////////////////////////////////////////////////////////////////////////////////

diff --git a/examples/bower_components/threex.suzanne/.bower.json b/examples/bower_components/threex.suzanne/.bower.json
@@ -0,0 +1,14 @@
+{
+  "name": "threex.suzanne",
+  "homepage": "https://github.com/jeromeetienne/threex.suzanne",
+  "_release": "70279fc543",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "70279fc54307b659c3e1c9085873f7603886cc7d"
+  },
+  "_source": "git://github.com/jeromeetienne/threex.suzanne.git",
+  "_target": "*",
+  "_originalSource": "threex.suzanne",
+  "_direct": true
+}
diff --git a/examples/bower_components/threex.suzanne/LICENSE b/examples/bower_components/threex.suzanne/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Jerome Etienne
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/examples/bower_components/threex.suzanne/Makefile b/examples/bower_components/threex.suzanne/Makefile
@@ -0,0 +1,10 @@
+# makefile to automatize simple operations
+
+server:
+	python -m SimpleHTTPServer
+
+deploy:
+	# assume there is something to commit
+	# use "git diff --exit-code HEAD" to know if there is something to commit
+	# so two lines: one if no commit, one if something to commit 
+	git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~
diff --git a/examples/bower_components/threex.suzanne/README.md b/examples/bower_components/threex.suzanne/README.md
@@ -0,0 +1,76 @@
+threex.suzanne
+==============
+
+It is a 
+[threex](http://jeromeetienne.github.io/threex/) extension 
+for 
+[three.js](http://threejs.org)
+which provide you a monkey model.
+This is the blender famous suzanne.
+
+Show Don't Tell
+===============
+* [examples/basic.html](http://jeromeetienne.github.io/threex.suzanne/examples/basic.html)
+\[[view source](https://github.com/jeromeetienne/threex.suzanne/blob/master/examples/basic.html)\] :
+It shows a basic usage of the extension.
+
+How To Install It
+=================
+
+You can install it via script tag
+
+```html
+<script src='threex.suzanne.js'></script>
+```
+
+Or you can install with [bower](http://bower.io/), as you wish.
+
+```bash
+bower install threex.suzanne
+```
+
+How To Use It
+=============
+
+### How to load the geometry ?
+
+```javascript
+new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
+	// this function is notified when the geometry is actually loaded
+
+	// geometry is a THREE.Geometry of suzanne model
+})
+```
+
+### How to create a mesh with it ?
+
+```javascript
+new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
+	// create a mesh with the geometry
+	var material	= new THREE.MeshNormalMaterial()
+	var mesh	= new THREE.Mesh( geometry, material )
+	// attach mesh to the scene
+	scene.add(mesh)
+})
+```
+
+Sometime it is not desirable to wait for the loading to complete before 
+adding the object to the scene. To avoid this, we create a container
+which will contains the model once loading is completed.
+Thanks to the scene graph inheritance, any position/quaternion/scale
+changes made on container, will be reported to the children meshes.
+
+```javascript
+// create the container
+var container	= new THREE.Object3D();
+// add the container to the scene without waiting the end of loading
+scene.add(container)
+// start to load the geometry
+new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
+	// create a mesh with it
+	var material	= new THREE.MeshNormalMaterial()
+	var mesh	= new THREE.Mesh( geometry, material )
+	// attach mesh to the container
+	container.add(mesh)
+})
+```
diff --git a/examples/bower_components/threex.suzanne/examples/basic.html b/examples/bower_components/threex.suzanne/examples/basic.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<script src='vendor/three.js/build/three.js'></script>
+<script src='../threex.suzanne.js'></script>
+<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script>
+	var renderer	= new THREE.WebGLRenderer();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	document.body.appendChild( renderer.domElement );
+
+	var updateFcts	= [];
+	var scene	= new THREE.Scene();
+	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
+	camera.position.z = 1.5;
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		comment								//
+	//////////////////////////////////////////////////////////////////////////////////
+
+	new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
+		// create a mesh with it
+		var material	= new THREE.MeshNormalMaterial()
+		var mesh	= new THREE.Mesh( geometry, material )
+		// attach mesh to the scene
+		scene.add(mesh)
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Camera Controls							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var mouse	= {x : 0, y : 0}
+	document.addEventListener('mousemove', function(event){
+		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
+		mouse.y	= (event.clientY / window.innerHeight) - 0.5
+	}, false)
+	updateFcts.push(function(delta, now){
+		camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
+		camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
+		camera.lookAt( scene.position )
+	})
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the scene						//
+	//////////////////////////////////////////////////////////////////////////////////
+	updateFcts.push(function(){
+		renderer.render( scene, camera );		
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		loop runner							//
+	//////////////////////////////////////////////////////////////////////////////////
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		updateFcts.forEach(function(updateFn){
+			updateFn(deltaMsec/1000, nowMsec/1000)
+		})
+	})
+</script></body>