前端小玩意儿：用three.js开发的手机太空穿越VR游戏，特效非常猛哦_three.js太空特效_coder吹雪的博客-程序员秘密

技术标签： html5 前端 es6 javascript jquery css3 three.js

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代码

本文链接：https://blog.csdn.net/qq_43623970/article/details/106212893

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

自制和烧录单片机 unicode 字库芯片－创建字库_单片机font字库文件格式_xhy的博客-程序员秘密

此词库被应用于微信点餐系统的打印机中。生成的字库优点可以完全自定义创建自己的字库：可自由选择任何字体，宋体，楷体，黑体……可自定义字体的大小可自定义需要的字符编码（简体gb2312，gb18030，繁体，韩文，日文……）UNICODE支持价格便宜，买 Flash ROM，自己写进 Flash ROM就可以了。创建字体库需要的软件Windows系统，安装 Python 2

python编程语言进化_python 闯关之路一（语法基础）_weixin_39792475的博客-程序员秘密

1，什么是编程？为什么要编程？答：编程是个动词，编程就等于写代码，那么写代码是为了什么呢？也就是为什么要编程呢，肯定是为了让计算机帮我们搞事情，代码就是计算机能理解的语言。2，编程语言进化史是什么？答：机器语言　　------> 　　汇编语言　　------>　　高级语言机器语言：由于计算机内部只能接受二进制代码，因此，用二进制代码0和1描述的指令称为机器指令，全部机器指令的集合构成计算机的机器...

SOA1.0参考模型标准将发布_dinongxu8804的博客-程序员秘密

周一，负责SOA参考模型工作的OASIS技术委员会证实，面向服务架构(SOA)1.0参考模型已通过投票得以确定并将成为一项标准，本周内该组织就将发表官方公告。　　据OASIS介绍，该模型是服务支持的详尽规范。它基于统一SOA这一目的，是指导SOA，实践、研讨SOA的重要依据。该模型并不是“和其他相关的标准，技术或是任何其他已有的执行规范结合到一起即可的”，OASIS这...

文件以及文件夹处理_Happylege的博客-程序员秘密

今天折腾了一下午文件夹的遍历、文件复制、文件创建等等，跟大家分享一下！～1. 深度遍历文件夹下所有文件和文件夹 NSFileManager *fm = [NSFileManagerdefaultManager];NSArray *contentOfFolder = [fmsubpathsAtPath:unzipPath];for (NSString *

加密运算原理和过程_風の住む街~的博客-程序员秘密

1.协商密钥基于非对称加密的密钥协商算法，可以在通信内容完全被公开的情况下，双方协商出一个只有双方才知道的密钥，然后使用该密钥进行对称加密传输数据。比如图中所用的 ECDH 密钥协商。2. 请求 Salt双方协商出一个密钥 SharedKey 之后，就可以使用 SharedKey 作为 AES 对称加密的密钥进行通信，客户端传给服务端自己的公钥 A ，以及加密了的用户ID（uid）。服务端从数据库中查找到该 uid 对于的 Salt1 和 Salt2 ，然后再加密返回给客户端。注意，服务端保存的 S.

Segment Routing MPLS介绍_node sid_confirmwz的博客-程序员秘密

术语术语解释 SR-MPLS BE SR-MPLS BE（Segment Routing MPLS Best Effort）是指IGP使用最短路径算法计算得到的最优SRLSP。 SR-MPLS TE SR-MPLS TE（Segment Routing MPLS Traffic Engineering）是指基于TE的约束属性，利用SR协议创建的隧道。缩略语缩略语