Facebook
From Ronalds Mazītis, 2 Years ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 118
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  8.     />
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10.     <title>3D ONLINE GAME 2</title>
  11.     <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
  12.     <script src="/js/examples.js?ver=1.1.1"></script>
  13.     <script src="/lib/phaser.min.js?ver=3.52.0"></script>
  14.     <script src="/lib/enable3d/enable3d.phaserExtension.0.25.0.min.js"></script>
  15.               <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  16.  
  17.    
  18.  
  19.   </head>
  20.  
  21.   <body>
  22.    <!--- <div id="info-text">Use WASD, SPACE and your Mouse.<br />Try to play it on your mobile device :)</div> -->
  23.    
  24.  
  25.    <h1><?php  
  26.    include '../core/db.php';
  27.  
  28.  
  29.    echo $_SESSION['user_id'];?>
  30.    
  31.    </h1>
  32.    
  33.     <script>
  34.       const {
  35.         enable3d,
  36.         Scene3D,
  37.         Canvas,
  38.         ThirdDimension,
  39.         THREE,
  40.         JoyStick,
  41.         ExtendedObject3D,
  42.         ThirdPersonControls,
  43.         PointerLock,
  44.         PointerDrag
  45.       } = ENABLE3D
  46.  
  47.       /**
  48.        * Is touch device?
  49.        */
  50.       const isTouchDevice = 'ontouchstart' in window
  51.  
  52.       class MainScene extends Scene3D {
  53.         constructor() {
  54.           super({ key: 'MainScene' })
  55.         }
  56.  
  57.         init() {
  58.           this.accessThirdDimension({ maxSubSteps: 10, fixedTimeStep: 1 / 120 })
  59.           this.third.renderer.outputEncoding = THREE.LinearEncoding
  60.           this.canJump = true
  61.           this.move = false
  62.  
  63.           this.moveTop = 0
  64.           this.moveRight = 0
  65.         }
  66.  
  67.         async create() {
  68.           const { lights } = await this.third.warpSpeed('-ground', '-orbitControls')
  69.  
  70.           const { hemisphereLight, ambientLight, directionalLight } = lights
  71.           const intensity = 0.65
  72.           hemisphereLight.intensity = intensity
  73.           ambientLight.intensity = intensity
  74.           directionalLight.intensity = intensity
  75.  
  76.           //this.third.physics.add.box({ y: 10, x: 35 }, { lambert: { color: 'red' } })
  77.  
  78.           // this.third.physics.debug.enable()
  79.  
  80.           /**
  81.            * Medieval Fantasy Book by Pixel (https://sketchfab.com/stefan.lengyel1)
  82.            * https://sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91a
  83.            * Attribution 4.0 International (CC BY 4.0)
  84.            
  85.            E4E717
  86.            */
  87.           this.third.load.gltf('/assets/glb/book6.glb').then(object => {
  88.             const scene = object.scenes[0]
  89.  
  90.             const book = new ExtendedObject3D()
  91.             book.name = 'scene'
  92.             book.add(scene)
  93.             this.third.add.existing(book)
  94.  
  95.             // add animations
  96.             // sadly only the flags animations works
  97.             object.animations.forEach((anim, i) => {
  98.               book.mixer = this.third.animationMixers.create(book)
  99.               // overwrite the action to be an array of actions
  100.               book.action = []
  101.               book.action[i] = book.mixer.clipAction(anim)
  102.               book.action[i].play()
  103.             })
  104.  
  105.             book.traverse(child => {
  106.               if (child.isMesh) {
  107.                 child.castShadow = child.receiveShadow = false
  108.                 child.material.metalness = 0
  109.                 child.material.roughness = 1
  110.  
  111.                 if (/mesh/i.test(child.name)) {
  112.                   this.third.physics.add.existing(child, {
  113.                     shape: 'concave',
  114.                     mass: 0,
  115.                     collisionFlags: 1,
  116.                     autoCenter: false
  117.                   })
  118.                   child.body.setAngularFactor(0, 0, 0)
  119.                   child.body.setLinearFactor(0, 0, 0)
  120.                 }
  121.               }
  122.             })
  123.           })
  124.          
  125.          
  126.  
  127.          
  128.          
  129.          
  130.  
  131.  
  132.           var skins = [];
  133.           $.ajax({
  134.               type: "GET",
  135.               async: false,
  136.               url: 'loadskins.php',
  137.               data: {},
  138.               success: function (data) {
  139.                   skins = data.split(",").map(String);
  140.               }
  141.           });
  142.  
  143.                        
  144.                          
  145.                          
  146.   //console.log(vertibasx);
  147.  
  148.           for (var i = 0; i < skins.length - 1; i++) {
  149.               let skin = skins[i];  
  150.              
  151.               const lokacijumasivs = [];
  152.                          
  153.                         //// let objstr = obj[i].toString().split("");
  154.                          //let objstr = obj[i];
  155.                          
  156.  
  157.  
  158.  
  159.                          ////console.log(objstr);
  160.                           //console.log("x", vertibasx[i]);
  161.                           //console.log("y", vertibasy[i]);
  162.                           //console.log("z", vertibasz[i]);
  163.  
  164.  
  165.  
  166.  
  167. var obj = [];
  168.                       $.ajax({
  169.                           type: "GET",
  170.                           async: false,
  171.                           url: 'getlocation.php',
  172.                           data: {},
  173.                           success: function (data) {
  174.                                                 obj = data.split("*").map(String);
  175.  
  176.                           }
  177.  
  178.                       });
  179.            
  180.  
  181.  
  182.                          console.log("obj", obj);
  183.                          
  184.  const vertibasx = obj.slice(0,1);
  185.                          const vertibasy = obj.slice(1,2);
  186.                          const vertibasz = obj.slice(2,3);
  187.                          
  188.  
  189.        
  190.  
  191.           /**
  192.            * box_man.glb by Jan Bláha
  193.            * https://github.com/swift502/Sketchbook
  194.            * CC-0 license 2018
  195.            */
  196.            var object = await this.third.load.gltf(skin)
  197.           ///this.third.load.gltf('/assets/glb/box_man.glb').then(object => {
  198.             const man = object.scene.children[0]
  199.  
  200.             this.man = new ExtendedObject3D()
  201.             this.man.name = 'man'
  202.             this.man.rotateY(Math.PI + 0.1) // a hack
  203.             this.man.add(man)
  204.             this.man.rotation.set(0, Math.PI * 1.5, 0)
  205.             //console.log("uzstada", vertibasx, vertibasy, vertibasx);
  206.            
  207.             console.log("iteracija", i);
  208.                         //if(vertibasx !== null && vertibasy !== null && vertibasz !== null){
  209.                         //let verx = vertibasx[i];
  210.                         //let very = vertibasy[i];
  211.                         //let verz = vertibasz[i];
  212.                        
  213.                        
  214. //console.log("shitais?", verx);
  215. //console.log("2shitais?", very);
  216. //console.log("3shitais?", verz);
  217.  
  218.  
  219.  
  220.                                     this.man.position.set(vertibasx, vertibasy, vertibasz)
  221.                
  222.                 //} else {
  223.                 //let verx = 754.2014;
  224.                 //let very = 1000;
  225.                 //let verz = -205.63472;
  226.                
  227.                             //this.man.position.set(verx, very, verz)
  228.  
  229.                 //}
  230.             //this.man.position.set(59, 0, 79)
  231.  
  232.             // add shadow
  233.             this.man.traverse(child => {
  234.               if (child.isMesh) {
  235.                 child.castShadow = child.receiveShadow = true
  236.                 // https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
  237.                 child.material.roughness = 1
  238.                 child.material.metalness = 0
  239.               }
  240.             })
  241.  
  242.             /**
  243.              * Animations
  244.              */
  245.             this.third.animationMixers.add(this.man.animation.mixer)
  246.             object.animations.forEach(animation => {
  247.               if (animation.name) {
  248.                 this.man.animation.add(animation.name, animation)
  249.               }
  250.             })
  251.             this.man.animation.play('idle')
  252.  
  253.             /**
  254.              * Add the player to the scene with a body
  255.              */
  256.             this.third.add.existing(this.man)
  257.             this.third.physics.add.existing(this.man, {
  258.               shape: 'sphere',
  259.               radius: 0.25,
  260.               width: 0.5,
  261.               offset: { y: -0.25 }
  262.             })
  263.             this.man.body.setFriction(0.8)
  264.             this.man.body.setAngularFactor(0, 0, 0)
  265.  
  266.             // https://docs.panda3d.org/1.10/python/programming/physics/bullet/ccd
  267.             this.man.body.setCcdMotionThreshold(1e-7)
  268.             this.man.body.setCcdSweptSphereRadius(0.25)
  269.  
  270.             /**
  271.              * Add 3rd Person Controls
  272.              */
  273.             this.controls = new ThirdPersonControls(this.third.camera, this.man, {
  274.               offset: new THREE.Vector3(0, 1, 0),
  275.               targetRadius: 3
  276.             })
  277.             // set initial view to 90 deg theta
  278.             this.controls.theta = 90
  279.  
  280.             /**
  281.              * Add Pointer Lock and Pointer Drag
  282.              */
  283.             if (!isTouchDevice) {
  284.               let pl = new PointerLock(this.game.canvas)
  285.               let pd = new PointerDrag(this.game.canvas)
  286.               pd.onMove(delta => {
  287.                 if (pl.isLocked()) {
  288.                   this.moveTop = -delta.y
  289.                   this.moveRight = delta.x
  290.                 }
  291.               })
  292.             }
  293.          // })
  294.  
  295.           /**
  296.            * Add Keys
  297.            */
  298.           this.keys = {
  299.             a: this.input.keyboard.addKey('a'),
  300.             w: this.input.keyboard.addKey('w'),
  301.             d: this.input.keyboard.addKey('d'),
  302.             s: this.input.keyboard.addKey('s'),
  303.             space: this.input.keyboard.addKey(32)
  304.           }
  305.  
  306.           /**
  307.            * Add joystick
  308.            */
  309.           if (isTouchDevice) {
  310.             const joystick = new JoyStick()
  311.             const axis = joystick.add.axis({
  312.               styles: { left: 35, bottom: 35, size: 100 }
  313.             })
  314.             axis.onMove(event => {
  315.               /**
  316.                * Update Camera
  317.                */
  318.               const { top, right } = event
  319.               this.moveTop = top * 3
  320.               this.moveRight = right * 3
  321.             })
  322.             const buttonA = joystick.add.button({
  323.               letter: 'A',
  324.               styles: { right: 35, bottom: 110, size: 80 }
  325.             })
  326.             buttonA.onClick(() => this.jump())
  327.             const buttonB = joystick.add.button({
  328.               letter: 'B',
  329.               styles: { right: 110, bottom: 35, size: 80 }
  330.             })
  331.             buttonB.onClick(() => (this.move = true))
  332.             buttonB.onRelease(() => (this.move = false))
  333.           }
  334.         }
  335.  
  336. }
  337.         jump() {
  338.           if (!this.man || !this.canJump) return
  339.           this.canJump = false
  340.           this.man.animation.play('jump_running', 500, false)
  341.           this.time.addEvent({
  342.             delay: 650,
  343.             callback: () => {
  344.               this.canJump = true
  345.               this.man.animation.play('idle')
  346.             }
  347.           })
  348.           this.man.body.applyForceY(6)
  349.         }
  350.  
  351.         update(time, delta) {
  352.           if (this.man && this.man.body) {
  353.             /**
  354.              * Update Controls
  355.              */
  356.             this.controls.update(this.moveRight * 2, -this.moveTop * 2)
  357.             if (!isTouchDevice) this.moveRight = this.moveTop = 0
  358.             /**
  359.              * Player Turn
  360.              */
  361.  
  362.                      
  363.                      
  364.            
  365.        
  366.                 //console.log("globals mainigais speed", speed);
  367.                
  368.                
  369.             const v3 = new THREE.Vector3()
  370.  
  371.             const rotation = this.third.camera.getWorldDirection(v3)
  372.            
  373.  
  374.             var rotati = [];
  375.                       $.ajax({
  376.                           type: "GET",
  377.                           async: false,
  378.                           url: 'getrotation.php',
  379.                           data: {},
  380.                           success: function (data) {
  381.                                                 rotati = data.split("*").map(String);
  382.  
  383.                           }
  384.  
  385.                       });
  386.                  
  387.  
  388.                  
  389.                  
  390.             const theta = Math.atan2(rotation.x, rotation.z)
  391.             const rotationMan = this.man.getWorldDirection(v3)
  392.             for (var i = 0; i < rotati.length - 1; i++) {
  393.               let rotatine = rotati[i];  
  394.                                                                 console.log(rotatine);
  395.  
  396.                                 if(rotatine){
  397.             const thetaMan = Math.atan2(rotationMan.x, rotationMan.z)
  398.               $.post(
  399.                           "postrotation.php", {
  400.                               rotation: thetaMan
  401.                           },
  402.                           function (data) {
  403.                                                                 //console.log("rotacija", thetaMan);
  404.                               //console.log("izsaukta", v3);
  405.                           }
  406.                       );
  407.                      
  408.                       this.man.body.setAngularVelocityY(0)
  409.  
  410.             const l = Math.abs(theta - thetaMan)
  411.                
  412.             let rotationSpeed = isTouchDevice ? 2 : 4
  413.             let d = Math.PI / 24
  414.  
  415.             if (l > d) {
  416.               if (l > Math.PI - d) rotationSpeed *= -1
  417.               if (theta < thetaMan) rotationSpeed *= -1
  418.               this.man.body.setAngularVelocityY(rotationSpeed)
  419.             }
  420.            
  421.            
  422.                          } else {
  423.                          const thetaMan = rotatine;
  424.                          
  425.                            $.post(
  426.                           "postrotation.php", {
  427.                               rotation: thetaMan
  428.                           },
  429.                           function (data) {
  430.                                                                 //console.log("rotacija", thetaMan);
  431.                               //console.log("izsaukta", v3);
  432.                           }
  433.                       );
  434.                          
  435.                
  436.            
  437.                                  
  438.                      
  439.                      
  440.             this.man.body.setAngularVelocityY(0)
  441.  
  442.             const l = Math.abs(theta - thetaMan)
  443.                
  444.             let rotationSpeed = isTouchDevice ? 2 : 4
  445.             let d = Math.PI / 24
  446.  
  447.             if (l > d) {
  448.               if (l > Math.PI - d) rotationSpeed *= -1
  449.               if (theta < thetaMan) rotationSpeed *= -1
  450.               this.man.body.setAngularVelocityY(rotationSpeed)
  451.             }
  452.            
  453.                 }
  454.                          }
  455.  
  456.  
  457.  
  458.             /**
  459.              * Player Move
  460.              */
  461.             if (this.keys.w.isDown || this.move) {
  462.               if (this.man.animation.current === 'idle' && this.canJump) this.man.animation.play('run')
  463.                                           $.post(
  464.                           "postanimation.php", {
  465.                               animation: this.man.animation.current
  466.                           },
  467.                           function (data) {
  468.                                                                 //console.log("viens", x);
  469.                               //console.log("izsaukta", v3);
  470.                           }
  471.                       );
  472.                      
  473.                      
  474.  const speed = [];
  475.               var getspeed = [];
  476.                       $.ajax({
  477.                           type: "GET",
  478.                           async: false,
  479.                           url: 'getspeed.php',
  480.                           data: {},
  481.                           success: function (data) {
  482.                                                 getspeed = data.split("*").map(String);
  483.                                                                         //console.log("getsp", getspeed);
  484.                           }
  485.  
  486.                       });
  487.                                                  
  488.               for (var i = 0; i < getspeed.length - 1; i++) {
  489.                                 let getsp = getspeed[i];  
  490.                                 //console.log("speed", getsp);
  491.                       speed.push(getsp);
  492.                 }
  493.                
  494.                                                                                                 //console.log("speed.length", speed.length);
  495.  
  496.  
  497.                           for (var i = 0; i < speed.length; i++) {
  498.  
  499.                                         let speedi = speed[i];
  500.                                                                                                                         console.log("speed array2", speedi);
  501.  
  502.               const x = Math.sin(theta) * speedi,
  503.                 y = this.man.body.velocity.y,
  504.                 z = Math.cos(theta) * speedi
  505.                
  506.                        
  507.                
  508.                
  509.            $.post(
  510.                           "postlocation.php", {
  511.                               x: x,
  512.                               y: y,
  513.                              z: z,
  514.                              
  515.                           },
  516.                           function (data) {
  517.                                                                 //console.log("viens", x);
  518.                               //console.log("izsaukta", v3);
  519.                           }
  520.                       );
  521.                                  
  522.                                  
  523.               this.man.body.setVelocity(x, y, z)
  524.                   }
  525.                  
  526.                  
  527.                  
  528.             } else {
  529.               if (this.man.animation.current === 'run' && this.canJump) this.man.animation.play('idle')
  530.                                                   $.post(
  531.                           "postanimation.php", {
  532.                               animation: this.man.animation.current
  533.                           },
  534.                           function (data) {
  535.                                                                 //console.log("viens", x);
  536.                               //console.log("izsaukta", v3);
  537.                           }
  538.                       );
  539.             }
  540.  
  541.             /**
  542.              * Player Jump
  543.              */
  544.             if (this.keys.space.isDown && this.canJump) {
  545.               this.jump()
  546.             }
  547.           }
  548.         }
  549.       }
  550.  
  551.       const config = {
  552.         type: Phaser.WEBGL,
  553.         transparent: true,
  554.         scale: {
  555.           mode: Phaser.Scale.FIT,
  556.           autoCenter: Phaser.Scale.CENTER_BOTH,
  557.           width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
  558.           height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
  559.         },
  560.         scene: [MainScene],
  561.         ...Canvas({ antialias: false })
  562.       }
  563.  
  564.       window.addEventListener('load', () => {
  565.         enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
  566.       })
  567.     </script>
  568.   </body>
  569. </html>
  570.  
  571.