SHARE
TWEET

Untitled

a guest May 22nd, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <title>Repeating Textures (Three.js)</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.     <link rel=stylesheet href="css/base.css"/>
  8. </head>
  9. <body>
  10.  
  11. <script src="js/Three.js"></script>
  12. <script src="js/Detector.js"></script>
  13. <script src="js/Stats.js"></script>
  14. <script src="js/OrbitControls.js"></script>
  15. <script src="js/THREEx.KeyboardState.js"></script>
  16. <script src="js/THREEx.FullScreen.js"></script>
  17. <script src="js/THREEx.WindowResize.js"></script>
  18.  
  19. <!-- jQuery code to display an information button and box when clicked. -->
  20. <script src="js/jquery-1.9.1.js"></script>
  21. <script src="js/jquery-ui.js"></script>
  22. <link rel=stylesheet href="css/jquery-ui.css" />
  23. <link rel=stylesheet href="css/info.css"/>
  24. <script src="js/info.js"></script>
  25. <div id="infoButton"></div>
  26. <div id="infoBox" title="Demo Information">
  27. This three.js demo is part of a collection at
  28. <a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a>
  29. </div>
  30. <!-- ------------------------------------------------------------ -->
  31.  
  32. <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
  33. <script>
  34.  
  35.  
  36. // MAIN
  37.  
  38. // standard global variables
  39. var container, scene, camera, renderer, controls, stats;
  40. var keyboard = new THREEx.KeyboardState();
  41. var clock = new THREE.Clock();
  42. // custom global variables
  43. var cube;
  44. var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
  45. var ballSprite;
  46.  
  47. var android;
  48.  
  49. // the following code is from
  50. //    http://catchvar.com/threejs-animating-blender-models
  51.    
  52. var animOffset       = 0,   // starting frame of animation
  53.     walking         = false,
  54.     duration        = 1000, // milliseconds to complete animation
  55.     keyframes       = 20,   // total number of animation frames
  56.     interpolation   = duration / keyframes, // milliseconds per frame
  57.     lastKeyframe    = 0,    // previous keyframe
  58.     currentKeyframe = 0;
  59.    
  60.  
  61. init();
  62. animate();
  63.  
  64. // FUNCTIONS       
  65. function init()
  66. {
  67.     // SCENE
  68.     scene = new THREE.Scene();
  69.     // CAMERA
  70.     var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
  71.     var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
  72.     camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  73.     scene.add(camera);
  74.     camera.position.set(0,150,400);
  75.     camera.lookAt(scene.position); 
  76.     // RENDERER
  77.     if ( Detector.webgl )
  78.         renderer = new THREE.WebGLRenderer( {antialias:true} );
  79.     else
  80.         renderer = new THREE.CanvasRenderer();
  81.     renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  82.     container = document.getElementById( 'ThreeJS' );
  83.     container.appendChild( renderer.domElement );
  84.     // EVENTS
  85.     THREEx.WindowResize(renderer, camera);
  86.     THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
  87.     // CONTROLS
  88.     controls = new THREE.OrbitControls( camera, renderer.domElement );
  89.     // STATS
  90.     stats = new Stats();
  91.     stats.domElement.style.position = 'absolute';
  92.     stats.domElement.style.bottom = '0px';
  93.     stats.domElement.style.zIndex = 100;
  94.     container.appendChild( stats.domElement );
  95.     // LIGHT
  96.     var light = new THREE.PointLight(0xffffff);
  97.     light.position.set(0,150,100);
  98.     scene.add(light);
  99.     // FLOOR
  100.     var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
  101.     floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
  102.     // THREE.MirrorWrapping
  103.     // THREE.ClampToEdgeWrapping
  104.     // THREE.ClampToBoderWrapping
  105.     // THREE.MirroredRepeatWrapping
  106.     floorTexture.repeat.set( 5, 5 );
  107.     var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
  108.     var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
  109.     var floor = new THREE.Mesh(floorGeometry, floorMaterial);
  110.     floor.position.y = -0.5;
  111.     floor.rotation.x = Math.PI / 2;
  112.     scene.add(floor);
  113.     // SKYBOX/FOG
  114.     var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
  115.     var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
  116.     var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
  117.      scene.add(skyBox);
  118.     scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
  119.    
  120.     ////////////
  121.     // CUSTOM //
  122.     ////////////
  123.  
  124.     var jsonLoader = new THREE.JSONLoader();
  125.     jsonLoader.load( "models/android-animations.js", addModelToScene );
  126.     // addModelToScene function is called back after model has loaded
  127.    
  128.     var ambientLight = new THREE.AmbientLight(0x111111);
  129.     scene.add(ambientLight);
  130.  
  131.     // Spheres
  132.     //   Note: a standard flat rectangular image will look distorted,
  133.     //   a "spherical projection" image will look "normal".
  134.    
  135.     // radius, segmentsWidth, segmentsHeight
  136.     var sphereGeom =  new THREE.SphereGeometry( 40, 32, 16 );
  137.    
  138.     var light2 = new THREE.AmbientLight(0x444444);
  139.     scene.add(light2);
  140.    
  141.    
  142.    
  143.         // Using wireframe materials to illustrate shape details.
  144.     var darkMaterial = new THREE.MeshBasicMaterial( { color: 0xaa0000 } );
  145.     var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
  146.     var multiMaterial = [ darkMaterial, wireframeMaterial ];
  147.  
  148.     ///////////
  149.     // ROW 1 //
  150.     ///////////
  151.    
  152.    
  153.    
  154.     ///////////
  155.     // ROW 2 //
  156.     ///////////
  157.    
  158.    
  159.    
  160.     ///////////
  161.     // ROW 3 //
  162.     ///////////
  163.    
  164.    
  165.  
  166.     ///////////
  167.     // ROW 4 //
  168.     ///////////
  169.    
  170.     // prism
  171.     var shape = THREE.SceneUtils.createMultiMaterialObject(
  172.         // radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
  173.         new THREE.CylinderGeometry( 30, 30, 80, 6, 4 ),
  174.         multiMaterial );
  175.     shape.position.set(400, 40, -200);
  176.     scene.add( shape );
  177.    
  178.     // cone - truncated
  179.     var shape = THREE.SceneUtils.createMultiMaterialObject(
  180.         // radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
  181.         new THREE.CylinderGeometry( 10, 30, 100, 20, 4 ),
  182.         multiMaterial );
  183.     shape.position.set(300, 50, -200);
  184.     scene.add( shape );
  185.    
  186.     // pyramid - truncated
  187.     var shape = THREE.SceneUtils.createMultiMaterialObject(
  188.         // radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
  189.         new THREE.CylinderGeometry( 15, 30, 100, 6, 4 ),
  190.         multiMaterial );
  191.     shape.position.set(-400, 50, -200);
  192.     scene.add( shape );
  193.  
  194.     // torus
  195.     var shape = THREE.SceneUtils.createMultiMaterialObject(
  196.         // radius of entire torus, diameter of tube (less than total radius),
  197.         // sides per cylinder segment, cylinders around torus ("sides")
  198.         new THREE.TorusGeometry( 30, 20, 16, 40 ),
  199.         multiMaterial );
  200.     shape.position.set(-200, 20, -200);
  201.     shape.rotation.x = Math.PI / 2;
  202.     scene.add( shape );
  203.  
  204.     // torus knot
  205.     var shape = THREE.SceneUtils.createMultiMaterialObject(
  206.         // total knot radius, tube radius, number cylinder segments, sides per cyl. segment,
  207.         //  p-loops around torus, q-loops around torus
  208.         new THREE.TorusKnotGeometry( 30, 6, 160, 10, 3, 7 ),
  209.         multiMaterial );
  210.     shape.position.set(150, 20, -200);
  211.     shape.rotation.x = Math.PI /2;
  212.     scene.add( shape );
  213.    
  214.    
  215.    
  216.    
  217.  
  218.    
  219.     //////////////////////////////////////////////////////////////////////
  220.  
  221.    
  222.  
  223.     //////////////////////////////////////////////////////////////////////
  224.    
  225.     // RGB color cube
  226.    
  227.    
  228.    
  229.     // Sphere parameters: radius, segments along width, segments along height
  230.     var sphereGeom =  new THREE.SphereGeometry( 50, 32, 16 );
  231.    
  232.     // Three types of materials, each reacts differently to light.
  233.     var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x000088 } );
  234.     var darkMaterialL = new THREE.MeshLambertMaterial( { color: 0x000088 } );
  235.     var darkMaterialP = new THREE.MeshPhongMaterial( { color: 0x000088 } );
  236.        
  237.    
  238.    
  239.     var cubeGeometry = new THREE.CubeGeometry( 85, 85, 85 );
  240.    
  241.     var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
  242.     var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
  243.     var crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
  244.     crate.position.set(-60, 50, 300);
  245.     scene.add( crate );
  246.  
  247.  
  248.     document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  249.     var ballTexture = THREE.ImageUtils.loadTexture( 'images/X-button.png' );
  250.  
  251.  
  252.     var ballMaterial = new THREE.SpriteMaterial( { map: ballTexture, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.center } );
  253.     ballSprite = new THREE.Sprite( ballMaterial );
  254.     ballSprite.scale.set( 32, 32, 1.0 );
  255.     ballSprite.position.set( 50, 50, 0 );
  256.     scene.add( ballSprite );
  257.  
  258.    
  259. }
  260.  
  261.  
  262.  
  263. function addModelToScene( geometry, materials )
  264. {
  265.     // for preparing animation
  266.     for (var i = 0; i < materials.length; i++)
  267.         materials[i].morphTargets = true;
  268.        
  269.     var material = new THREE.MeshFaceMaterial( materials );
  270.     android = new THREE.Mesh( geometry, material );
  271.     android.scale.set(10,10,10);
  272.     scene.add( android );
  273. }
  274.  
  275.    
  276.  
  277.     function onDocumentMouseMove( event )
  278. {
  279.     // the following line would stop any other event handler from firing
  280.     // (such as the mouse's TrackballControls)
  281.     // event.preventDefault();
  282.  
  283.     // update sprite position
  284.     //crate.position.set( event.clientX, event.clientY, 0 );
  285.     ballSprite.position.set( event.clientX, event.clientY, 0 );
  286. }
  287.  
  288.    
  289.    
  290. function animate()
  291. {
  292.     requestAnimationFrame( animate );
  293.     render();      
  294.     update();
  295. }
  296.  
  297. function update()
  298. {
  299.     // delta = change in time since last call (seconds)
  300.     delta = clock.getDelta();
  301.     var moveDistance = 100 * delta;
  302.     walking = false;
  303.  
  304.     if (Gamepad.supported)
  305.     {
  306.         var pads = Gamepad.getStates();
  307.         var pad = pads[0]; // assume only 1 player.
  308.         if (pad)
  309.         {
  310.            
  311.             // adjust for deadzone.
  312.             if (Math.abs(pad.leftStickX + pad.rightStickX) > 0.3)
  313.             {
  314.                 android.rotation.y -= delta * (pad.leftStickX + pad.rightStickX);
  315.                 walking = true;
  316.             }
  317.             if (Math.abs(pad.leftStickY + pad.rightStickY) > 0.2)
  318.             {
  319.                 android.translateZ( -moveDistance * (pad.leftStickY + pad.rightStickY) );
  320.                 walking = true;
  321.             }
  322.             if ( pad.faceButton0 || pad.faceButton1 || pad.faceButton2 || pad.faceButton3 || pad.select || pad.start )
  323.             {
  324.                 android.position.set(0,0,0);
  325.                 android.rotation.set(0,0,0);
  326.             }
  327.            
  328.         }
  329.     }
  330.    
  331.     // move forwards / backwards
  332.     if ( keyboard.pressed("down") )
  333.         android.translateZ( -moveDistance );
  334.     if ( keyboard.pressed("up") )
  335.         android.translateZ(  moveDistance );
  336.     // rotate left/right
  337.     if ( keyboard.pressed("left") )
  338.         android.rotation.y += delta;
  339.     if ( keyboard.pressed("right") )
  340.         android.rotation.y -= delta;
  341.    
  342.    
  343.     var walkingKeys = ["up", "down", "left", "right"];
  344.     for (var i = 0; i < walkingKeys.length; i++)
  345.     {
  346.         if ( keyboard.pressed(walkingKeys[i]) )
  347.             walking = true;
  348.     }
  349.    
  350.     controls.update();
  351.     stats.update();
  352. }
  353.  
  354. function render()
  355. {
  356.     if ( android && walking ) // exists / is loaded
  357.     {
  358.         // Alternate morph targets
  359.         time = new Date().getTime() % duration;
  360.         keyframe = Math.floor( time / interpolation ) + animOffset;
  361.         if ( keyframe != currentKeyframe )
  362.         {
  363.             android.morphTargetInfluences[ lastKeyframe ] = 0;
  364.             android.morphTargetInfluences[ currentKeyframe ] = 1;
  365.             android.morphTargetInfluences[ keyframe ] = 0;
  366.             lastKeyframe = currentKeyframe;
  367.             currentKeyframe = keyframe;
  368.         }
  369.         android.morphTargetInfluences[ keyframe ] =
  370.             ( time % interpolation ) / interpolation;
  371.         android.morphTargetInfluences[ lastKeyframe ] =
  372.             1 - android.morphTargetInfluences[ keyframe ];
  373.     }
  374.    
  375.     renderer.render( scene, camera );
  376. }
  377.  
  378.  
  379. </script>
  380.  
  381. </body>
  382. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top