Главная Обзор Помощь
Регистрация Вход
samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Synced with mrdoob's materials branch.

Have to commit broken build (missing MeshDepthMaterial.js) as git doesn't want to proceed with new merge till the old one is not committed :(
alteredq 15 лет назад
Родитель
bfb8242928 98dc841aab
Сommit
b09308c238
20 измененных файлов с 347 добавлено и 248 удалено
Разделённый вид Показать статистику Diff
  1. 1 0
      build/Three.js
  2. 1 0
      build/ThreeDebug.js
  3. 2 1
      examples/camera_free.html
  4. 1 1
      examples/camera_orthographic.html
  5. 1 43
      examples/interactive_voxelpainter.html
  6. 2 1
      examples/lights_pointlights_gl.html
  7. 2 1
      examples/lights_test.html
  8. 263 0
      examples/materials_depth.html
  9. 2 1
      examples/materials_multimaterials.html
  10. 2 1
      examples/materials_shaders.html
  11. 2 1
      examples/obj_convert_test.html
  12. 2 1
      examples/test.html
  13. 4 4
      src/core/Matrix4.js
  14. 0 4
      src/materials/Material.js
  15. 4 0
      src/materials/textures/Texture.js
  16. 35 20
      src/renderers/CanvasRenderer.js
  17. 10 11
      src/renderers/Projector.js
  18. 0 155
      src/renderers/Renderer.js
  19. 6 0
      src/renderers/SVGRenderer.js
  20. 7 3
      utils/build.py

Разница между файлами не показана из-за своего большого размера
+ 1 - 0
build/Three.js


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
build/ThreeDebug.js


+ 2 - 1
examples/camera_free.html
Просмотреть файл 

@@ -42,12 +42,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 1 - 1
examples/camera_orthographic.html
Просмотреть файл 

@@ -42,7 +42,7 @@
 
 				container.appendChild( info );
 
 
 				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
 
+				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
 
 				camera.position.x = 200;
 
 				camera.position.y = 100;
 
 				camera.position.z = 200;

+ 1 - 43
examples/interactive_voxelpainter.html
Просмотреть файл 

@@ -14,49 +14,7 @@
 
 	</head>
 
 	<body>
 
 
-		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
-
 
-		<script type="text/javascript" src="../src/Three.js"></script>
 
-		<script type="text/javascript" src="../src/core/Color.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Ray.js"></script>
 
-		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face4.js"></script>
 
-		<script type="text/javascript" src="../src/core/UV.js"></script>
 
-		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 
-		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 
-		<script type="text/javascript" src="../src/lights/Light.js"></script>
 
-		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 
-		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 
-		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
-		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
-		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>

+ 2 - 1
examples/lights_pointlights_gl.html
Просмотреть файл 

@@ -68,12 +68,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/texture/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 2 - 1
examples/lights_test.html
Просмотреть файл 

@@ -68,13 +68,14 @@
 
 		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-        <script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 263 - 0
examples/materials_depth.html
Просмотреть файл 

@@ -0,0 +1,263 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - depth material</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
+
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var container;
 
+			var stats;
 
+
 
+			var camera;
 
+			var scene;
 
+			var renderer;
 
+
 
+			var cube, plane;
 
+
 
+			var targetRotation = 0;
 
+			var targetRotationOnMouseDown = 0;
 
+
 
+			var mouseX = 0;
 
+			var mouseXOnMouseDown = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			var moveForward = false,
 
+			moveBackwards = false,
 
+			moveUp = false,
 
+			moveDown = false,
 
+			moveLeft = false,
 
+			moveRight = false,
 
+
 
+			yawLeft = false,
 
+			yawRight = false,
 
+			pitchUp = false,
 
+			pitchDown = false,
 
+			rollLeft = false,
 
+			rollRight = false;
 
+
 
+			var debugContext;
 
+
 
+			init();
 
+			setInterval( loop, 1000 / 60 );
 
+			// loop();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
 
+				camera.position.x = 1000;
 
+				camera.position.y = 1000;
 
+				camera.position.z = 1000;
 
+				// camera.target.position.y = 150;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// Plane
 
+
 
+				var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
 
+
 
+				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 
+				plane.rotation.x = - 90 * ( Math.PI / 180 );
 
+				plane.doubleSided = true;
 
+				scene.addObject( plane );
 
+
 
+				// Spheres
 
+
 
+				geometry = new Sphere( 100, 16, 8 );
 
+				// material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
 
+				material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
+
 
+				for (var i = 0; i < 20; i ++ ) {
 
+
 
+					cube = new THREE.Mesh( geometry, material );
 
+					cube.overdraw = true;
 
+
 
+					cube.position.x = ( i % 5 ) * 200 - 400;
 
+					cube.position.z = Math.floor( i / 5 ) * 200 - 400;
 
+
 
+					/*
 
+					cube.position.x = Math.random() * 1000 - 500;
 
+					cube.position.y = Math.random() * 1000 - 500;
 
+					cube.position.z = Math.random() * 1000 - 500;
 
+
 
+					cube.rotation.x = Math.random() * 200 - 100;
 
+					cube.rotation.y = Math.random() * 200 - 100;
 
+					cube.rotation.z = Math.random() * 200 - 100;
 
+					cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
 
+					*/
 
+
 
+					scene.addObject(cube);
 
+
 
+				}
 
+
 
+				// Lights
 
+
 
+				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
 
+				scene.addLight( ambientLight );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
+				directionalLight.position.x = Math.random() - 0.5;
 
+				directionalLight.position.y = Math.random() - 0.5;
 
+				directionalLight.position.z = Math.random() - 0.5;
 
+				directionalLight.position.normalize();
 
+				scene.addLight( directionalLight );
 
+
 
+				var pointLight = new THREE.PointLight( 0xff0000, 1 );
 
+				scene.addLight( pointLight );
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				var debugCanvas = document.createElement( 'canvas' );
 
+				debugCanvas.width = 512;
 
+				debugCanvas.height = 512;
 
+				debugCanvas.style.position = 'absolute';
 
+				debugCanvas.style.top = '0px';
 
+				debugCanvas.style.left = '0px';
 
+
 
+				container.appendChild( debugCanvas );
 
+
 
+				debugContext = debugCanvas.getContext( '2d' );
 
+				debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
 
+				debugContext.strokeStyle = '#808080';
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild(stats.domElement);
 
+
 
+				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
+				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
+			}
 
+
 
+			function onDocumentKeyDown( event ) {
 
+
 
+				switch( event.keyCode ) {
 
+
 
+					case 38: moveForward = true; break; // up
 
+					case 40: moveBackwards = true; break; // down
 
+					case 37: moveLeft = true; break; // left
 
+					case 39: moveRight = true; break; // right
 
+					case 65: yawLeft = true; break; // a
 
+					case 68: yawRight = true; break; // d
 
+					case 87: moveUp/*pitchUp*/ = true; break; // w
 
+					case 83: moveDown/*pitchDown*/ = true; break; // s
 
+					case 90: rollLeft = true; break; // z
 
+					case 67: rollRight = true; break; // c
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onDocumentKeyUp( event ) {
 
+
 
+				switch( event.keyCode ) {
 
+
 
+					case 38: moveForward = false; break; // up
 
+					case 40: moveBackwards = false; break; // down
 
+					case 37: moveLeft = false; break; // left
 
+					case 39: moveRight = false; break; // right
 
+					case 65: yawLeft = false; break; // a
 
+					case 68: yawRight = false; break; // d
 
+					case 87: moveUp/*pitchUp*/ = false; break; // w
 
+					case 83: moveDown/*pitchDown*/ = false; break; // s
 
+					case 90: rollLeft = false; break; // z
 
+					case 67: rollRight = false; break; // c
 
+
 
+				}
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function loop() {
 
+
 
+				if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
 
+				if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
 
+
 
+				if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
 
+				if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
 
+
 
+				if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
 
+				if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
 
+
 
+				if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
 
+				if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
 
+
 
+				if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
 
+				if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
 
+
 
+				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 
+				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
+
 
+				debugContext.clearRect( -256, -256, 512, 512 );
 
+
 
+				debugContext.beginPath();
 
+
 
+				// center
 
+				debugContext.moveTo( -10, 0 );
 
+				debugContext.lineTo( 10, 0 );
 
+				debugContext.moveTo( 0, -10 );
 
+				debugContext.lineTo( 0, 10 );
 
+
 
+				// camera
 
+
 
+				debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
 
+				debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
 
+				debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
 
+				debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
 
+				debugContext.rect( - 50, - 50, 100, 100 );
 
+
 
+				for ( var i = 1; i < scene.objects.length; i++ ) {
 
+
 
+					var object = scene.objects[i];
 
+
 
+					/*
 
+					object.rotation.x += 0.01;
 
+					object.rotation.y += 0.005;
 
+					object.position.y = Math.sin( object.rotation.x ) * 200;
 
+					*/
 
+
 
+					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
 
+
 
+				}
 
+
 
+				debugContext.closePath();
 
+				debugContext.stroke();
 
+
 
+				renderer.render(scene, camera);
 
+
 
+				stats.update();
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 2 - 1
examples/materials_multimaterials.html
Просмотреть файл 

@@ -72,12 +72,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 2 - 1
examples/materials_shaders.html
Просмотреть файл 

@@ -70,13 +70,14 @@
 
 		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 2 - 1
examples/obj_convert_test.html
Просмотреть файл 

@@ -71,13 +71,14 @@
 
 		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-        <script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 2 - 1
examples/test.html
Просмотреть файл 

@@ -41,12 +41,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 4 - 4
src/core/Matrix4.js
Просмотреть файл 

@@ -55,13 +55,13 @@ THREE.Matrix4.prototype = {
 
 		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
 
 		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
 
 		this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
 
-		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.
 
-n44 = 1;
 
+		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
 
+
 
 	},
 
 
 	transform: function ( v ) {
 
 
-		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0;
 
+		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1;
 
 
 		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
 
 		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
 
@@ -69,7 +69,7 @@ n44 = 1;
 
 
 		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
 
 
-		if( v.w ) {
 
+		if ( v.w ) {
 
 
 			v.w = vw;

+ 0 - 4
src/materials/Material.js
Просмотреть файл 

@@ -3,10 +3,6 @@
 
  * }
 
  */
 
 
-THREE.UVMapping = 0;
 
-THREE.ReflectionMap = 1;
 
-THREE.CubeMap = 2;
 
-
 
 THREE.FlatShading = 0;
 
 THREE.GouraudShading = 1;
 
 THREE.PhongShading = 2;

+ 4 - 0
src/materials/Texture.js → src/materials/textures/Texture.js
Просмотреть файл 

@@ -18,3 +18,7 @@ THREE.Texture = function ( image, mapping ) {
 
 	};
 
 
 };
 
+
 
+THREE.UVMapping = 0;
 
+THREE.ReflectionMap = 1;
 
+THREE.CubeMap = 2;

+ 35 - 20
src/renderers/CanvasRenderer.js
Просмотреть файл 

@@ -26,6 +26,7 @@ THREE.CanvasRenderer = function () {
 
 	_ambientLight = new THREE.Color( 0xff000000 ),
 
 
 	_pi2 = Math.PI * 2,
 
+	_w, // z-buffer to w-buffer
 
 	_vector2 = new THREE.Vector2(), // Needed for expand
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 	_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
 
@@ -556,6 +557,11 @@ THREE.CanvasRenderer = function () {
 
 
 			_color.__styleString = material.color.__styleString;
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 			if ( _enableLighting ) {
 
@@ -652,6 +658,11 @@ THREE.CanvasRenderer = function () {
 
 
 			_color.__styleString = material.color.__styleString;
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 			if ( _enableLighting ) {
 
@@ -703,37 +714,41 @@ THREE.CanvasRenderer = function () {
 
 
 	}
 
 
-	function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1u, _uv1v, _uv2u, _uv2v, _uv3u, _uv3v ) {
 
+	function drawTexturedTriangle( bitmap, x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2 ) {
 
 
-		// Textured triangle drawing by Thatcher Ulrich.
 
-		// http://tulrich.com/geekstuff/canvas/jsgl.js
 
-
 
-		var denom, m11, m12, m21, m22, dx, dy;
 
+		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
 
 		_context.beginPath();
 
-		_context.moveTo( v1x, v1y );
 
-		_context.lineTo( v2x, v2y );
 
-		_context.lineTo( v3x, v3y );
 
-		_context.lineTo( v1x, v1y );
 
+		_context.moveTo( x0, y0 );
 
+		_context.lineTo( x1, y1 );
 
+		_context.lineTo( x2, y2 );
 
 		_context.closePath();
 
 
-		_context.save();
 
-		_context.clip();
 
+		x1 -= x0;
 
+		y1 -= y0;
 
+		x2 -= x0;
 
+		y2 -= y0;
 
+
 
+		u1 -= u0;
 
+		v1 -= v0;
 
+		u2 -= u0;
 
+		v2 -= v0;
 
 
-		denom = _uv1u * ( _uv3v - _uv2v ) - _uv2u * _uv3v + _uv3u * _uv2v + ( _uv2u - _uv3u ) * _uv1v;
 
+		var det = 1 / ( u1 * v2 - u2 * v1 ),
 
 
-		m11 = - ( _uv1v * (v3x - v2x ) - _uv2v * v3x + _uv3v * v2x + ( _uv2v - _uv3v ) * v1x ) / denom;
 
-		m12 = ( _uv2v * v3y + _uv1v * ( v2y - v3y ) - _uv3v * v2y + ( _uv3v - _uv2v) * v1y ) / denom;
 
-		m21 = ( _uv1u * ( v3x - v2x ) - _uv2u * v3x + _uv3u * v2x + ( _uv2u - _uv3u ) * v1x ) / denom;
 
-		m22 = - ( _uv2u * v3y + _uv1u * ( v2y - v3y ) - _uv3u * v2y + ( _uv3u - _uv2u ) * v1y ) / denom;
 
-		dx = ( _uv1u * ( _uv3v * v2x - _uv2v * v3x ) + _uv1v * ( _uv2u * v3x - _uv3u * v2x ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1x ) / denom;
 
-		dy = ( _uv1u * ( _uv3v * v2y - _uv2v * v3y ) + _uv1v * ( _uv2u * v3y - _uv3u * v2y ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1y ) / denom;
 
+		a = ( v2 * x1 - v1 * x2 ) * det,
 
+		b = ( v2 * y1 - v1 * y2 ) * det,
 
+		c = ( u1 * x2 - u2 * x1 ) * det,
 
+		d = ( u1 * y2 - u2 * y1 ) * det,
 
 
-		_context.transform( m11, m12, m21, m22, dx, dy );
 
+		e = x0 - a * u0 - c * v0,
 
+		f = y0 - b * u0 - d * v0;
 
 
+		_context.save();
 
+		_context.transform( a, b, c, d, e, f );
 
+		_context.clip();
 
 		_context.drawImage( bitmap, 0, 0 );
 
 		_context.restore();
 
-
 
 	}
 
 
 	// Hide anti-alias gaps

+ 10 - 11
src/renderers/Projector.js
Просмотреть файл 

@@ -186,7 +186,7 @@ THREE.Projector = function() {
 
 							_line.v1.copy( vertex.positionScreen );
 
 							_line.v2.copy( vertex2.positionScreen );
 
 
-							// TODO: Use centriums here too.
 
+							// TODO: Use centroids here too.
 
 							_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
 
 
 							_line.material = object.material;
 
@@ -203,24 +203,23 @@ THREE.Projector = function() {
 
 
 				_vector4.set( object.position.x, object.position.y, object.position.z, 1 );
 
 
-				camera.matrix.transform( _vector4 );
 
-				camera.projectionMatrix.transform( _vector4 );
 
+				_projScreenMatrix.transform( _vector4 );
 
 
-				object.screen.set( _vector4.x / _vector4.w, _vector4.y / _vector4.w, _vector4.z / _vector4.w );
 
+				_vector4.z /= _vector4.w;
 
 
-				if ( object.screen.z > 0 && object.screen.z < 1 ) {
 
+				if ( _vector4.z > 0 && _vector4.z < 1 ) {
 
 
 					_particle = _particlePool[ _particleCount ] = _particlePool[ _particleCount ] || new THREE.RenderableParticle();
 
-					_particle.x = object.screen.x;
 
-					_particle.y = object.screen.y;
 
-					_particle.z = object.screen.z;
 
+					_particle.x = _vector4.x / _vector4.w;
 
+					_particle.y = _vector4.y / _vector4.w;
 
+					_particle.z = _vector4.z;
 
 
 					_particle.rotation = object.rotation.z;
 
 
-					_particle.scale.x = object.scale.x * Math.abs( _vector4.x / _vector4.w - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
 
-					_particle.scale.y = object.scale.y * Math.abs( _vector4.y / _vector4.w - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
 
+					_particle.scale.x = object.scale.x * Math.abs( _particle.x - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
 
+					_particle.scale.y = object.scale.y * Math.abs( _particle.y - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
 
+
 
 					_particle.material = object.material;
 
-					_particle.color = object.color;
 
 
 					_renderList.push( _particle );

+ 0 - 155
src/renderers/Renderer.js
Просмотреть файл 

@@ -1,155 +0,0 @@
 
-var Renderer = Class.extend
 
-({
 
-	matrix: null,
 
-
 
-	viewport: null,
 
-	renderList: null,
 
-
 
-	face3Pool: null,
 
-	face4Pool: null,
 
-
 
-	width: null,
 
-	height: null,
 
-	widthHalf: null,
 
-	heightHalf: null,
 
-
 
-	init: function()
 
-	{
 
-		this.matrix = new Matrix4();
 
-
 
-		this.face3Pool = new Array();
 
-		this.face4Pool = new Array();
 
-	},
 
-
 
-	setSize: function( width, height )
 
-	{
 
-		this.width = width;
 
-		this.height = height;
 
-
 
-		this.widthHalf = this.width / 2;
 
-		this.heightHalf = this.height / 2;
 
-	},
 
-
 
-	sort: function(a, b)
 
-	{
 
-		return a.screen.z - b.screen.z;
 
-	},
 
-
 
-	render: function( scene, camera )
 
-	{
 
-		var vertex, face, object;
 
-		var face3count = 0, face4count = 0;
 
-
 
-		var focuszoom = camera.focus * camera.zoom;
 
-
 
-		var matrixMultiply = this.matrix.multiply;
 
-		var matrixTransform = this.matrix.transform;
 
-
 
-		this.renderList = new Array();
 
-
 
-		for (var i = 0; i < scene.objects.length; i++)
 
-		{
 
-			object = scene.objects[i];
 
-
 
-			if (object instanceof Mesh)
 
-			{
 
-				matrixMultiply( camera.matrix, object.matrix );
 
-
 
-				// vertices
 
-
 
-				for (var j = 0; j < object.geometry.vertices.length; j++)
 
-				{
 
-					vertex = object.geometry.vertices[j];
 
-
 
-					vertex.screen.copy( vertex );
 
-
 
-					matrixTransform( vertex.screen );
 
-
 
-					vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
 
-
 
-					vertex.visible = vertex.screen.z > 0;					
-
 
-					vertex.screen.x *= vertex.screen.z;
 
-					vertex.screen.y *= vertex.screen.z; 
-				}
 
-
 
-				// faces
 
-
 
-				for (j = 0; j < object.geometry.faces.length; j++)
 
-				{
 
-					face = object.geometry.faces[j];
 
-					
-					// TODO: Use normals for culling
 
-
 
-					if (face instanceof Face3)
 
-					{
 
-						if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
 
-						   (face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
-						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 
-						{
 
-							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
 
-							
-							if (this.face3Pool[face3count] == null)
 
-								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
 
-
 
-							this.face3Pool[face3count].a.screen.copy(face.a.screen);
 
-							this.face3Pool[face3count].b.screen.copy(face.b.screen);
 
-							this.face3Pool[face3count].c.screen.copy(face.c.screen);
 
-							this.face3Pool[face3count].screen.z = face.screen.z;
 
-							this.face3Pool[face3count].color = face.color;
 
-							this.face3Pool[face3count].material = object.material;
 
-
 
-							this.renderList.push( this.face3Pool[face3count] );
 
-
 
-							face3count++;
 
-						}
 
-					}
 
-					else if (face instanceof Face4)
 
-					{
 
-						if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
 
-						   ((face.d.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
-						   (face.d.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0 ||
 
-						   (face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
 
-						   (face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
 
-						{
 
-							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;
 
-
 
-							if (this.face4Pool[face4count] == null)
 
-								this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
 
-
 
-							this.face4Pool[face4count].a.screen.copy(face.a.screen);
 
-							this.face4Pool[face4count].b.screen.copy(face.b.screen);
 
-							this.face4Pool[face4count].c.screen.copy(face.c.screen);
 
-							this.face4Pool[face4count].d.screen.copy(face.d.screen);
 
-							this.face4Pool[face4count].screen.z = face.screen.z;
 
-							this.face4Pool[face4count].color = face.color;
 
-							this.face4Pool[face4count].material = object.material;
 
-
 
-							this.renderList.push( this.face4Pool[face4count] );
 
-
 
-							face4count++;
 
-						}						
-					}
 
-				}
 
-			}
 
-			else if (object instanceof Particle)
 
-			{
 
-				object.screen.copy(object.position);
 
-
 
-				camera.matrix.transform( object.screen );
 
-
 
-				object.screen.z = focuszoom / (camera.focus + object.screen.z);
 
-
 
-				if (object.screen.z < 0)
 
-					continue;					
-
 
-				object.screen.x *= object.screen.z;
 
-				object.screen.y *= object.screen.z;
 
-
 
-				this.renderList.push( object );
 
-			}
 
-		}
 
-
 
-		this.renderList.sort(this.sort);
 
-	}
 
-});

+ 6 - 0
src/renderers/SVGRenderer.js
Просмотреть файл 

@@ -16,6 +16,7 @@ THREE.SVGRenderer = function () {
 
 	_light = new THREE.Color( 0xffffffff ),
 
 	_ambientLight = new THREE.Color( 0xffffffff ),
 
 
+	_w, // z-buffer to w-buffer
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 
 	_svgPathPool = [], _svgCirclePool = [],
 
@@ -331,6 +332,11 @@ THREE.SVGRenderer = function () {
 
 
 			_color.__styleString = material.color.__styleString;
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 			if ( _enableLighting ) {

+ 7 - 3
utils/build.py
Просмотреть файл 

@@ -111,13 +111,14 @@ def buildFull(debug):
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
 		'materials/ParticleDOMMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'renderers/Projector.js',
 
 		'renderers/DOMRenderer.js',
 
@@ -163,12 +164,13 @@ def buildCanvas(debug):
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'renderers/Projector.js',
 
 		'renderers/CanvasRenderer.js',
 
@@ -211,12 +213,13 @@ def buildWebGL(debug):
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'renderers/WebGLRenderer.js',
 
 	]
 
@@ -254,6 +257,7 @@ def buildSVG(debug):
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',

Некоторые файлы не были показаны из-за большого количества измененных файлов

粤ICP备19079148号