|
|
@@ -7,18 +7,43 @@
|
|
|
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://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl - compressed textures -
|
|
|
+ leaf texture by <a href="http://opengameart.org/node/10505">lauris71</a>, explosion texture by <a href="http://opengameart.org/node/7728">bart</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
<script src="../build/three.min.js"></script>
|
|
|
|
|
|
+ <script src="js/Detector.js"></script>
|
|
|
+ <script src="js/Stats.js"></script>
|
|
|
+
|
|
|
<script>
|
|
|
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
var camera, scene, renderer;
|
|
|
- var mesh1, mesh2;
|
|
|
+ var meshes = [];
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
@@ -26,7 +51,7 @@
|
|
|
function init() {
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
- camera.position.z = 800;
|
|
|
+ camera.position.z = 1000;
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
@@ -39,21 +64,55 @@
|
|
|
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 );
|
|
|
+ var map3 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/hepatica_dxt3_mip.dds' );
|
|
|
+ map3.anisotropy = 4;
|
|
|
|
|
|
- mesh2 = new THREE.Mesh( geometry, material2 );
|
|
|
- mesh2.position.x = 200;
|
|
|
- scene.add( mesh2 );
|
|
|
+ var map4 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/explosion_dxt5_mip.dds' );
|
|
|
+ map4.anisotropy = 4;
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
+ var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
|
|
|
+ var material2 = new THREE.MeshBasicMaterial( { map: map2 } );
|
|
|
+ var material3 = new THREE.MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: THREE.DoubleSide } );
|
|
|
+ var material4 = new THREE.MeshBasicMaterial( { map: map4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
|
|
|
+
|
|
|
+ var mesh = new THREE.Mesh( geometry, 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 );
|
|
|
+
|
|
|
+ mesh = new THREE.Mesh( geometry, material4 );
|
|
|
+ mesh.position.x = -200;
|
|
|
+ mesh.position.y = 200;
|
|
|
+ scene.add( mesh );
|
|
|
+ meshes.push( mesh );
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ stats.domElement.style.zIndex = 100;
|
|
|
+ document.body.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ stats.domElement.children[ 0 ].children[ 0 ].style.color = "#777";
|
|
|
+ stats.domElement.children[ 0 ].style.background = "transparent";
|
|
|
+ stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
|
|
|
+
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
}
|
|
|
@@ -73,13 +132,16 @@
|
|
|
|
|
|
var time = Date.now() * 0.001;
|
|
|
|
|
|
- mesh1.rotation.x = time;
|
|
|
- mesh1.rotation.y = time;
|
|
|
+ for ( var i = 0; i < meshes.length; i ++ ) {
|
|
|
+
|
|
|
+ var mesh = meshes[ i ];
|
|
|
+ mesh.rotation.x = time;
|
|
|
+ mesh.rotation.y = time;
|
|
|
|
|
|
- mesh2.rotation.x = time;
|
|
|
- mesh2.rotation.y = time;
|
|
|
+ }
|
|
|
|
|
|
renderer.render( scene, camera );
|
|
|
+ stats.update();
|
|
|
|
|
|
}
|
|
|
|
alteredq