javascript
/
three.js
mirrorاز https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - materials - compressed textures</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0px;
            background-color: #050505;
            color: #fff;
            overflow: hidden;
        }

        a { color: #e00 }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            z-index:1000;
        }
    </style>
</head>
<body>

<div id="info">
    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - compressed KTX textures -
    <a href="http://opengameart.org/node/10505">Khronos Texture</a> is a lightweight file format for OpenGL
</div>

<script src="../build/three.js"></script>
<script src="js/loaders/KTXLoader.js"></script>

<script src="js/Detector.js"></script>

<script>

	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

	var camera, scene, renderer;
	var meshes = [];

	init();
	animate();

	function init() {

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

		scene = new THREE.Scene();

		var geometry = new THREE.BoxGeometry( 200, 200, 200 );

		/*
        This is how compressed textures are supposed to be used:

        DXT1 - RGB - opaque textures
        DXT3 - RGBA - transparent textures with sharp alpha transitions
        DXT5 - RGBA - transparent textures with full alpha range
        */

		var loader = new THREE.KTXLoader();

		var map1 = loader.load( 'textures/compressed/disturb_rgb.ktx' );

		var map2 = loader.load( 'textures/compressed/disturb_rgba.ktx' );

		// TODO: fix cubemap support in disturb_cube.ktx
		var cubemap = loader.load( 'textures/compressed/disturb_rgb.ktx', function ( texture ) {
			texture.magFilter = THREE.LinearFilter;
			texture.minFilter = THREE.LinearFilter;
			texture.mapping = THREE.CubeReflectionMapping;
		} );

		var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
		var material2 = new THREE.MeshBasicMaterial( { map: map1 } );
		var material3 = new THREE.MeshBasicMaterial( { map: map2, alphaTest: 0.5, side: THREE.DoubleSide } );


		var mesh = new THREE.Mesh( new THREE.TorusGeometry( 100, 50, 32, 16 ), material1 );
		mesh.position.x = -200;
		mesh.position.y = -200;
		scene.add( mesh );
		meshes.push( mesh );

		mesh = new THREE.Mesh( geometry, material2 );
		mesh.position.x = -200;
		mesh.position.y = 200;
		scene.add( mesh );
		meshes.push( mesh );

		mesh = new THREE.Mesh( geometry, material3 );
		mesh.position.x = 200;
		mesh.position.y = 200;
		scene.add( mesh );
		meshes.push( mesh );


		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
		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;

		for ( var i = 0; i < meshes.length; i ++ ) {

			var mesh = meshes[ i ];
			mesh.rotation.x = time;
			mesh.rotation.y = time;

		}

		renderer.render( scene, camera );

	}

</script>

</body>
</html>