首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

- Fixed opacity being set to zero when null
- Added (mandatory) video example
- Restructured examples folder

Mr.doob 15 年之前
父节点
ff72c6b766
当前提交
4af8f5406b
共有 19 个文件被更改，包括 179 次插入 和 13 次删除
合并视图 显示文件统计
  1. 0 0
      build/three.js
  2. 4 2
      examples/geometry_cube.html
  3. 2 3
      examples/geometry_vr.html
  4. 167 0
      examples/materials_video.html
  5. 1 4
      examples/particles_floor.html
  6. 1 1
      examples/particles_random.html
  7. 2 1
      examples/particles_waves.html
  8. 0 0
      examples/primitives/Cube.js
  9. 0 0
      examples/primitives/Cylinder.js
  10. 0 0
      examples/primitives/Plane.js
  11. 二进制
      examples/textures/sintel.mp4
  12. 0 0
      examples/textures/skymap_back1024.jpg
  13. 0 0
      examples/textures/skymap_bottom1024.jpg
  14. 0 0
      examples/textures/skymap_front1024.jpg
  15. 0 0
      examples/textures/skymap_left1024.jpg
  16. 0 0
      examples/textures/skymap_right1024.jpg
  17. 0 0
      examples/textures/skymap_top1024.jpg
  18. 1 1
      src/materials/ColorFillMaterial.js
  19. 1 1
      src/materials/ColorStrokeMaterial.js

文件差异内容过多而无法显示
+ 0 - 0
build/three.js


+ 4 - 2
examples/geometry/cube.html → examples/geometry_cube.html
查看文件 

@@ -3,7 +3,7 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js - geometry - cube</title>
 
 		<title>three.js - geometry - cube</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>		
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
 				font-family: Monospace;
 
 				font-family: Monospace;
 
@@ -15,7 +15,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<script type="text/javascript" src="../../build/three.js"></script>
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
 
 
 		<script type="text/javascript" src="primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
@@ -145,6 +145,7 @@
 
 
 
 					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
 					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
 					targetRotationOnMouseDown = targetRotation;
 
 					targetRotationOnMouseDown = targetRotation;
 
+
 
 				}
 
 				}
 
 			}
 
 			}
 
 
 
@@ -156,6 +157,7 @@
 
 
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					mouseX = event.touches[0].pageX - windowHalfX;
 
 					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
 					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
+
 
 				}
 
 				}
 
 			}
 
 			}

+ 2 - 3
examples/geometry/vr.html → examples/geometry_vr.html
查看文件 

@@ -30,7 +30,7 @@
 
 		<div id="container"></div> 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
 
 
-		<script type="text/javascript" src="../../build/three.js"></script>
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -52,7 +52,7 @@
 
 
 
 				var container, mesh;
 
 				var container, mesh;
 
 
 
-				container = document.getElementById('container');
 
+				container = document.getElementById( 'container' );
 
 
 
 				camera = new THREE.Camera();
 
 				camera = new THREE.Camera();
 
 				camera.focus = 300;
 
 				camera.focus = 300;
 
@@ -211,6 +211,5 @@
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>
 
-
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 167 - 0
examples/materials_video.html
查看文件 

@@ -0,0 +1,167 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - geometry - cube</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 {
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
+
 
+		<script type="text/javascript" src="primitives/Plane.js"></script>
 
+
 
+		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+			var AMOUNT = 100;
 
+
 
+			var container, stats;
 
+
 
+			var camera, scene, renderer;
 
+
 
+			var video, texture, textureContext,
 
+			textureReflection, textureReflectionContext, textureReflectionGradient;
 
+
 
+			var mesh;
 
+
 
+			var mouseX = 0;
 
+			var mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth >> 1;
 
+			var windowHalfY = window.innerHeight >> 1;
 
+
 
+
 
+			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
+			init();
 
+			setInterval(loop, 1000/60);
 
+
 
+
 
+			function init() {
 
+
 
+				container = document.createElement('div');
 
+				document.body.appendChild(container);
 
+
 
+				camera = new THREE.Camera(0, 0, 500);
 
+				camera.focus = 300;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				video = document.createElement( 'video' );
 
+				video.src = 'textures/sintel.mp4';
 
+				video.loop = 'loop';
 
+				video.play();
 
+
 
+				// 
+
 
+				texture = document.createElement( 'canvas' );
 
+				texture.width = 480;
 
+				texture.height = 204;
 
+
 
+				textureContext = texture.getContext( '2d' );
 
+				textureContext.fillStyle = '#000000';
 
+				textureContext.fillRect( 0, 0, 480, 204 );
 
+
 
+				var material = new THREE.BitmapUVMappingMaterial( texture );
 
+
 
+				textureReflection = document.createElement( 'canvas' );
 
+				textureReflection.width = 480;
 
+				textureReflection.height = 204;
 
+
 
+				textureReflectionContext = textureReflection.getContext( '2d' );
 
+				textureReflectionContext.fillStyle = '#000000';
 
+				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
+
 
+				textureReflectionGradient = textureReflectionContext.createLinearGradient( 0, 0, 0, 204 );
 
+				textureReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
 
+				textureReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
 
+
 
+				var materialReflection = new THREE.BitmapUVMappingMaterial( textureReflection );
 
+
 
+				//
 
+
 
+				var plane = new Plane( 480, 204, 4, 4 );
 
+
 
+				mesh = new THREE.Mesh( plane, material );
 
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 
+				scene.add(mesh);
 
+
 
+				mesh = new THREE.Mesh( plane, materialReflection );
 
+				mesh.position.y = -306;
 
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 
+				mesh.rotation.x = 180 * Math.PI / 180;
 
+				mesh.doubleSided = true;
 
+				scene.add(mesh);
 
+
 
+				//
 
+
 
+				var separation = 150;
 
+				var amountx = 10;
 
+				var amounty = 10;
 
+
 
+				var material = new THREE.ColorFillMaterial(0x808080);
 
+
 
+				for (var ix = 0; ix < amountx; ix++) {
 
+
 
+					for(var iy = 0; iy < amounty; iy++) {
 
+
 
+						particle = new THREE.Particle( material );
 
+						particle.position.x = ix * separation - ((amountx * separation) / 2);
 
+						particle.position.y = -153
 
+						particle.position.z = iy * separation - ((amounty * separation) / 2);
 
+						scene.add( particle );
 
+					}
 
+				}
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
+
 
+				container.appendChild(renderer.domElement);
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild(stats.domElement);
 
+
 
+			}
 
+
 
+			function onDocumentMouseMove(event) {
 
+
 
+				mouseX = (event.clientX - windowHalfX);
 
+				mouseY = (event.clientY - windowHalfY) * .2;
 
+
 
+			}
 
+
 
+			function loop() {
 
+
 
+				camera.position.x += (mouseX - camera.position.x) * .05;
 
+				camera.position.y += (-mouseY - camera.position.y) * .05;
 
+
 
+				textureContext.drawImage( video, 0, 0 );
 
+
 
+				textureReflectionContext.drawImage( texture, 0, 0 );
 
+				textureReflectionContext.fillStyle = textureReflectionGradient;
 
+				textureReflectionContext.fillRect(0, 0, 480, 204);
 
+
 
+				renderer.render(scene, camera);
 
+				stats.update();
 
+
 
+			}
 
+
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 1 - 4
examples/particles/floor.html → examples/particles_floor.html
查看文件 

@@ -18,8 +18,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<script type="text/javascript" src="../../build/three.js"></script>
 
-
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
 		<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/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
@@ -62,8 +61,6 @@
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
 
 
-				particles = new Array();
 
-
 
 				var material = new THREE.ColorFillMaterial(0xffffff, 1);
 
 				var material = new THREE.ColorFillMaterial(0xffffff, 1);
 
 
 
 				for (var ix = 0; ix < AMOUNTX; ix++) {
 
 				for (var ix = 0; ix < AMOUNTX; ix++) {

+ 1 - 1
examples/particles/random.html → examples/particles_random.html
查看文件 

@@ -18,7 +18,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<script type="text/javascript" src="../../build/three.js"></script>
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
 
 
 		<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/stats.js/raw/master/build/stats.js"></script>

+ 2 - 1
examples/particles/waves.html → examples/particles_waves.html
查看文件 

@@ -10,13 +10,14 @@
 
 				margin: 0px;
 
 				margin: 0px;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
 			}
 
 			}
 
+
 
 			a {
 
 			a {
 
 				color:#0078ff;
 
 				color:#0078ff;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<script type="text/javascript" src="../../build/three.js"></script>
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
 		<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/stats.js/raw/master/build/stats.js"></script>
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">

+ 0 - 0
examples/geometry/primitives/Cube.js → examples/primitives/Cube.js
查看文件


+ 0 - 0
examples/geometry/primitives/Cylinder.js → examples/primitives/Cylinder.js
查看文件


+ 0 - 0
examples/geometry/primitives/Plane.js → examples/primitives/Plane.js
查看文件


二进制
examples/textures/sintel.mp4
查看文件


+ 0 - 0
examples/geometry/textures/skymap_back1024.jpg → examples/textures/skymap_back1024.jpg
查看文件


+ 0 - 0
examples/geometry/textures/skymap_bottom1024.jpg → examples/textures/skymap_bottom1024.jpg
查看文件


+ 0 - 0
examples/geometry/textures/skymap_front1024.jpg → examples/textures/skymap_front1024.jpg
查看文件


+ 0 - 0
examples/geometry/textures/skymap_left1024.jpg → examples/textures/skymap_left1024.jpg
查看文件


+ 0 - 0
examples/geometry/textures/skymap_right1024.jpg → examples/textures/skymap_right1024.jpg
查看文件


+ 0 - 0
examples/geometry/textures/skymap_top1024.jpg → examples/textures/skymap_top1024.jpg
查看文件


+ 1 - 1
src/materials/ColorFillMaterial.js
查看文件 

@@ -4,7 +4,7 @@
 
 

 

 THREE.ColorFillMaterial = function ( hex, opacity ) {

 THREE.ColorFillMaterial = function ( hex, opacity ) {

 

 

-	this.color = new THREE.Color( ( opacity !== null ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );

+	this.color = new THREE.Color( ( opacity != null ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );

 

 

 	this.toString = function () {

 	this.toString = function () {

+ 1 - 1
src/materials/ColorStrokeMaterial.js
查看文件 

@@ -5,7 +5,7 @@
 
 THREE.ColorStrokeMaterial = function ( lineWidth, hex, opacity ) {

 THREE.ColorStrokeMaterial = function ( lineWidth, hex, opacity ) {

 

 

 	this.lineWidth = lineWidth || 1;

 	this.lineWidth = lineWidth || 1;

-	this.color = new THREE.Color( ( opacity !== null ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );

+	this.color = new THREE.Color( ( opacity != null ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );

 

 

 	this.toString = function () {

 	this.toString = function () {

部分文件因为文件数量过多而无法显示