Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

- ParticleBitmapMaterial.offset clearRect fixed
- Face4 with MeshBitmapMaterial gap fixed

Mr.doob 15 years ago
parent
217b1505a3
commit
5fe1f2a6d1
5 changed files with 35 additions and 189 deletions
Unified View Show Diff Stats
  1. 9 2
      README.md
  2. 0 0
      build/three.js
  3. 0 0
      build/three_debug.js
  4. 0 177
      examples/particles.html
  5. 26 10
      src/renderers/CanvasRenderer.js

+ 9 - 2
README.md
View File 

@@ -129,6 +129,15 @@ Thanks to the power of the internets (and github <3) these people have kindly he
 
 
 
 ### Change Log ###
 
 ### Change Log ###
 
 
 
+2010 07 23 - **r15** (32.440 kb)
 
+
 
+* Using new object `UV` instead of `Vector2` where it should be used
 
+* Added `Mesh.flipSided` boolean (false by default)
 
+* `CanvasRenderer` was handling UVs at 1,1 as bitmapWidth, bitmapHeight (instead of bitmapWidth - 1, bitmapHeight - 1)
 
+* `ParticleBitmapMaterial.offset` added
 
+* Fixed gap when rendering `Face4` with `MeshBitmapUVMappingMaterial`
 
+
 
+
 
 2010 07 17 - **r14** (32.144 kb)
 
 2010 07 17 - **r14** (32.144 kb)
 
 
 
 * Refactored `CanvasRenderer` (more duplicated code, but easier to handle)
 
 * Refactored `CanvasRenderer` (more duplicated code, but easier to handle)
 
@@ -141,8 +150,6 @@ Thanks to the power of the internets (and github <3) these people have kindly he
 
 * `FaceColorStrokeMaterial` > `MeshFaceColorStrokeMaterial`
 
 * `FaceColorStrokeMaterial` > `MeshFaceColorStrokeMaterial`
 
 * `ColorStrokeMaterial` > `LineColorMaterial`
 
 * `ColorStrokeMaterial` > `LineColorMaterial`
 
 * `Rectangle.instersects` returned false with rectangles with 0px witdh or height
 
 * `Rectangle.instersects` returned false with rectangles with 0px witdh or height
 
-* Using new object `UV` instead of `Vector2` where it should be used
 
-* Added Mesh.flipSided boolean (false by default)
 
 
 
 
 
 2010 07 12 - **r13** (29.492 kb)
 
 2010 07 12 - **r13** (29.492 kb)

File diff suppressed because it is too large
+ 0 - 0
build/three.js


File diff suppressed because it is too large
+ 0 - 0
build/three_debug.js


+ 0 - 177
examples/particles.html
View File 

@@ -1,177 +0,0 @@
 
-<!DOCTYPE HTML>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js - particles - random</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
-		<style type="text/css">
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
-		<script type="text/javascript" src="http://github.com/mrdoob/tween.js/raw/master/build/tween.js"></script>
 
-
 
-		<script type="text/javascript" src="../build/three.js"></script>
 
-
 
-		<script type="text/javascript">
 
-
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
-
 
-			var stats;
 
-			var container;
 
-
 
-			var particles, particle;
 
-
 
-			var camera;
 
-			var scene;
 
-			var renderer;
 
-
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-
 
-			init();
 
-			setInterval(loop, 1000 / 60);
 
-
 
-			function init() {
 
-
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
-
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
-
 
-				for (var i = 0; i < 500; i++) {
 
-
 
-					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( Math.random() * 0xff0000, 1 ) );
 
-					particle.position.x = Math.random() * 2000 - 1000;
 
-					particle.position.y = Math.random() * 2000 - 1000;
 
-					particle.position.z = Math.random() * 2000 - 1000;
 
-					particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
 
-					scene.add(particle);
 
-				}
 
-
 
-				var material = loadTexture( 'textures/Tree_01.png' );
 
-				material.offset.y = 219;
 
-
 
-				particles = [];
 
-
 
-				for (var i = 0; i < 10; i++) {
 
-
 
-					particles[ i ] = particle = new THREE.Particle( material );
 
-					particle.position.x = Math.random() * 2000 - 1000;
 
-					// particle.position.y = Math.random() * 2000 - 1000;
 
-					particle.position.z = Math.random() * 2000 - 1000;
 
-					// particle.rotation.z = 90 * Math.PI / 180;
 
-					particle.scale.x = particle.scale.y = Math.random();
 
-					// particle.scale.y = 0;
 
-					scene.add(particle);
 
-
 
-					// new TWEEN.Tween( particle.rotation ).to( 1, { z: Math.random() + 1 } );
 
-					new TWEEN.Tween( particle.scale ).to( 1, { x: Math.random() + 1, y: Math.random() + 1 } );
 
-
 
-				}
 
-
 
-				container.appendChild(renderer.domElement);
 
-
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild(stats.domElement);
 
-
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-				document.addEventListener('touchstart', onDocumentTouchStart, false);
 
-				document.addEventListener('touchmove', onDocumentTouchMove, false);
 
-			}
 
-
 
-			function loadTexture( path ) {
 
-
 
-				var material = new THREE.ParticleBitmapMaterial();
 
-
 
-				var texture = new Image();
 
-
 
-				texture.onload = function () {
 
-
 
-					material.bitmap = this;
 
-
 
-				};
 
-
 
-				texture.src = path;
 
-
 
-				return material;
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseMove(event) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-			}
 
-
 
-			function onDocumentTouchStart(event) {
 
-
 
-				if(event.touches.length == 1) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[0].pageX - windowHalfX;
 
-					mouseY = event.touches[0].pageY - windowHalfY;
 
-				}
 
-			}
 
-
 
-			function onDocumentTouchMove(event) {
 
-
 
-				if(event.touches.length == 1) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[0].pageX - windowHalfX;
 
-					mouseY = event.touches[0].pageY - windowHalfY;
 
-				}
 
-			}
 
-
 
-			//
 
-
 
-			function loop() {
 
-
 
-				TWEEN_MANAGER.update();
 
-
 
-				camera.position.x += (mouseX - camera.position.x) * .05;
 
-				camera.position.y += (-mouseY - camera.position.y) * .05;
 
-
 
-				/*
 
-				for ( var i = 0, l = particles.length; i < l; i ++ ) {
 
-
 
-					particles[ i ].rotation.z += 0.01;
 
-
 
-				}
 
-				*/
 
-
 
-				renderer.render(scene, camera);
 
-
 
-				stats.update();
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 26 - 10
src/renderers/CanvasRenderer.js
View File 

@@ -12,7 +12,10 @@ THREE.CanvasRenderer = function () {
 
 	_clipRect = new THREE.Rectangle(),
 
 	_clipRect = new THREE.Rectangle(),
 
 	_clearRect = new THREE.Rectangle( 0, 0, 0, 0 ),
 
 	_clearRect = new THREE.Rectangle( 0, 0, 0, 0 ),
 
 	_bboxRect = new THREE.Rectangle(),
 
 	_bboxRect = new THREE.Rectangle(),
 
-	_vector2 = new THREE.Vector2();
 
+	_vector2 = new THREE.Vector2(),
 
+
 
+	v5 = new THREE.Vector2(), v6 = new THREE.Vector2(),
 
+	uv1 = new THREE.UV(), uv2 = new THREE.UV(), uv3 = new THREE.UV(), uv4 = new THREE.UV();
 
 
 
 	this.domElement = _canvas;
 
 	this.domElement = _canvas;
 
 	this.autoClear = true;
 
 	this.autoClear = true;
 
@@ -43,9 +46,8 @@ THREE.CanvasRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
 	this.render = function ( scene, camera ) {
 
 
 
 		var e, el, m, ml, element, material, pi2 = Math.PI * 2,
 
 		var e, el, m, ml, element, material, pi2 = Math.PI * 2,
 
-		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, width, height, scaleX, scaleY,
 
-
 
-		uv1 = new THREE.UV(), uv2 = new THREE.UV(), uv3 = new THREE.UV(), uv4 = new THREE.UV(),
 
+		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y,
 
+		width, height, scaleX, scaleY, offsetX, offsetY,
 
 		bitmap, bitmapWidth, bitmapHeight;
 
 		bitmap, bitmapWidth, bitmapHeight;
 
 
 
 		if ( this.autoClear ) {
 
 		if ( this.autoClear ) {
 
@@ -114,9 +116,12 @@ THREE.CanvasRenderer = function () {
 
 						width = scaleX * bitmapWidth;
 
 						width = scaleX * bitmapWidth;
 
 						height = scaleY * bitmapHeight;
 
 						height = scaleY * bitmapHeight;
 
 
 
-						// TODO: Rotations, offset break this...
 
+						offsetX = material.offset.x * scaleX;
 
+						offsetY = material.offset.y * scaleY;
 
 
 
-						_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
 
+						// TODO: Rotations break this...
 
+
 
+						_bboxRect.set( v1x + offsetX - width, v1y + offsetY - height, v1x + offsetX + width, v1y + offsetY + height );
 
 
 
 						if ( !_clipRect.instersects( _bboxRect ) ) {
 
 						if ( !_clipRect.instersects( _bboxRect ) ) {
 
 
 
@@ -326,20 +331,31 @@ THREE.CanvasRenderer = function () {
 
 				element.v3.x *= _widthHalf; element.v3.y *= _heightHalf;
 
 				element.v3.x *= _widthHalf; element.v3.y *= _heightHalf;
 
 				element.v4.x *= _widthHalf; element.v4.y *= _heightHalf;
 
 				element.v4.x *= _widthHalf; element.v4.y *= _heightHalf;
 
 
 
+				v5.copy( element.v2 ); v6.copy( element.v4 );
 
+
 
 				if ( element.overdraw ) {
 
 				if ( element.overdraw ) {
 
 
 
 					expand( element.v1, element.v2 );
 
 					expand( element.v1, element.v2 );
 
-					expand( element.v2, element.v3 );
 
-					expand( element.v3, element.v4 );
 
+					expand( element.v2, element.v4 );
 
 					expand( element.v4, element.v1 );
 
 					expand( element.v4, element.v1 );
 
 
 
 				}
 
 				}
 
 
 
 				v1x = element.v1.x; v1y = element.v1.y;
 
 				v1x = element.v1.x; v1y = element.v1.y;
 
 				v2x = element.v2.x; v2y = element.v2.y;
 
 				v2x = element.v2.x; v2y = element.v2.y;
 
-				v3x = element.v3.x; v3y = element.v3.y;
 
 				v4x = element.v4.x; v4y = element.v4.y;
 
 				v4x = element.v4.x; v4y = element.v4.y;
 
 
 
+				if ( element.overdraw ) {
 
+
 
+					expand( element.v3, v5 );
 
+					expand( element.v3, v6 );
 
+
 
+				}
 
+
 
+				v3x = element.v3.x; v3y = element.v3.y;
 
+				v5x = v5.x; v5y = v5.y;
 
+				v6x = v6.x; v6y = v6.y;
 
+
 
 				_bboxRect.addPoint( v1x, v1y );
 
 				_bboxRect.addPoint( v1x, v1y );
 
 				_bboxRect.addPoint( v2x, v2y );
 
 				_bboxRect.addPoint( v2x, v2y );
 
 				_bboxRect.addPoint( v3x, v3y );
 
 				_bboxRect.addPoint( v3x, v3y );
 
@@ -456,7 +472,7 @@ THREE.CanvasRenderer = function () {
 
 						uv4.u *= bitmapWidth; uv4.v *= bitmapHeight;
 
 						uv4.u *= bitmapWidth; uv4.v *= bitmapHeight;
 
 
 
 						drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, uv1.u, uv1.v, uv2.u, uv2.v, uv4.u, uv4.v );
 
 						drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, uv1.u, uv1.v, uv2.u, uv2.v, uv4.u, uv4.v );
 
-						drawTexturedTriangle( bitmap, v2x, v2y, v3x, v3y, v4x, v4y, uv2.u, uv2.v, uv3.u, uv3.v, uv4.u, uv4.v );
 
+						drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, uv2.u, uv2.v, uv3.u, uv3.v, uv4.u, uv4.v );
 
 
 
 					}
 
 					}

Some files were not shown because too many files changed in this diff