Advertisement
Guest User

Untitled

a guest
Nov 10th, 2013
1,483
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src="http://threejs.org/build/three.min.js"></script>
  2. <script>
  3. var camera, scene, renderer, mesh;
  4.  
  5. function init() {
  6.     renderer = new THREE.WebGLRenderer( { antialias: true } );
  7.     renderer.setSize( window.innerWidth, window.innerHeight );
  8.     document.body.appendChild( renderer.domElement )
  9.  
  10.     camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  11.     camera.position.z = 400;
  12.  
  13.     scene = new THREE.Scene();
  14.    
  15.     var materials = [];
  16.     var geometry = new THREE.PlaneGeometry( 400, 400, 10, 10 );
  17.     geometry.faceVertexUvs[0] = [];
  18.  
  19.     for(var i = 0; i < geometry.faces.length; i++){      
  20.         geometry.faceVertexUvs[0].push(
  21.         [
  22.             new THREE.Vector2( 0, 0 ),
  23.             new THREE.Vector2( 0, 1 ),
  24.             new THREE.Vector2( 1, 1 ),    
  25.             new THREE.Vector2( 1, 0 ),    
  26.         ] );
  27.                      
  28.         geometry.faces[i].materialIndex = i;
  29.         materials.push( createTexture( i ) );
  30.     }    
  31.    
  32.     geometry.computeFaceNormals();
  33.     geometry.dynamic = true;
  34.     geometry.uvsNeedUpdate = true; 
  35.  
  36.     mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
  37.     mesh.rotation.set( 0, Math.PI, Math.PI );
  38.     scene.add( mesh );
  39.  
  40.     window.addEventListener( "resize", onWindowResize, false );
  41. }
  42.  
  43. function onWindowResize() {
  44.     camera.aspect = window.innerWidth / window.innerHeight;
  45.     camera.updateProjectionMatrix();
  46.     renderer.setSize( window.innerWidth, window.innerHeight );
  47. }
  48.  
  49. function animate() {
  50.     requestAnimationFrame( animate );
  51.     mesh.rotation.x += 0.005;
  52.     renderer.render( scene, camera );
  53. }
  54.  
  55. function createTexture( number ) {
  56.     var material = new THREE.MeshBasicMaterial({
  57.         map: THREE.ImageUtils.loadTexture( "/map/04.jpg" ),
  58.         side: THREE.DoubleSide,
  59.         wireframe: false
  60.     });
  61.     material.transparent = true;
  62.    
  63.     return material;
  64. }
  65.  
  66. function createCssStyle() {
  67.     document.body.style.width = "100%";
  68.     document.body.style.height = "100%";
  69.     document.body.style.margin = 0;
  70.     document.body.style.padding = 0;
  71.     document.querySelector( "canvas" ).style.display = "block";
  72. }
  73.  
  74. function createWebGL() {
  75.     init();
  76.     animate();
  77.     createCssStyle();
  78. }
  79.  
  80. window.onload = createWebGL;
  81.  
  82. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement