Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

merged

  • Loading branch information...
commit b11949718efd97783e59de19039e95d677d1a911 2 parents af91788 + 94e068e
authored July 04, 2012
3  README.md
Source Rendered
... ...
@@ -0,0 +1,3 @@
  1
+# See Live Examples
  2
+
  3
+[from here](http://yomotsu.github.com/threejs-examples/)
13  index.html
@@ -8,6 +8,12 @@
8 8
 html{
9 9
 	font-size:16px;
10 10
 	font-family: 'Dosis', sans-serif;
  11
+<<<<<<< HEAD
  12
+=======
  13
+}
  14
+html,
  15
+.contents a{
  16
+>>>>>>> gh-pages
11 17
 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAANCAAAAACBJWHFAAAAk0lEQVQIHQXBwWEAMQgDMPZftU0wGBPofSpZcnV6qrxGt1bPwJvfu6yU546rDcFNviN4rba87I548/WPr4rsvtbIjsyQEIqmy15eMNHf9LkV6LHYcY8p1tt7ME8WVcRGMRVJJWmEa9tRSJ+/vlHmXHV8OMge9OBYSpmh8VJXB5/bxq0o5P4BBBGfzQgPGtYQ+cutf1ga3nO49mrYAAAAAElFTkSuQmCC);
12 18
 }
13 19
 body{
@@ -119,7 +125,10 @@
119 125
 	display:block;
120 126
 	position:relative;
121 127
 	z-index:3;
  128
+<<<<<<< HEAD
122 129
 	background:url(_bg.png);
  130
+=======
  131
+>>>>>>> gh-pages
123 132
 	-webkit-transform:translate3d(0, 0, 0);
124 133
 	   -moz-transform:translate3d(0, 0, 0);
125 134
 	    -ms-transform:translate3d(0, 0, 0);
@@ -230,7 +239,11 @@
230 239
 <header>
231 240
 	<nav>
232 241
 		<ul>
  242
+<<<<<<< HEAD
233 243
 			<li><a href="github.com/yomotsu/">github</a></li>
  244
+=======
  245
+			<li><a href="http://github.com/yomotsu/">github</a></li>
  246
+>>>>>>> gh-pages
234 247
 			<li><a href="http://twitter.com/yomotsu/">twitter</a></li>
235 248
 			<li><a href="http://yomotsu.net">blog</a></li>
236 249
 			<li><a href="http://www.pxgrid.com">PixelGrid</a></li>
8  lib/Stats.js
... ...
@@ -0,0 +1,8 @@
  1
+// stats.js r8 - http://github.com/mrdoob/stats.js
  2
+var Stats=function(){var h,a,n=0,o=0,i=Date.now(),u=i,p=i,l=0,q=1E3,r=0,e,j,f,b=[[16,16,48],[0,255,255]],m=0,s=1E3,t=0,d,k,g,c=[[16,48,16],[0,255,0]];h=document.createElement("div");h.style.cursor="pointer";h.style.width="80px";h.style.opacity="0.9";h.style.zIndex="10001";h.addEventListener("mousedown",function(a){a.preventDefault();n=(n+1)%2;n==0?(e.style.display="block",d.style.display="none"):(e.style.display="none",d.style.display="block")},!1);e=document.createElement("div");e.style.textAlign=
  3
+"left";e.style.lineHeight="1.2em";e.style.backgroundColor="rgb("+Math.floor(b[0][0]/2)+","+Math.floor(b[0][1]/2)+","+Math.floor(b[0][2]/2)+")";e.style.padding="0 0 3px 3px";h.appendChild(e);j=document.createElement("div");j.style.fontFamily="Helvetica, Arial, sans-serif";j.style.fontSize="9px";j.style.color="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";j.style.fontWeight="bold";j.innerHTML="FPS";e.appendChild(j);f=document.createElement("div");f.style.position="relative";f.style.width="74px";f.style.height=
  4
+"30px";f.style.backgroundColor="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";for(e.appendChild(f);f.children.length<74;)a=document.createElement("span"),a.style.width="1px",a.style.height="30px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+b[0][0]+","+b[0][1]+","+b[0][2]+")",f.appendChild(a);d=document.createElement("div");d.style.textAlign="left";d.style.lineHeight="1.2em";d.style.backgroundColor="rgb("+Math.floor(c[0][0]/2)+","+Math.floor(c[0][1]/2)+","+Math.floor(c[0][2]/2)+")";d.style.padding=
  5
+"0 0 3px 3px";d.style.display="none";h.appendChild(d);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.fontSize="9px";k.style.color="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";k.style.fontWeight="bold";k.innerHTML="MS";d.appendChild(k);g=document.createElement("div");g.style.position="relative";g.style.width="74px";g.style.height="30px";g.style.backgroundColor="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";for(d.appendChild(g);g.children.length<74;)a=document.createElement("span"),
  6
+a.style.width="1px",a.style.height=Math.random()*30+"px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+c[0][0]+","+c[0][1]+","+c[0][2]+")",g.appendChild(a);return{domElement:h,update:function(){i=Date.now();m=i-u;s=Math.min(s,m);t=Math.max(t,m);k.textContent=m+" MS ("+s+"-"+t+")";var a=Math.min(30,30-m/200*30);g.appendChild(g.firstChild).style.height=a+"px";u=i;o++;if(i>p+1E3)l=Math.round(o*1E3/(i-p)),q=Math.min(q,l),r=Math.max(r,l),j.textContent=l+" FPS ("+q+"-"+r+")",a=Math.min(30,30-l/
  7
+100*30),f.appendChild(f.firstChild).style.height=a+"px",p=i,o=0}}};
  8
+
300  physijs_tetris/index.html
... ...
@@ -0,0 +1,300 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+<title>Tetris w/ THREE.js and Physijs</title>
  5
+<style>
  6
+body{
  7
+	margin:0;
  8
+	padding:0;
  9
+	overflow:hidden;
  10
+}
  11
+.info{
  12
+	color:#fff;
  13
+	font-family:Helvetica, Arial, sans-serif;
  14
+	position:absolute;
  15
+	top:60px;
  16
+	left:0;
  17
+	z-index:10;
  18
+	padding:10px;
  19
+	background:rgba(0,0,0,.7);
  20
+}
  21
+</style>
  22
+<script src="../lib/Three_r49.js"></script>
  23
+<script src="../lib/Stats.js"></script>
  24
+<script src="physi.js"></script>
  25
+<script>
  26
+window.addEventListener( 'DOMContentLoaded', function(){
  27
+	Physijs.scripts.worker = 'physijs_worker.js';
  28
+	Physijs.scripts.ammo = 'ammo.js';
  29
+	var activeMesh = null;
  30
+	var activeMeshAxis = 0;
  31
+	
  32
+	var width = window.innerWidth;
  33
+	var height = window.innerHeight;
  34
+	
  35
+	var scene = new Physijs.Scene; // instead of "new THREE.Scene()"
  36
+	
  37
+	var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
  38
+	camera.position.set( 30, 30, 180 );
  39
+	//camera.lookAt( scene.position );
  40
+	camera.lookAt(new THREE.Vector3(0, 50, 0));
  41
+	scene.add( camera );
  42
+	
  43
+	var renderer = new THREE.WebGLRenderer({ antialias: true });
  44
+	renderer.setSize( width, height );
  45
+	renderer.shadowMapEnabled = true;
  46
+	renderer.shadowMapSoft = true;
  47
+	document.body.appendChild( renderer.domElement );
  48
+		
  49
+	var stats = new Stats();
  50
+	stats.domElement.style.position = 'absolute';
  51
+	stats.domElement.style.top = '0px';
  52
+	stats.domElement.style.zIndex = 100;
  53
+	document.body.appendChild( stats.domElement );
  54
+
  55
+	var light = new THREE.DirectionalLight( 0xFFFFFF );
  56
+	light.position.set( 20, 40, 15 );
  57
+	light.target.position.copy( scene.position );
  58
+	light.castShadow = true;
  59
+	light.shadowCameraLeft = -60;
  60
+	light.shadowCameraTop = -60;
  61
+	light.shadowCameraRight = 60;
  62
+	light.shadowCameraBottom = 60;
  63
+	light.shadowCameraNear = 20;
  64
+	light.shadowCameraFar = 200;
  65
+	light.shadowBias = -.0001
  66
+	light.shadowMapWidth = light.shadowMapHeight = 2048;
  67
+	light.shadowDarkness = .7;
  68
+	scene.add( light );
  69
+		
  70
+	// Ground
  71
+	var ground_material = Physijs.createMaterial(
  72
+		new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'bg.jpg' ) }),
  73
+		1.0, // high friction
  74
+		1.0 // low restitution
  75
+	);
  76
+	ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
  77
+	ground_material.map.repeat.set( 3, 3 );
  78
+	
  79
+	var ground = new Physijs.BoxMesh(
  80
+		new THREE.CubeGeometry(100, 1, 100),
  81
+		ground_material,
  82
+		0 // mass
  83
+	);
  84
+	ground.receiveShadow = true;
  85
+	scene.add( ground );
  86
+	
  87
+	render();
  88
+	createBlock();
  89
+	document.addEventListener('keypress',function(e){
  90
+		console.log(e.keyCode)
  91
+		if(e.keyCode === 32 && !!activeMesh){ //Space key
  92
+			e.preventDefault();
  93
+			activeMesh.position.x += activeMeshAxis;
  94
+			activeMesh.rotation.z += 90 * Math.PI / 180;
  95
+			activeMesh.__dirtyPosition = true;
  96
+			activeMesh.__dirtyRotation = true;
  97
+		} else if(e.keyCode === 97){ //A key
  98
+			e.preventDefault();
  99
+			activeMesh.position.x -= 5;
  100
+			activeMesh.__dirtyPosition = true;
  101
+		} else if(e.keyCode === 100){ //D key
  102
+			e.preventDefault();
  103
+			activeMesh.position.x += 5;
  104
+			activeMesh.__dirtyPosition = true;
  105
+		}
  106
+	},false);
  107
+	
  108
+	function createBlock(){
  109
+		var blocks =[
  110
+		
  111
+			//l-tetromino
  112
+			function(){
  113
+				var material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
  114
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 5, 20, 5 ), material );
  115
+				
  116
+				parent.position.set(0,100,0)
  117
+				parent.castShadow = true;
  118
+				scene.add( parent );
  119
+				activeMesh = parent;
  120
+				
  121
+				var active = true;
  122
+				parent.addEventListener( 'collision', function() {
  123
+					if(active){
  124
+						active = false;
  125
+						createBlock();
  126
+					}
  127
+				});
  128
+			},
  129
+			
  130
+			//O-tetromino
  131
+			function(){
  132
+				var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
  133
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 10, 5 ), material );
  134
+				
  135
+				parent.position.set(2.5,100,0)
  136
+				parent.castShadow = true;
  137
+				scene.add( parent );
  138
+				activeMesh = parent;
  139
+				
  140
+				var active = true;
  141
+				parent.addEventListener( 'collision', function() {
  142
+					if(active){
  143
+						active = false;
  144
+						createBlock();
  145
+					}
  146
+				});
  147
+			},
  148
+			
  149
+			//T-tetromino
  150
+			function(){
  151
+				var material = new THREE.MeshLambertMaterial({ color: 0xff00ff });
  152
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 15, 5, 5 ), material );
  153
+				var child1 = new Physijs.BoxMesh( new THREE.CubeGeometry( 5, 5, 5 ), material );
  154
+				child1.position.set( 0, -5, 0 );
  155
+				child1.castShadow = true;
  156
+				parent.add( child1 );
  157
+				
  158
+				parent.position.set(0,100,0)
  159
+				parent.castShadow = true;
  160
+				scene.add( parent );
  161
+				activeMesh = parent;
  162
+				
  163
+				var active = true;
  164
+				parent.addEventListener( 'collision', function() {
  165
+					if(active){
  166
+						active = false;
  167
+						createBlock();
  168
+					}
  169
+				});
  170
+			},
  171
+			
  172
+			//J-tetromino
  173
+			function(){
  174
+				var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
  175
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  176
+				var child1 = new Physijs.BoxMesh( new THREE.CubeGeometry( 5, 10, 5 ), material );
  177
+				child1.position.set( 7.5, 2.5, 0 );
  178
+				child1.castShadow = true;
  179
+				parent.add( child1 );
  180
+				
  181
+				parent.position.set(2.5,100,0)
  182
+				parent.castShadow = true;
  183
+				scene.add( parent );
  184
+				activeMesh = parent;
  185
+				
  186
+				var active = true;
  187
+				parent.addEventListener( 'collision', function() {
  188
+					if(active){
  189
+						active = false;
  190
+						activeMesh = null;
  191
+						createBlock();
  192
+					}
  193
+				});
  194
+			},
  195
+			
  196
+			//L-tetromino
  197
+			function(){
  198
+				var material = new THREE.MeshLambertMaterial({ color: 0xff9900 });
  199
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  200
+				var child1 = new Physijs.BoxMesh( new THREE.CubeGeometry( 5, 10, 5 ), material );
  201
+				child1.position.set( -7.5, 2.5, 0 );
  202
+				child1.castShadow = true;
  203
+				parent.add( child1 );
  204
+				
  205
+				parent.position.set(2.5,100,0)
  206
+				parent.castShadow = true;
  207
+				scene.add( parent );
  208
+				activeMesh = parent;
  209
+				
  210
+				var active = true;
  211
+				parent.addEventListener( 'collision', function() {
  212
+					if(active){
  213
+						active = false;
  214
+						activeMesh = null;
  215
+						createBlock();
  216
+					}
  217
+				});
  218
+			},
  219
+			
  220
+			//S-tetromino
  221
+			function(){
  222
+				var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  223
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  224
+				var child1 = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  225
+				child1.position.set( -5, 5, 0 );
  226
+				child1.castShadow = true;
  227
+				parent.add( child1 );
  228
+				
  229
+				parent.position.set(2.5,100,0)
  230
+				parent.castShadow = true;
  231
+				scene.add( parent );
  232
+				activeMesh = parent;
  233
+				
  234
+				var active = true;
  235
+				parent.addEventListener( 'collision', function() {
  236
+					if(active){
  237
+						active = false;
  238
+						activeMesh = null;
  239
+						createBlock();
  240
+					}
  241
+				});
  242
+			},
  243
+			
  244
+			//Z-tetromino
  245
+			function(){
  246
+				var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
  247
+				var parent = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  248
+				var child1 = new Physijs.BoxMesh( new THREE.CubeGeometry( 10, 5, 5 ), material );
  249
+				child1.position.set( -5, -5, 0 );
  250
+				child1.castShadow = true;
  251
+				parent.add( child1 );
  252
+				
  253
+				parent.position.set(2.5,100,0)
  254
+				parent.castShadow = true;
  255
+				scene.add( parent );
  256
+				activeMesh = parent;
  257
+				
  258
+				var active = true;
  259
+				parent.addEventListener( 'collision', function() {
  260
+					if(active){
  261
+						active = false;
  262
+						activeMesh = null;
  263
+						createBlock();
  264
+					}
  265
+				});
  266
+			},
  267
+		];
  268
+		
  269
+		var rand = Math.floor (Math.random () * blocks.length);
  270
+		blocks[rand]();
  271
+	}
  272
+	
  273
+	function checkBottom(){
  274
+		if(activeMesh && activeMesh.position.y < -30){
  275
+			active = false;
  276
+			activeMesh = null;
  277
+			createBlock();
  278
+		}
  279
+	}
  280
+	
  281
+	function render() {
  282
+		scene.simulate(undefined, 2);
  283
+		renderer.render( scene, camera);
  284
+		stats.update();
  285
+		checkBottom();
  286
+		requestAnimationFrame( render );
  287
+	};
  288
+	
  289
+}, false);
  290
+</script>
  291
+</head>
  292
+<body>
  293
+<div class="info">
  294
+[A] key : to move left<br>
  295
+[D] key : to move right<br>
  296
+[Space] key : to rotate
  297
+</div>
  298
+
  299
+</body>
  300
+</html>

0 notes on commit b119497

Please sign in to comment.
Something went wrong with that request. Please try again.