html闪烁代码(html文字闪烁代码)

　　刘珍莹

　　2016年加入Qunar，于平台事业部前端架构组担任前端开发工程师一职，目前主要从事react相关框架的开发工作。初来乍到，如有疏漏，欢迎斧正。

　　最近业余时间在做团队内的一个H5宣传页，正巧也想试用一下three.js这个框架。简单介绍一下three.js是什么，能做些什么。一点微小的总结工作，供大家参考。

　　three.js是什么

　　了解three.js之前，我们需要先了解一下WebGL。

　　WebGL是一个用以渲染交互式3D和2D图形的无需插件且兼容下一代浏览器的 Java API，通过HTML5中canvas元素实现其功能。可以简单理解为网页版OpenGL。

　　但WebGL的接口底层且难以上手，所以three.js应运而生。它是一个Java 3D 库，封装了WebGL底层实现，使得前端工程师不需要了解复杂的图形学和数学变换，即可利用简单的Java构建3D场景。

　　three.js能做什么

three.js 是封装于WebGL，一般来说封装的同时会带来灵活性的损失，但从开发者的反馈情况来看，凡是WebGL能做到的，three.js都能做到。

在一定程度上扩展了WebGL，例如three.js支持以拾取的方式进行交互。

高性能，易扩展。

提供导入导出，开发者可从3D建模软件中建模导出到three.js中。

提供多种退化版本，开发者可以使用基于WebGL API的渲染器或是基于Canvas API的渲染器，或者以DOM+CSS3的形式渲染。

three.js怎么用

　　正如上述所言，three.js降低了开发难度，只需掌握一些核心概念就可以快速的构建一个3D场景。

　　坐标系 : WebGL和three.js使用的都是右手坐标系，如图所示。

　　相机(camera):控制投影方式，常用的有PerspectiveCamera(透视相机，获取人眼在真实世界近大远小的效果)，OrthographicCamera(正交相机,类似于数学课上几何画图)。

　　场景(scene):三维世界的容器，你需要把你创建的物体加入场景中才能被渲染。

　　渲染器(renderer):渲染器将场景渲染到Canvas里。常用的有WebGLRenderer(基于WebGL API)，CanvasRenderer(基于Canvas API)，CSS3DRenderer(以DOM+CSS3的形式展现)。

　　three.js里最基本的概念就是上述这些，我们定义一个相机，渲染器和场景后，不断的把我们想要渲染的几何体或光源放入在场景中即可，

　　光源:提供多种光源(环境光，点光源，聚光灯光源等)，可以方便的添加到scene里。

　　材质:材质覆盖在几何体上的，three.js提供多种材质，如基本材质(MeshBasicMaterial)，对光源有反应的材质(MeshLambertMaterial等)，自定义材质(ShaderMaterial)等等。

　　几何体:提供多种基础几何体，分为二维几何体(平面，圆等)和三维几何体(球体，立方体等)，当然，three.js还允许你合并或自定义几何体，或者是从外部导入几何体。

　　粒子系统:提供了粒子系统，使得开发者方便建立细小物体。

　　建立需要的几何体或光源，并把它们添加到场景中，这便是three.js最基本的使用方法。

　　一个例子

　　我们来用上述的这些基础用法创建一个三维空间。

　　创建基本元素

　　开始的开始，我们要创建相机，渲染器和场景。

　　创建全景空间

　　我们来创建一个全景空间作为整个三维空间的背景。

　　想象一下自己的眼睛是一部相机，如果能把全景图贴到以自己为圆心的一个球体上，那么我们就可以创建一个3D全景的场景。

　　但问题在于，在图形底层的实现中,并没有曲线的概念, 比如圆都是由多个折线近似构成。折线越多，越接近物理上的圆。可想而知，如果要实现一个人眼无法分辨出的”球体”，要构建非常多的点和面，消耗巨大。

　　目前实现全景的主流思路便是将球体退化成立方体，把切割出的全景图贴到每一个面上。至于这个立方体有几个面，全景图怎么切割才能达到效率和效果的平衡，则是各家精华所在。最简单方法的简化成正方体，这是目前很多web项目首选的方式。

　　ps: 这样会发现，如果在全景cube内部，再增加新的拥有图片作为纹理的几何体时，会出现闪烁现象。如果你也遇到了这种现象，可以考虑使用六个面(PlaneGeometry),通过调整其position和rotation，将这六个平面组合成一个正方体。同理可得，如果你并不需要一个全景空间而是需要一个宽景区间，可以酌情减少平面的量。

　　动起来

　　除了六张背景图，我们还可以添加些其他的，比如在前方添加一张摆满了商品的货架，我们可以走近看一下。

　　形成移动效果无外乎有两种，改变相机位置，或是改变物体位置，随后通过requestAnimationFrame不断的调用渲染器的render方法进行刷新渲染即可。

　　改变相机位置

　　改变相机位置更贴合现实生活，也很适合我们现在这个项目，你只需要构建出各个物体的相对位置，改变camera的position即可。

　　改变物体位置

　　改变物体的位置常用于物体变换中，同样是改变其position。

　　结合使用

　　这两者可以结合起来使用，比如有时候你找不到一张高清大图作为背景，你可以移动camera的同时移动背景，这样可以得到一个更大的活动空间。

　　视角改变

　　好了，我们现在实现了一个全景空间作为背景，如何让用户看到整体呢，我们可以添加拖拽改变视角和监听陀螺仪改变视角功能。

　　拖拽

　　一个简单的思路是，屏幕上的X/Y值，正好对应现实世界中的水平/垂直（向左右看/向上下看）。监听这两个值，并调整camera的旋转角度(rotation)，就能实现一个简单的拖拽移动视角功能。

　　陀螺仪旋转

　　中心思想还是通过监听deviceorientation来实现视角的改变，你可以按照上文拖拽的思想实现一个粗糙的陀螺仪移动功能，但three.js的example中实现了一个DeviceOrientationControls，你可以使用或拿来作为参考。

　　需要注意的是，这一功能在有些安卓机上会比较的卡，你可能要做一些限制或有一套备用方案。

　　页面交互

　　现在我们来增加一点交互效果，我们想点击某样商品，旁边出现这个商品的文字介绍。

　　我们的屏幕是二维空间，如何将点击事件和构建出的三维世界联系在一起呢。

　　three.js提供了一个Raycaster，用来拾取物体等。Raycaster定义了一个setFromCamera的方法，将点击的坐标和camera传入，three.js会在3D世界中发出一条射线，射线穿过的物体会按由远及近的顺序添加到返回值里。

　　获得了是哪个商品被点击了以后，如何展示商品信息呢，当然，我们可以在3D世界中新渲染一个平面来展示信息，也可以直接在dom层中运用我们熟悉的css进行展示。

　　另外一个场景可能是，我们不想点击获得具体的3D物体，而是获取背景图片上具体的信息，类似于图片热区的概念，720云提供了另外一个思路。它将canvas和css3相结合，维护了两份全景世界，一份用于展示背景图，另一份用于添加对应的热区和图片评论。至于这两份如何一一对应，就需要数据的对应了。

　　至此，我们运用three.js的基本概念，已经实现了一个简单的例子。

　　一个彩蛋

　　如果还想了解更多，或是想更直观的看一下有哪些实现，这里有一些链接以供参考。

　　更多应用

　　这里有几个我觉得比较有代表性的例子，有兴趣的可以看一下:

HexGl（https://hexgl.bkcore.com/） 是一个3D赛车游戏，代码在github开源。

ThroughTheDark （https://throughthedark.withgoogle.com/）讲述了一个故事，可以看到一个UI设计者如何运用three.js。

　　更多实现，可在three.js官网查看。

　　更多形式

　　A-Frame（https://aframe.io/）是一个通过HTML方式创建VR的框架，进一步降低开发门槛，你也可以在three.js的example里找到它。

　　更多可能

　　除了用于构建三维世界外，three.js，或是说WebGL还可以走的更远。

　　全景音频

　　omnitone（https://github.com/GoogleChrome/omnitone）是Google开源3D全景音效项目，旨在实现普通耳机在VR环境中的3D全景音效，让用户获得更好的VR沉浸感。在这个[demo]（https://googlechrome.github.io/omnitone/src/omnitone-demo-player.html?id=resonance）中，观察者面对或背对演奏者，或是演奏者身处在房间或教堂或户外，都会有不同的音乐效果。整个demo和文档都弥漫着一种不明觉厉的氛围，但效果还不错，以我这种破耳机和破听力居然也能听出其中的不同。

　　想象一下以后拿着手机听现场演唱会，或者在VR游戏中听声辨位，想想还有点小激动。

　　3DTouch

　　虽然目前3DTouch还不普遍，但它提出了一种新的交互方式。对物体触摸力度的不同，也可以得到不同的反馈。这种交互可以创建出更接近真实世界的交互感，也许我们可以在游戏中可以率先体验它。

　　欢迎留言交流或投稿，和我们一起分享知识。

　　Qunar技术沙龙