前端小玩意儿：用three.js开发的手机太空穿越VR游戏，特效非常猛哦

hello，今天给大家用three.js开发了一个手机太空穿越VR游戏，确实不容易，小编的头发又少了一大截。Ok，废话少说，先看效果。
一、效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Three.js Mobile VR Sonic</title>



<link rel="stylesheet" href="css/style.css">


</head>

<body>

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/d3.v4.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/GLTFLoader.js"></script>


<script src="js/TweenMax.min.js"></script>
<script src="js/CSSPlugin.min.js"></script>
<script src="js/EasePack.min.js"></script>



<script src='js/AssimpJSONLoader.js'></script>
<script src="js/DeviceOrientationControls.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/StereoEffect.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<!-- glowing effect scripts -->
<script src="js/EffectComposer.js"></script>
<script src="js/RenderPass.js"></script>
<script src="js/MaskPass.js"></script>
<script src="js/ShaderPass.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/FXAAShader.js"></script>
<script src="js/ConvolutionShader.js"></script>
<script src="js/LuminosityHighPassShader.js"></script>
<!-- unreal bloom -->
<script src="js/UnrealBloomPass.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="sonic_ring_sound.mp3"></audio>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

二、css代码

前端小玩意儿：用three.js开发的手机太空穿越VR游戏，特效非常猛哦

猜你喜欢