samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - materials - compressed textures</title>
		<meta charset="utf-8">
		<style>
			body {
				margin: 0px;
				background-color: #050505;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="../build/three.min.js"></script>

		<script>

			var camera, scene, renderer;
			var mesh1, mesh2;

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.z = 800;

				scene = new THREE.Scene();

				geometry = new THREE.CubeGeometry( 200, 200, 200 );

				var map1 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/disturb_dxt1_nomip.dds' );
				map1.minFilter = map1.magFilter = THREE.LinearFilter;
				map1.anisotropy = 4;

				var map2 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/disturb_dxt1_mip.dds' );
				map2.anisotropy = 4;

				var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
				var material2 = new THREE.MeshBasicMaterial( { map: map2 } );

				mesh1 = new THREE.Mesh( geometry, material1 );
				mesh1.position.x = -200;
				scene.add( mesh1 );

				mesh2 = new THREE.Mesh( geometry, material2 );
				mesh2.position.x = 200;
				scene.add( mesh2 );

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				var time = Date.now() * 0.001;

				mesh1.rotation.x = time;
				mesh1.rotation.y = time;

				mesh2.rotation.x = time;
				mesh2.rotation.y = time;

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>