Ana Sayfa Keşfet Yardım
Giriş Yap
javascript
/
three.js
şunun yansıması https://github.com/tazdij/three.js.git
2
0
Çatalla 0
Dosyalar Sorunlar 0 Wiki
Kaynağa Gözat

Docs: Improved viewer.

Mr.doob 9 yıl önce
ebeveyn
fe99089d53
işleme
982b28f5ad
3 değiştirilmiş dosya ile 64 ekleme ve 61 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 34 33
      docs/scenes/bones-browser.html
  2. 2 1
      docs/scenes/geometry-browser.html
  3. 28 27
      docs/scenes/material-browser.html

+ 34 - 33
docs/scenes/bones-browser.html
Dosyayı Görüntüle 

@@ -10,7 +10,7 @@
 
 				font-weight: normal;
 
 				font-style: normal;
 
 			}
 
-			
+
 
 			body {
 
 				margin:0;
 
 				font-family: 'inconsolata';
 
@@ -18,9 +18,9 @@
 
 				line-height: 18px;
 
 				overflow: hidden;
 
 			}
 
-			
+
 
 			canvas { width: 100%; height: 100% }
 
-			
+
 
 			#newWindow {
 
 				display: block;
 
 				position: absolute;
 
@@ -31,13 +31,13 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		
+
 
 		<a id='newWindow' href='./bones-browser.html' target='_blank'>Open in New Window</a>
 
-		
+
 
 		<script src="../../build/three.min.js"></script>
 
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
 
-		
+
 
 		<script>
 
 
 			var gui, scene, camera, renderer, orbit, ambientLight, lights, mesh, bones, skeletonHelper;
 
@@ -57,6 +57,7 @@
 
 				camera.position.y = 30;
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );				
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
@@ -155,9 +156,9 @@
 
 
 				var mesh = new THREE.SkinnedMesh( geometry,	material );
 
 				var skeleton = new THREE.Skeleton( bones );
 
-	
+
 
 				mesh.add( bones[ 0 ] );
 
-	
+
 
 				mesh.bind( skeleton );
 
 
 				skeletonHelper = new THREE.SkeletonHelper( mesh );
 
@@ -165,27 +166,27 @@
 
 				scene.add( skeletonHelper );
 
 
 				return mesh;
 
-	
+
 
 			};
 
 
 			function setupDatGui () {
 
-	
+
 
 				var folder = gui.addFolder( "General Options" );
 
-	
+
 
 				folder.add( state, "animateBones" );
 
 				folder.__controllers[ 0 ].name( "Animate Bones" );
 
 
 				folder.add( mesh, "pose" );
 
 				folder.__controllers[ 1 ].name( ".pose()" );
 
-	
+
 
 				var bones = mesh.skeleton.bones;
 
-	
+
 
 				for ( var i = 0; i < bones.length; i ++ ) {
 
-		
+
 
 					var bone = bones[ i ];
 
-		
+
 
 					folder = gui.addFolder( "Bone " + i );
 
-	
+
 
 					folder.add( bone.position, 'x', -10 + bone.position.x, 10 + bone.position.x );
 
 					folder.add( bone.position, 'y', -10 + bone.position.y, 10 + bone.position.y );
 
 					folder.add( bone.position, 'z', -10 + bone.position.z, 10 + bone.position.z );
 
@@ -193,7 +194,7 @@
 
 					folder.add( bone.rotation, 'x', -Math.PI * 0.5, Math.PI * 0.5 );
 
 					folder.add( bone.rotation, 'y', -Math.PI * 0.5, Math.PI * 0.5 );
 
 					folder.add( bone.rotation, 'z', -Math.PI * 0.5, Math.PI * 0.5 );
 
-		
+
 
 					folder.add( bone.scale, 'x', 0, 2 );
 
 					folder.add( bone.scale, 'y', 0, 2 );
 
 					folder.add( bone.scale, 'z', 0, 2 );
 
@@ -201,21 +202,21 @@
 
 					folder.__controllers[ 0 ].name( "position.x" );
 
 					folder.__controllers[ 1 ].name( "position.y" );
 
 					folder.__controllers[ 2 ].name( "position.z" );
 
-		
+
 
 					folder.__controllers[ 3 ].name( "rotation.x" );
 
 					folder.__controllers[ 4 ].name( "rotation.y" );
 
 					folder.__controllers[ 5 ].name( "rotation.z" );
 
-		
+
 
 					folder.__controllers[ 6 ].name( "scale.x" );
 
 					folder.__controllers[ 7 ].name( "scale.y" );
 
 					folder.__controllers[ 8 ].name( "scale.z" );
 
-		
+
 
 				}
 
-				
+
 
 			}
 
 
 			function initBones () {
 
-	
+
 
 				var segmentHeight = 8;
 
 				var segmentCount = 4;
 
 				var height = segmentHeight * segmentCount;
 
@@ -238,34 +239,34 @@
 
 			};
 
 
 			function render () {
 
-	
+
 
 				requestAnimationFrame( render );
 
 
 				var time = Date.now() * 0.001;
 
-	
+
 
 				var bone = mesh;
 
 
-	
+
 
 				//Wiggle the bones
 
 				if ( state.animateBones ) {
 
-		
+
 
 					for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {
 
-		
+
 
 						mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
 
-		
+
 
 					}
 
-		
+
 
 				}
 
 
 				skeletonHelper.update();
 
-	
+
 
 				renderer.render( scene, camera );
 
-	
+
 
 			};
 
 
 			initScene();
 
 			render();
 
-			
+
 
 		</script>
 
 	</body>
 
-</html>
 
+</html>

+ 2 - 1
docs/scenes/geometry-browser.html
Dosyayı Görüntüle 

@@ -59,7 +59,8 @@
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
 
 			camera.position.z = 30;
 
 
-			var renderer = new THREE.WebGLRenderer({antialias: true});
 
+			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );			
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			document.body.appendChild( renderer.domElement );

+ 28 - 27
docs/scenes/material-browser.html
Dosyayı Görüntüle 

@@ -10,7 +10,7 @@
 
 				font-weight: normal;
 
 				font-style: normal;
 
 			}
 
-			
+
 
 			body {
 
 				margin:0;
 
 				font-family: 'inconsolata';
 
@@ -18,9 +18,9 @@
 
 				line-height: 18px;
 
 				overflow: hidden;
 
 			}
 
-			
+
 
 			canvas { width: 100%; height: 100% }
 
-			
+
 
 			#newWindow {
 
 				display: block;
 
 				position: absolute;
 
@@ -31,23 +31,24 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		
+
 
 		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
 
-		
+
 
 		<script src="../../build/three.min.js"></script>
 
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 
 		<script src='js/material.js'></script>
 
-		
+
 
 		<script>
 
-			
+
 
 			document.getElementById('newWindow').href += window.location.hash;
 
-			
+
 
 			var gui = new dat.GUI();
 
 			var scene = new THREE.Scene();
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
 
 			camera.position.z = 30;
 
-			
-			var renderer = new THREE.WebGLRenderer();
 
+
 
+			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			document.body.appendChild( renderer.domElement );
 
 
@@ -58,7 +59,7 @@
 
 			lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
 
 			lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
 
 			lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
 
-			
+
 
 			lights[0].position.set( 0, 200, 0 );
 
 			lights[1].position.set( 100, 200, 100 );
 
 			lights[2].position.set( -100, -200, -100 );
 
@@ -71,54 +72,54 @@
 
 
 			var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
 
 			var mesh = new THREE.Mesh( geometry );
 
-			
+
 
 			generateVertexColors( geometry );
 
-			
+
 
 			mesh.material = chooseFromHash( gui, mesh, geometry );
 
 
 			generateMorphTargets( mesh, geometry );
 
 
 			scene.add( mesh );
 
-			
+
 
 			var prevFog = false;
 
-			
+
 
 			var render = function () {
 
-				
+
 
 				requestAnimationFrame( render );
 
 
 				var time = Date.now() * 0.001;
 
 
 				mesh.rotation.x += 0.005;
 
 				mesh.rotation.y += 0.005;
 
-				
+
 
 				if ( prevFog !== scene.fog ) {
 
-					
+
 
 					mesh.material.needsUpdate = true;
 
 					prevFog = scene.fog;
 
-					
+
 
 				}
 
-				
+
 
 				if ( mesh.morphTargetInfluences ) {
 
-					
+
 
 					mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
 
-					
+
 
 				}
 
 
 				renderer.render( scene, camera );
 
-				
+
 
 			};
 
-			
+
 
 			window.addEventListener( 'resize', function () {
 
-				
+
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				
+
 
 			}, false );
 
 
 			render();
 
-			
+
 
 		</script>
 
 	</body>
 
 </html>