صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
javascript
/
three.js
mirrorاز https://github.com/tazdij/three.js.git
2
0
انشعاب 0
پرونده‌ها مشکلات 0 ویکی
فهرست منبع

Slowing the animation and using more contrasting colors

fernandojsg 11 سال پیش
والد
9c4399aec0
کامیت
e20332a8b6
3فایلهای تغییر یافته به همراه10 افزوده شده و 9 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 5 5
      examples/js/crossfade/gui.js
  2. 4 3
      examples/js/crossfade/scenes.js
  3. 1 1
      examples/webgl_postprocessing_crossfade.html

+ 5 - 5
examples/js/crossfade/gui.js
مشاهده فایل 

@@ -1,7 +1,7 @@
 
 var transitionParams = {
 
 var transitionParams = {
 
 	"useTexture": true,
 
 	"useTexture": true,
 
 	"transition": 0.5,
 
 	"transition": 0.5,
 
-	"transitionSpeed": 2.5,
 
+	"transitionSpeed": 2.0,
 
 	"texture": 5,
 
 	"texture": 5,
 
 	"loopTexture": true,
 
 	"loopTexture": true,
 
 	"animateTransition": true,
 
 	"animateTransition": true,
 
@@ -26,14 +26,14 @@ function initGUI() {
 
 		
 		
 	}).listen();
 
 	}).listen();
 
 		
 		
-	gui.add(transitionParams, "textureThreshold", 0, 1, 0.01 ).onChange(function(value) {
 
+	gui.add(transitionParams, "textureThreshold", 0, 1, 0.01).onChange(function(value) {
 
 		
 		
 		transition.setTextureThreshold(value);
 
 		transition.setTextureThreshold(value);
 
 		
 		
 	});
 
 	});
 
 
 
 	gui.add(transitionParams, "animateTransition");
 
 	gui.add(transitionParams, "animateTransition");
 
-	gui.add(transitionParams, "transition", 0, 1, 0.01 ).listen();
 
-	gui.add(transitionParams, "transitionSpeed", 0.5, 5, 0.01 );
 
-
 
+	gui.add(transitionParams, "transition", 0, 1, 0.01).listen();
 
+	gui.add(transitionParams, "transitionSpeed", 0.5, 5, 0.01);
 
+	
 }
 
 }

+ 4 - 3
examples/js/crossfade/scenes.js
مشاهده فایل 

@@ -34,7 +34,7 @@ function generateGeometry(objectType, numObjects) {
 
 
 
 		var scale = new THREE.Vector3();
 
 		var scale = new THREE.Vector3();
 
 
 
-		var geom;
 
+		var geom, color=new THREE.Color();
 
 
 
 		scale.x = Math.random() * 200 + 100;
 
 		scale.x = Math.random() * 200 + 100;
 
 
 
@@ -43,15 +43,16 @@ function generateGeometry(objectType, numObjects) {
 
 			geom = new THREE.CubeGeometry( 1, 1, 1 );
 
 			geom = new THREE.CubeGeometry( 1, 1, 1 );
 
 			scale.y = Math.random() * 200 + 100;
 
 			scale.y = Math.random() * 200 + 100;
 
 			scale.z = Math.random() * 200 + 100;
 
 			scale.z = Math.random() * 200 + 100;
 
+			color.setRGB( 0, 0, Math.random()+0.1 );
 
 		}
 
 		}
 
 		else if ( objectType == "sphere" )
 
 		else if ( objectType == "sphere" )
 
 		{
 
 		{
 
 			geom = new THREE.IcosahedronGeometry( 1, 1 )
 
 			geom = new THREE.IcosahedronGeometry( 1, 1 )
 
 			scale.y = scale.z = scale.x;
 
 			scale.y = scale.z = scale.x;
 
+			color.setRGB( Math.random()+0.1, 0, 0 );
 
 		}
 
 		}
 
-
 
+		
 		// give the geom's vertices a random color, to be displayed
 
 		// give the geom's vertices a random color, to be displayed
 
-		var color = new THREE.Color( Math.random() * 0xffffff );
 
 		applyVertexColors( geom, color );
 
 		applyVertexColors( geom, color );
 
 
 
 		var cube = new THREE.Mesh( geom );
 
 		var cube = new THREE.Mesh( geom );

+ 1 - 1
examples/webgl_postprocessing_crossfade.html
مشاهده فایل 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - interactive cubes</title>
 
+		<title>three.js webgl - scenes transition</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>