three 打造一款vr三维跑酷游戏效果代码
代码语言:html
所属分类:游戏
代码描述:three 打造一款vr三维跑酷游戏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; background: black; overflow: hidden; height: 100%; font-family: "Times"; font-style: italic; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .button { position: fixed; bottom: 20px; right: 30px; outline: none; border: none; background: none; width: 50px; z-index: 100; } .button svg { width: 100%; fill: white; } #info { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); color: white; z-index: 9999; opacity: 0; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSSPlugin.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EasePack.3.51.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/StereoEffect.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <!-- glowing effect scripts --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.110.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MaskPass.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FXAAShader.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ConvolutionShader.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.js"></script> <!-- unreal bloom --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.110.js"></script> <!-- VR Button --> <button id='VR' class='button toggleVR' onclick='toggleVR()' title='Toggle VR Mode for Mobile Devices Only'> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 62.7 52.375" enable-background="new 0 0 62.7 41.9" xml:space="preserve"><path d="M53.4,5.5h-44c-2.1,0-3.7,1.7-3.7,3.7v22.6c0,2.1,1.7,3.7,3.7,3.7h13.4c1.1,0,2.1-0.6,2.5-1.6l3-7.5c1.2-2.6,4.9-2.5,6,0.1 l2.6,7.3c0.4,1,1.4,1.7,2.5,1.7h13.9c2.1,0,3.7-1.7,3.7-3.7V9.3C57.2,7.2,55.5,5.5,53.4,5.5z M20.4,27c-3.2,0-5.7-2.6-5.7-5.7 s2.6-5.7,5.7-5.7s5.7,2.6,5.7,5.7S23.6,27,20.4,27z M42.4,27c-3.2,0-5.7-2.6-5.7-5.7s2.6-5.7,5.7-5.7s5.7,2.6,5.7,5.7 S45.6,27,42.4,27z"/><text x="0" y="56.9" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Nick Bluth</text><text x="0" y="61.9" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg> </button> <div id="info">SUPER!</div> <audio id="bflat" src="//repo.bfw.wiki/bfwrepo/sound/5fd2dcf3d275e.mp3"></audio> <script > //===================================================== full screen var requestFullscreen = function (ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen(); } else { console.log("Fullscreen API is not supported."); } }; var exitFullscreen = function (ele) { if (ele.exitFullscreen) { ele.exitFullscreen(); } else if (ele.webkitExitFullscreen) { ele.webkitExitFullscreen(); } else if (ele.mozCancelFullScreen) { ele.mozCancelFullScreen(); } else if (ele.msExitFullscreen) { ele.msExitFullscreen(); } else { console.log("Fullscreen API is not supported."); } }; //===================================================== add canvas let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xd8e7ff, 0); document.body.appendChild(renderer.domElement); //===================================================== resize window.addEventListener("r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0