谢邀，这会是个比较漫长的学习过程&br&&br&&b&（一）国内引进出版的书籍&/b&&br&国内引进或出版的图形学书籍很多，但是大部分是糟粕，看它们是浪费时间&br&&b&&br&3D数学基础:图形与游戏开发&/b&&br&这本可以补数学基础，矩阵变换，线性代数啥的&br&&br&&b&图形着色器:理论与实践(第2版)&/b&&br&这本是比较新的讲 opengl shader 的&br&&br&&b&DirectX 9.0 3D游戏开发编程基础&/b&&br&这本是国内出版或引进的 d3d 书籍中唯一能看的&br&&br&&b&（二）国内没有引进的书籍，可以下载电子版或上淘宝买打印版&/b&&br&&b&OpenGL Shading Language&/b&&br&可以认为是 glsl 的圣经&br&&br&&b&Introduction to 3D Game Programming: With Directx 11&/b&&br&可以认为是 d3d11 的圣经，这本是 &b&DirectX 9.0 3D游戏开发编程基础 &/b&的升级版&br&&br&&b&（三）个人推荐&/b&&br&&b&3D数学基础:图形与游戏开发&/b&&br&&b&DirectX 9.0 3D游戏开发编程基础&/b&&br&&b&Introduction to 3D Game Programming: With Directx 11&/b&
谢邀，这会是个比较漫长的学习过程 （一）国内引进出版的书籍 国内引进或出版的图形学书籍很多，但是大部分是糟粕，看它们是浪费时间
3D数学基础:图形与游戏开发 这本可以补数学基础，矩阵变换，线性代数啥的 图形着色器:理论与实践(第2版) 这本是比较新的…
。。。赞同点错了= =&br&下面回答下问题吧，shader语言主要有三种：OpenGL的GLSL，DirectX的HLSL，和Nvidia的CG。&br&我主要用HLSL，所以入门推荐《the complete effect and hlsl guide》，高级的看《Shader X》系列吧，另外，Render Monkey是创作shader 的不错工具。
。。。赞同点错了= = 下面回答下问题吧，shader语言主要有三种：OpenGL的GLSL，DirectX的HLSL，和Nvidia的CG。 我主要用HLSL，所以入门推荐《the complete effect and hlsl guide》，高级的看《Shader X》系列吧，另外，Render Monkey是创作shader 的不错工…
&figure&&img src=&https://pic1.zhimg.com/v2-28e76dbaa507_b.jpg& data-rawwidth=&575& data-rawheight=&140& class=&origin_image zh-lightbox-thumb& width=&575& data-original=&https://pic1.zhimg.com/v2-28e76dbaa507_r.jpg&&&/figure&&p&The complete WebGL Insights book: 23 chapters from 42 authors and 25 technical reviewers.&/p&&p&&a href=&https://link.zhihu.com/?target=https%3A//github.com/WebGLInsights/WebGLInsights.github.io/releases/download/v1.0/WebGL.Insights.-.Patrick.Cozzi.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/WebGLInsight&/span&&span class=&invisible&&s/WebGLInsights.github.io/releases/download/v1.0/WebGL.Insights.-.Patrick.Cozzi.pdf&/span&&span class=&ellipsis&&&/span&&/a&&/p&&h2&Table of Contents&/h2&&p&&br&&/p&&p&&b&I. WebGL Implementations&/b&&/p&&p&1. ANGLE: A Desktop Foundation for WebGL &/p&&p&2. Mozilla's Implementation of WebGL &/p&&p&3. Continuous Testing of Chrome's WebGL Implementation &/p&&p&&br&&/p&&p&&b&II. Moving to WebGL&/b&&/p&&p&4. Getting Serious with JavaScript &/p&&p&5. Emscripten & WebGL &/p&&p&6. Data Visualization with WebGL: from Python to JavaScript &/p&&p&7. Teaching an Introductory Computer Graphics Course with WebGL &/p&&p&&br&&/p&&p&&b&III. Mobile&/b&&/p&&p&8. Bug-Free and Fast Mobile WebGL &/p&&p&&br&&/p&&p&&b&IV. Engine Design&/b&&/p&&p&9. WebGL Engine Design in Babylon.js &/p&&p&10. Rendering Optimizations in the Turbulenz Engine &/p&&p&11. Performance and Rendering Algorithms in Blend4Web &/p&&p&12. Sketchfab Material Pipeline: From File Variations to Shader Generation &/p&&p&13. glslify: A module system for GLSL &/p&&p&14. Budgeting Frame Time &/p&&p&&br&&/p&&p&&b&V. Rendering&/b&&/p&&p&15. Deferred Shading in Luma &/p&&p&16. HDR Image-Based Lighting on the Web &/p&&p&17. Real-Time Volumetric Lighting for WebGL &/p&&p&18. Terrain Geometry - LOD Adapting Concentric Rings &/p&&p&&br&&/p&&p&&b&VI. Visualization&/b&&/p&&p&19. Data Visualization Techniques with WebGL &/p&&p&20. hare3d - Rendering Large Models in the Browser &/p&&p&21. The BrainBrowser Surface Viewer: WebGL-based Neurological Data Visualization &/p&&p&&br&&/p&&p&&b&VII. Interaction&/b&&/p&&p&22. Usability of WebGL Applications &/p&&p&23. Designing Cameras for WebGL Applications &/p&&p&&br&&/p&&p&终于可以把我的盗版 pdf 删了，换成正版的。（总觉得哪里不太对）&/p&&p&&br&&/p&&p&&i&【黑客与画家】@Vinjn张静 的原创技术专栏，关注人工智能 + 视觉计算。&/i&&/p&&figure&&img src=&https://pic1.zhimg.com/66fbb11fa47e9ecb4739cf_b.jpg& data-rawwidth=&258& data-rawheight=&258& class=&content_image& width=&258&&&/figure&&p&&/p&
The complete WebGL Insights book: 23 chapters from 42 authors and 25 technical reviewers.Table of Contents I. WebGL Implementations1. ANGLE: A Desktop Foundation for WebGL 2. Mozilla's Implementation of WebGL 3. Contin…
前段时间一个C#的同事转AS3，我给了他一些意见，他很顺利的转型了，现在已经可以适应RPG游戏开发。这些意见也给你看看：&br&&br&1.了解Flash Platform的全部技术。可以看看这篇文章：Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系：&a href=&//link.zhihu.com/?target=http%3A//zengrong.net/post/1295.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系&/a&&br&&br&&br&2.在下面选择一本书籍在1周内看完：&br&&ul&&li&Flash ActionScript 3殿堂之路 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/2249511/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flash ActionScript 3殿堂之路 (豆瓣)&/a&&/li&&li&ActionScript 3.0 Cookbook中文版 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/2367867/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ActionScript 3.0 Cookbook中文版 (豆瓣)&/a&&/li&&li&ActionScript 3.0编程精髓 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/3102069/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ActionScript 3.0编程精髓 (豆瓣)&/a&&/li&&/ul&这三本从难度上是从易到难，如果是有经验的开发者，建议看第三本《ActionScript 3.0编程精髓》，原因是足够深入。前面两本都很浅。&br&&br&&br&3.看完官方的ActionScript 3.0 开发人员指南 &a href=&//link.zhihu.com/?target=http%3A//help.adobe.com/zh_CN/as3/dev/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&help.adobe.com/zh_CN/as&/span&&span class=&invisible&&3/dev/index.html&/span&&span class=&ellipsis&&&/span&&/a&&br&建议用1周，看不懂的跳过，碰到问题再来看。&br&&br&&br&4.把官方的用于 Adobe Flash Platform 的 ActionScript 3.0 参考 &a href=&//link.zhihu.com/?target=http%3A//help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Adobe ActionScript(R) 3 (AS3 ) API 参考&/a& 浏览一遍，注意选择运行时和产品。&br&&ul&&li&运行时中，AIR可以暂时不看；&/li&&li&产品中，可以只看Flash Professional CS5.5 和更早版本这个部分。&/li&&/ul&5.看完下面两本书：&br&&ul&&li&Flash ActionScript3.0动画教程 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/3016575/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flash ActionScript 3.0动画教程 (豆瓣)&/a&&/li&&li&Flash ActionScript3.0动画高级教程 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/4175538/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flash ActionScript 3.0 动画高级教程 (豆瓣)&/a&&/li&&/ul&6.熟悉设计模式（如果以前不熟），建议在下面两本中选择一本（个人偏向第一本）：&br&&ul&&li&Head First 设计模式 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/2243615/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Head First 设计模式 (豆瓣)&/a&&/li&&li&ActionScript 3.0设计模式 &a href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/4001015/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ActionScript 3.0设计模式 (豆瓣)&/a&&/li&&/ul&7.熟悉一套UI框架，建议看这套：&a href=&//link.zhihu.com/?target=http%3A//www.minimalcomps.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MinimalComps&/a&，然后自己写一套UI框架。&br&如果还想了解其他的UI框架，可以看这里：&a href=&//link.zhihu.com/?target=http%3A//zengrong.net/flashassistant%23UI& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flash＆Flex大全&/a&&br&Flex是一套设计的非常不错的框架，有空可以看看源码。&br&&br&&br&8.这里还有一篇文章，可以参考一下：有Flex应用基础，做游戏还需要学习什么：&a href=&//link.zhihu.com/?target=http%3A//zengrong.net/post/1266.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有Flex应用基础，做游戏还需要学习什么&/a&&br&&br&更新&br&&b&关于Actionscript2.0的推荐&/b&&br&&br&评论中有同学提到关于推荐 Actionscript 2.0 的书籍，我的建议是：&br&&ol&&li&AS2是个半成品，高不成低不就，强烈不建议学习。&/li&&li&要么学AS1， 要么AS3。&/li&&/ol&如果你一定要学的话，我还是推荐两本我读过的不错的书（虽然你不一定能买到），Actionscript 2.0虽然很糟糕，但这两本书确实是相当不错的。&br&&br&&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//book.douban.com/subject/1278317/& target=&_blank& rel=&nofollow noreferrer&&Flash MX 2004 ActionScript 2.0与RIA应用程序开发 (豆瓣)&/a&&br&香港资深闪客
&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.luar.com.hk/& target=&_blank& rel=&nofollow noreferrer&&颜金桫&/a& 的作品，相当有深度。值得一读。&br&&figure&&img data-rawheight=&1280& data-rawwidth=&1001& src=&https://pic1.zhimg.com/394f8bf442df0_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1001& data-original=&https://pic1.zhimg.com/394f8bf442df0_r.jpg&&&/figure&&br&&br&&a class=& wrap external& href=&//link.zhihu.com/?target=http%3A//www.amazon.com/exec/obidos/ASIN//ref%3Dnosim/moockorg& target=&_blank& rel=&nofollow noreferrer&&Essential ActionScript 2.0: Colin Moock: 5&/a&&br&大名鼎鼎的Flash专家 &a href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/Colin_Moock& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Colin Moock&/a& 的作品，这本书的 Actionscript 3.0 版也相当不错。 &a href=&//link.zhihu.com/?target=http%3A//en.wikipedia.org/wiki/O%2527Reilly_Media& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&O'Reilly&/a& 的书确实是没说的。&br&这本书&b&没有&/b&简体中文版，但有一本台湾 &a href=&//link.zhihu.com/?target=http%3A//www.gotop.com.tw/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gotop 碁峰資訊&/a& 出的繁体中文版，趙英傑工作室翻譯，名稱為《精通ActionScript 2.0--探究Flash Actionscript 2.0物件導向程式設計的精奧進化》，当时我花了大概300人民币拿下这本九成新的二手书。我的面向对象编程入门就是从这本书开始的。&br&&figure&&img data-rawheight=&1280& data-rawwidth=&960& src=&https://pic4.zhimg.com/d3b9ea3ed892b3631fe73_b.jpg& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic4.zhimg.com/d3b9ea3ed892b3631fe73_r.jpg&&&/figure&
前段时间一个C#的同事转AS3，我给了他一些意见，他很顺利的转型了，现在已经可以适应RPG游戏开发。这些意见也给你看看： 1.了解Flash Platform的全部技术。可以看看这篇文章：Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Playe…
&a href=&//link.zhihu.com/?target=http%3A//www.scratchapixel.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Scratchapixel&/a&&br&&br&我看到这个网站后，感动得要哭！这一个网站就够了！！好好珍惜吧！&br&&br&想学opengl, 就用这个网站&a href=&//link.zhihu.com/?target=http%3A//ogldev.atspace.co.uk/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&OpenGL Step by Step&/a&。非常赞！老外好无私！&br&&br&想学DX，就看‘Practical Rendering and Computation with Direct3D 11’。 这本书把pipeline讲得非常清晰。这是我见过最好的一本DX的书。 （小八卦，real-time rendering的作者曾把这书当礼物送给我同事）
我看到这个网站后，感动得要哭！这一个网站就够了！！好好珍惜吧！ 想学opengl, 就用这个网站。非常赞！老外好无私！ 想学DX，就看‘Practical Rendering and Computation with Direct3D 11’。 这本书把pipeline讲得非常…
&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/58fdb9b544d88& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&图解 WebGL&Three.js 工作原理&/a&&p&“哥，你又来啦？”“是啊，我随便逛逛。” “别介啊……给我20分钟，成不？”“5分钟吧，我很忙的。”“不行，20分钟，不然我真很难跟你讲清楚。”“好吧……”“行，那进来吧，咱好好聊聊” & 一、我们讲什么？ 我们讲两个东西：1、WebGL背后的工作原...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/daab& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&H5 动画开发快车道 - 前端 - 掘金&/a&&p&janilychen ...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/post/db16a38cd1f0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Threejs之二:相机详解 - 掘金&/a&&p&透视投影相机(THREE.PerspectiveCamera) 所谓透视投影相机(PerspectiveCamera),基本等同于人的眼睛,意思就是:离的远的物体会显得比较小,近处的物体会比较大.透视投影相机的构造函数: PerspectiveCamera...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/58957bdf128fe10058daf0ee& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&近期项目中用到的一些自己写的或者整理而成的前端效果干货 - 前端 - 掘金&/a&&p&PUI总目录 想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。 一、jQuery上下滚动抽奖效果 这jQuery插件主要是被使用到一些抽奖页面。效果如下： 点击查看 在线演示 & 二、JQ...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/587c3aac8d6d8100588cfbb6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Threejs 入门教程 - 前端 - 掘金&/a&&p&简介: Three.js是一个伟大的webGL开源库,它简化了浏览器3D编程,对webGL进行了封装,使得开发者可以直接使用JavaScript在浏览器中创建复杂多变的全景3D场景. Three.js官网:&a href=&https://link.zhihu.com/?target=https%3A//threejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&three.js - Javascript 3D library&/a&; Three...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/5882edde1b69ef& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HT for Web 自定义 3D 模型的 WebGL 应用&/a&&p&有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/1e005ce34976& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《穿越宇宙的邀请函》没你想得那么难 - 前端 - 掘金&/a&&p&前几天天猫双十一预热页面——《穿越宇宙的邀请函》，几乎是迄今为止移动端大型活动运营页面中最炫酷的一个，狠狠地刷了一波朋友圈。如果还没看过，可以在移动端打开这个链接欣赏一下。这里从技术角度对它进行一些比较详细的分析。先上结论，这个页面在实现上并不复杂，不管是技术...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/55a8b8f2e4b04ab1bb67138b& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Two.js - 前端 - 掘金&/a&&p&一个前端绘图的工具，用统一的 API 来绘制 SVG / Canvas / WebGL 等图像画面。...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/564a88c460bd4828& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL 实现雨水特效实验 - 前端 - 掘金&/a&&p&示例 下载源码 今天我们将要和大家分享一些 WebGL 实验，在这个实验中我们将创建一个非常逼真的雨滴效果，并把它放到不同的场景中去。在这篇文章中，我们将给出制作这种效果所用到的一些一般性技术和技巧的概览。 请注意：文中制作的效果还处于试验阶段，可能无法在所有...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/b294bc12694d68& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sigma.js - 前端画 Graph 工具&/a&&p&一个基于 Canvas，WebGL 优化的前端画图工具，可以展示 Graph 各种形态及交互动作...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/56af075ac24aad0d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&超酷的 WebGL 水母动画 - 前端 - 掘金&/a&&p&可以旋转视图、放大缩小...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/567aa1d8788107d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL技术储备指南 - 前端 - 掘金&/a&&p&WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。 示例WebGL 很酷，有以下 demos 为证...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/b215d66de5500f& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5, CSS3, WebGL, SVG 动效库&/a&&p&一个 HTML5, CSS3, WebGL, SVG 动效库...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/bc58& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[翻译] 图形学秘籍的目录 Real-Time Rendering3-- 图像渲染管线&/a&&p&实现渲染最核心的组件是图像渲染管线，也简单的称为管线。它最主要的功能是在指定的虚拟摄像头，3d对象，光源，阴影方程式，纹理等里，生成或渲染出一张2d图片。在这张生成图里，所有对象的坐标和形状都会受到它们自身几何形状，摄像头摆放的位置，以及周围环境的影响。而它们...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/5afb7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL 绘制三角形 - 前端 - 掘金&/a&&p&在上一篇文章WebGL 初探中，我们熟悉了 WebGL 的简单背景以及如何绘制一个简单的点。但是只绘制点我们是无法进入三维世界的，本篇章将讲解如何使用 WebGL 绘制三角形，因为很多 3D 图形都是使用三角形为基础进行渲染的，所以有些对 GPU 性能指标的评...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/575e4d3b86fd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一个采用 Three.js 的 3D 动画场景制作：飞行者&/a&&p&翻译了这么久～含泪终于！终于！终于！翻译完人生第一篇译文了.. 本文译自：The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 一篇关于探讨使用 Three.js 创建 3D...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/57f9edfdd08d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL 初探 - 前端 - 掘金&/a&&p&目前，我们有很多方案可以快速的接触到 WebGL 并绘制复杂的图形，但最后发现我们忽视了很多细节性的东西。当然，这对初学 WebGL 是有必要的，它能迅速提起我们对 WebGL 的学习兴趣。当学习到更加深入的阶段时，我们更想了解 WebGL 的工作机制，这也将...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/57bfece12e958aa& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&数百个 HTML5 例子学习 HT 图形组件 - WebGL 3D 篇&/a&&p&《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/584fa58b8e450a006ad27182& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&用 WebGl 加速 2D 渲染&/a&&p&Introduction This is a library targets 2D hardware-acclerated graphic rendering. This is useful in data presentation scenario In...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/d6db& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL - 片元着色器 0. 模板准备&/a&&p&前面一段时间写了三篇关于webgl入门的文章，先是讲了下计算机图形学简介，再是成像原理，以及几何对象和坐标变换，感觉自己讲的不好，讲的不够入门。所以暂时组织一下文章节奏，比如几何对象和坐标转换完全可以拆分下。成像原理完全可以讲一下着色器。 在这个调整的...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/ff4b006d5b481d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL - 片元着色器 1.Bloom 特效实现&/a&&p&第一件事先上demo吧 & & Bloom特效 demo下载地址 ...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/ff4b005c5d534b& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL - 片元着色器 2. 灰度图实现&/a&&p&灰度图 老规矩第一步上&demo demo下载地址 灰度图定义 首先我们看看什么叫做灰度图。可能大家会混淆一些东西，比如我们以前的黑白电视机，实际上不是黑白的，而是有灰度的。 灰度图： 灰度图...&/p&&br&&br&&a href=&https://link.zhihu.com/?target=https%3A//juejin.im/entry/ff4b005c497c40& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5 的 WebGL 实现的 3D 和 2D 拓扑树&/a&&p&在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，...&/p&
“哥，你又来啦？”“是啊，我随便逛逛。” “别介啊……给我20分钟，成不？”“5分钟吧，我很忙的。”“不行，20分钟，不然我真很难跟你讲清楚。”“好吧……”“行，那进来吧，咱好好聊聊” & 一、我们讲什么？ 我们讲…
&p&这个用项目都说很简单，我只能说，会者不难，难者不会。
这个项目的执行者是我，我简单来说下楼主关注的问题吧：
1、技术：threejs 以及简单的glsl了解。
2、周期：从提案到开发完成大概一个月左右的时间，有设计开发并行时间（其中开发三周，两周写功能，一周给产品爸爸修改。）。
一、关于怎么实现这个地球（星空以及流星实现就不描述了）：
1、地球：&/p&&p&
（1）用threejs绘制一个球体，地球的材质选用&i&冯氏（&/i&&b&MeshPhongMaterial&/b&&i&）因为想创建一个明亮的球体，然后对关照也会有反应，所以选择这种材质。
（2）&/i&然后找一个地球的贴图贴上即可（这个地球的贴图颜色方面设计有优化过）
2、凹凸感：&/p&&p&
利用bumpMap贴图以及specularMap贴图来完成。（需要有光照，不然显示不出凹凸感）
3、云层：&/p&&p&
利用一张云层的png的图来完成（也可以用jpg，不过jpg得对云层进行处理）这里做了两层云来弥补云层稀疏的缺陷。&/p&&p&
为了让云层和地球能有个区分，将云层的球体大小设置比地球大1号，不然云层会贴上去。没有层次感。
4、灯光：&/p&&p&
（1）环境光&/p&&p&
（2）聚光灯光（类似手电筒的光，因为只需要照亮地球的某一部分）&/p&&p&
tips：这个灯光的感觉完全得靠设计师和开发一起调整了。（推荐gui这个库，调试起立会比较方便）&/p&&br&&p&
5、大气层：
首先想到了用一张png的图去做，然而做出来的效果实在是差，所以就飞了。
然后考虑用shader区写一个（threejs支持自定义的shader），同样创建两个球体，一个黑色的球体，一个用材质用shader写的（为了有大气层的效果，这个球体基于原本的球体进行放大一点）。具体的代码就不再这个演示了。
&/p&&p&大致这样地球就实现出来了。其中的云层的动画，地球的转动、灯光的颜色、地球的反射强度、大气层的强弱颜色，等等、这些都需要和设计一起花时间进行调试。
二、点位置的判断和音频的切换。
1、点位置的判断&/p&&p&
刚开始的做法：在地球上划分五等分的区域，然后通过射线检测来判断点处于哪个区域来实现区域的划分。（刚开是因为没有点出现在南北极，所以体验上还好，后来产品爸爸说点会出现在南北极，然后这种划分办法在切换相机移动的时候就感觉很奇怪）&/p&&p&
改进做法： 反正五个点是固定的，所以通过判断两点距离哪个离的近相机就去哪个地方。这里的两个点是用射线检测与地球相交的点与五个点分别判断得到最近的距离。
2、音频的切换&/p&&p&
为了加载所以将5段音频sprite，因为判断出了在离哪个点近，得到那个点的索引值，播放对应的音频就可以了。（视频亦是如此）
&/p&&p&三、我觉得还可以进行优化：
1、地球在手指滑动end之后，可以缓动停止。&/p&&p&
2、星空可以考虑做在3d层里，这样在地球刚开始出来的那一瞬间，会感觉整个星空都是转动的。&/p&&p&
3、点位置的设定，因为现在只有5个点，假如产品爸爸说要再加5个点，这5个点的坐标设置会变的很蛋疼，我的想法是可不可以在二维的贴图上描绘出这个点，然后在通过一段转换代码，将这个点转换到3d地球上去（一劳永逸）。&/p&&p&
4、从地球切换到视频那一块的动画，可以考虑用不同的动画描述，而不是单一的云层。
5、实时的经纬度切换。（现在地球上显示的经纬度是固定的，能实现实时切换可能会帅一点）
虽然说这个项目并不是那么高大上，但我觉得我已经迈进了webgl的世界了。
附上地球源码供参考：&a href=&//link.zhihu.com/?target=https%3A//github.com/flowers1225/threejs-earth& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&flowers1225/threejs-earth&/a&
这个用项目都说很简单，我只能说，会者不难，难者不会。
这个项目的执行者是我，我简单来说下楼主关注的问题吧：
1、技术：threejs 以及简单的glsl了解。
2、周期：从提案到开发完成大概一个月左右的时间，有设计开发并行时间（其中开发三周，两周写功能…
Github 上有关注的的话：&br&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/vispy/vispy& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vispy/vispy · GitHub&/a&：python 一个高性能的数据可视化视觉库&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//github.com/stackgl& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&stackgl · GitHub&/a&：WebGL 各种组件以及一些 demos（详见：&a href=&//link.zhihu.com/?target=http%3A//stack.gl/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&stack.gl&/a&）&/li&&/ul&&br&&br&非 Github，一些站点：&br&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//www.shadertoy.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Shadertoy&/a&：&b&我最喜欢的视觉技术网站之一，&/b&shader 编程共享网站，里面很多很酷的例子。有一些已经被我移植到 opengl es 上了（详见：&a href=&//link.zhihu.com/?target=https%3A//github.com/nekocode/murmur& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&nekocode/murmur · GitHub&/a&）&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//www.openprocessing.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&OpenProcessing&/a&：图像处理，可视化的话 也不要忘记了 &b&Processing ，&/b&这个站点上很多很酷的，甚至可交互的例子，有点 java 底子，又想研究可视化技术的话，它是一个十分经典而且不错的选择&br&&/li&&li&&a href=&//link.zhihu.com/?target=http%3A//transitions.glsl.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GLSL.io – Open Collection of GLSL Transitions&/a&：也是一个 glsl shader 分享网站，主要关注于图片切换效果上&/li&&/ul&
Github 上有关注的的话： ：python 一个高性能的数据可视化视觉库：WebGL 各种组件以及一些 demos（详见：） 非 Github，一些站点： ：我最喜欢的视觉技术网站之一，shader 编程共享网站，里面很多…
&p&首先要明白一点，shadertoy是一个 基于 pixel shaders 的 playgrounds.&/p&&p&对于pixel shaders不同于传统意义上的shader,传统意义上的shader是根据GPU渲染管线，从cpu把图元传递到顶点着色，在通过varing传递给片元，从而处理光照的。所以顶点着色器是每个顶点运行一次，而片元着色器是每个片元（像素）运行一次。而pixel shaders中你可以理解成只是相当于在opengl中只对片元着色（fragment）进行编程，你可以想象成是一个canvas画布。&/p&&p&想要开始进行shadertoy学习，你先从如下几点入手：&/p&&p&1、了解GLSL的基本语法，并掌握数据类型（比如向量，矩阵），以及一大堆c语言的处理函数&/p&&p&可以从这几个资源去学习：&/p&&p&1.1 &a href=&//link.zhihu.com/?target=http%3A//blog.csdn.net/misol/article/details/7658949& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GLSL. 语法基础&/a&；&/p&&p&1.2 &a href=&//link.zhihu.com/?target=http%3A//www.cnblogs.com/kex1n/p/3941765.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GLSL 内建函数 &/a&&/p&&p&1.3 片元着色编程学习：&a href=&//link.zhihu.com/?target=http%3A//thebookofshaders.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Book of Shaders&/a&&/p&&p&1.4 冯乐乐写的相关教程：&a href=&//link.zhihu.com/?target=http%3A//blog.csdn.net/candycat1992/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【ShaderToy】 - candycat &/a&&/p&&p&&br&&/p&&p&2、有了以上对于glsl的基本语法以及片元着色编程的基础，就学习shadertoy自己的几个API,参见如下网址：&a href=&//link.zhihu.com/?target=http%3A//www.shadertoy.com/howto& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&shadertoy.com/howto&/span&&span class=&invisible&&&/span&&/a&&/p&&p&尤其需要注意一下几个件事：&/p&&p&2.1、入口函数不是main,而是
&b&void mainImage( out vec4 fragColor, in vec2 fragCoord );&/b&&/p&&p&2.2 、 shadertoy自己的输入值&/p&&p&uniform vec3 iR&br&uniform float iGlobalT&br&uniform float iGlobalD&br&uniform float iGlobalF&br&uniform float iChannelTime[4];&br&uniform vec4 iM&br&uniform vec4 iD&br&uniform float iSampleR&br&uniform vec3 iChannelResolution[4];&br&uniform samplerXX iC &/p&&p&3、shdertoy的扩展了几个特殊输入&/p&&p&3.1 声音着色器：&b&vec2 mainSound( float time )&/b& 本质上就是H5的audio而已，但通过shader输入。&/p&&p&3.2 VR着色器： &b&void mainVR( out vec4 fragColor, in vec2 fragCoord, in vec3 fragRayOri, in vec3 fragRayDir )&/b& &/p&&p&以上这些在官网的howto里面全有。&/p&&p&&br&&/p&&p&4、掌握了如上这些知识，基本上可以尝试写shader了。没事多看看上面几个大神的的作品里代码的实现，也经常去逛逛这些大神的blog。很多实现的思路可以从他们的分享里获得，比如iq[&a href=&//link.zhihu.com/?target=http%3A//www.shadertoy.com/user/iq& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&shadertoy.com/user/iq&/span&&span class=&invisible&&&/span&&/a&], Fabrice Neyret[&a href=&//link.zhihu.com/?target=https%3A//www.shadertoy.com/user/FabriceNeyret2& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&shadertoy.com/user/Fabr&/span&&span class=&invisible&&iceNeyret2&/span&&span class=&ellipsis&&&/span&&/a&] &/p&&p&&br&&/p&&p&另外或许好的shader需要充分学习关注大神们的数学思路，注意学习图形学千万别过多关注代数意义，而要把精力放在矩阵、向量、标量这三者运算的几何意义上！&/p&&p&————————————————————&/p&&p&补充《关于shadertoy如何制作3Dshader》：&/p&&p&1、shadertoy输入源只有默认的几张图和2段视频&/p&&p&2、利用shadertoy制作的3D的模型的话，使用的是ray-Marching技术构建的distance filed&/p&&p&所谓ray-marching类似于简单的ray-tracing原理。&/p&&p&3、过程化建模。&/p&&p&利用数学公式构建基础几何体，比如球体，盒子，锥体，圆柱体之类。然后利用交差并补运算做排列组合。在加以blend和twist等扭曲计算。&/p&&p&4、利用这种方法建立的模型都是体素。形状变换复杂，可以非常真实的描绘全局光线。但运算量巨大。&/p&&p&5、过程化材质&/p&&p&&br&&/p&&p&具体请看iq大神博客：&/p&&a href=&//link.zhihu.com/?target=http%3A//www.iquilezles.org/www/index.htm& data-draft-node=&block& data-draft-type=&link-card& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fractals, computer graphics, mathematics, demoscene and more&/a&&p&iq大神的视频教程：&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//www.youtube.com/user/mari1234mari& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&youtube.com/user/mari12&/span&&span class=&invisible&&34mari&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&这个视频教程包含基础的shadertoy如何写&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg/videos& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&youtube.com/channel/UCc&/span&&span class=&invisible&&AlTqd9zID6aNX3TzwxJXg/videos&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&br&&/p&&p&想要更多探讨可以加我的群：【视觉效果编程】，大家一起探讨。&/p&
首先要明白一点，shadertoy是一个 基于 pixel shaders 的 playgrounds.对于pixel shaders不同于传统意义上的shader,传统意义上的shader是根据GPU渲染管线，从cpu把图元传递到顶点着色，在通过varing传递给片元，从而处理光照的。所以顶点着色器是每个顶点运…
&figure&&img src=&https://pic4.zhimg.com/v2-fbd401c501c2bb8c15b88a_b.jpg& data-rawwidth=&1240& data-rawheight=&679& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic4.zhimg.com/v2-fbd401c501c2bb8c15b88a_r.jpg&&&/figure&&p&&i&本文旨在介绍如何搭建WebVR单页面工程以支持多场景开发。&/i&&/p&&p&首先，作为一个基本的前端工程来说，我们需要让代码“工程化”，不仅要提供编译构建、压缩打包功能，还要让每个页面模块化；&br&延伸到WebVR工程，我们也需要考虑就必须考虑“多页面”模块化，即提供多个场景模块化开发，因为一个完整的WebVR App不仅仅只有一个场景。这里可以参考google的WebVR多场景示例：&a href=&https://link.zhihu.com/?target=https%3A//vr.chromeexperiments.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&vr.chromeexperiments.com&/span&&span class=&invisible&&/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-963290aee5bcbe4789d3af_b.jpg& data-size=&normal& data-rawwidth=&1240& data-rawheight=&611& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic4.zhimg.com/v2-963290aee5bcbe4789d3af_r.jpg&&&figcaption&webvr多场景应用&/figcaption&&/figure&&p&多场景开发，最简单的方式就是，一个场景对应一份html、css、js，多个页面需要多个html，每次页面跳转需要重新进行VR渲染进行初始化。&br&实际上我们在多场景中，场景初始化只需要执行一次（比如，创建一个场景-&创建相机-&创建渲染器），我们只需要一个index.html作为入口页面，将VR场景初始化、创建、回收、切换封装成公用组件。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ca5fd66fc868f277f083c4cd476d6c04_b.jpg& data-size=&normal& data-rawwidth=&1169& data-rawheight=&558& class=&origin_image zh-lightbox-thumb& width=&1169& data-original=&https://pic4.zhimg.com/v2-ca5fd66fc868f277f083c4cd476d6c04_r.jpg&&&figcaption&WebVR场景切换，用户的耐心是有限的&/figcaption&&/figure&&p&在首次进入场景时进行初始化，在需要场景切换时进行场景回收和按需加载，这样一来，用户切换场景时，不用把时间浪费在等待html和初始化场景上。基于以上思路，本人总结的一套WebVR工程搭建方案，供各位参考。&/p&&p&项目地址：&a href=&https://link.zhihu.com/?target=https%3A//github.com/YoneChen/webvr-webpack2-boilerplate& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&github.com/YoneChen/web&/span&&span class=&invisible&&vr-webpack2-boilerplate&/span&&span class=&ellipsis&&&/span&&/a&&br&Demo：&a href=&https://link.zhihu.com/?target=https%3A//yonechen.github.io/webvr-webpack2-boilerplate/dist/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&https://YoneChen.github.io/webvr-webpack2-boilerplate/dist/&/a&&br&相关技术栈：&code&three.js&/code&、&code&webpack2&/code&、&code&es6/7&/code&&br&想详细了解WebVR开发步骤，也欢迎参考我的文章&a href=&https://link.zhihu.com/?target=http%3A//www.jianshu.com/p/c9c03e14ba9d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《VR大潮来袭——前端开发能做些什么》&/a&&/p&&h2&实现功能&/h2&&ul&&li&VR多场景模块化开发&/li&&li&支持VR场景创建、回收、切换&/li&&li&项目自动化构建与压缩打包&/li&&/ul&&h2&WebVR相关库&/h2&&ul&&li&three.js&/li&&li&tween.js&/li&&li&webvr-polyfill.js&/li&&/ul&&h2&主要目录结构&/h2&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&webpack
|-- webpack.config.js
# 公共配置
|-- webpack.dev.js
# 开发配置
|-- webpack.prod.js
# 生产配置
# 项目源码
# WebVR场景目录
|-- page1.js
|-- page2.js
# 核心目录，包括webvr封装类和polyfill
|-- VRCore.js
|-- VRPage.js
|-- vendor.js
|-- assets
# 素材目录，包括3d模型、纹理、音频等
|-- texture
|-- index.js
# WebVR启动页
|-- index.html
# WebVR公用页面
package.json
&/code&&/pre&&/div&&p&我们先来看看index.html，其实整个body就只有一个dom，用来append我们的&code&canvas&/code&，毕竟所以场景都在&code&canvas&/code&里运行。&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&cp&&&!DOCTYPE html&&/span&
&span class=&p&&&&/span&&span class=&nt&&html&/span& &span class=&na&&lang&/span&&span class=&o&&=&/span&&span class=&s&&&en&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&head&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&charset&/span&&span class=&o&&=&/span&&span class=&s&&&UTF-8&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&meta&/span& &span class=&na&&name&/span&&span class=&o&&=&/span&&span class=&s&&&viewport&&/span& &span class=&na&&content&/span&&span class=&o&&=&/span&&span class=&s&&&width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&title&/span&&span class=&p&&&&/span&webVR-INDEX&span class=&p&&&/&/span&&span class=&nt&&title&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&head&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&body&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&section&/span& &span class=&na&&class&/span&&span class=&o&&=&/span&&span class=&s&&&webvr-container&&/span&&span class=&p&&&&/&/span&&span class=&nt&&section&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&body&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&html&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&有了公用html，我们希望这样开发WebVR应用，配置一个入口路由列表，一个场景对应一个js脚本。&br&首先是&code&index.js&/code&入口，以配置场景的路由跳转并传入欲渲染的dom。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// src/index.js&/span&
&span class=&kr&&const&/span& &span class=&nx&&routes&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&
&span class=&p&&{&/span&
&span class=&nx&&route&/span&&span class=&o&&:&/span& &span class=&s1&&''&/span&&span class=&p&&,&/span& &span class=&c1&&// e.g http://127.0.1:9000/&/span&
&span class=&nx&&path&/span&&span class=&o&&:&/span& &span class=&s1&&'page1.js'&/span&
&span class=&p&&},&/span&
&span class=&p&&{&/span&
&span class=&nx&&route&/span&&span class=&o&&:&/span& &span class=&s1&&'2'&/span&&span class=&p&&,&/span& &span class=&c1&&// e.g http://127.0.1:9000/2&/span&
&span class=&nx&&path&/span&&span class=&o&&:&/span& &span class=&s1&&'page2.js'&/span&
&span class=&p&&}&/span&
&span class=&p&&];&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&init&/span&&span class=&p&&(&/span&&span class=&nx&&routes&/span&&span class=&p&&,&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.webvr-container'&/span&&span class=&p&&));&/span&
&/code&&/pre&&/div&&p&单个场景的页面实例：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// src/views/page1.js&/span&
&span class=&c1&&// 继承VRPage父类，开发每一个场景&/span&
&span class=&kr&&import&/span& &span class=&nx&&VRPage&/span& &span class=&nx&&from&/span& &span class=&s1&&'core/js/VRPage'&/span&&span class=&p&&;&/span&
&span class=&kr&&class&/span& &span class=&nx&&Index&/span& &span class=&kr&&extends&/span& &span class=&nx&&VRPage&/span& &span class=&p&&{&/span&
&span class=&nx&&assets&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&TEXTURE_SKYBOX&/span&&span class=&o&&:&/span& &span class=&s1&&'texture/360bg.jpg'&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&nx&&start&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 启动渲染前，创建添加3d模型，比如天空、地面、灯光、背景音等&/span&
&span class=&kr&&const&/span& &span class=&p&&{&/span& &span class=&nx&&TEXTURE_SKYBOX&/span& &span class=&p&&}&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&assets&/span&&span class=&p&&;&/span&
&span class=&kr&&const&/span& &span class=&nx&&geometry&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&SphereGeometry&/span&&span class=&p&&(&/span&&span class=&nx&&radius&/span&&span class=&p&&,&/span&&span class=&mi&&50&/span&&span class=&p&&,&/span&&span class=&mi&&50&/span&&span class=&p&&);&/span&
&span class=&kr&&const&/span& &span class=&nx&&material&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&MeshBasicMaterial&/span&&span class=&p&&(&/span& &span class=&p&&{&/span& &span class=&nx&&map&/span&&span class=&o&&:&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&TextureLoader&/span&&span class=&p&&().&/span&&span class=&nx&&load&/span&&span class=&p&&(&/span&&span class=&nx&&TEXTURE_SKYBOX&/span&&span class=&p&&),&/span&&span class=&nx&&side&/span&&span class=&o&&:&/span&&span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&BackSide&/span& &span class=&p&&}&/span& &span class=&p&&);&/span&
&span class=&kr&&const&/span& &span class=&nx&&panorama&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&Mesh&/span&&span class=&p&&(&/span&&span class=&nx&&geometry&/span&&span class=&p&&,&/span&&span class=&nx&&material&/span&&span class=&p&&);&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&nx&&panorama&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&nx&&loaded&/span&&span class=&p&&()&/span& &span class=&p&&{&/span& &span class=&c1&&// 资源加载后钩子函数&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&sb&&`page has been loaded.`&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&nx&&update&/span&&span class=&p&&(&/span&&span class=&nx&&delta&/span&&span class=&p&&)&/span& &span class=&p&&{&/span& &span class=&c1&&// 动画渲染钩子函数&/span&
&span class=&c1&&// animate&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&nx&&Index&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&这里参照了类似Unity3d和React的开发模式，在start方法里创建3d模型，在update方法里处理3d动画，这样的好处在于：&/p&&ol&&li&每一个场景都可以进行独立开发而互不影响；&/li&&li&一旦VR环境初始化之后，不需要在每次场景跳转切换时重新初始化一遍。&/li&&/ol&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aab_b.jpg& data-size=&normal& data-rawwidth=&1240& data-rawheight=&1176& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic1.zhimg.com/v2-aab_r.jpg&&&figcaption&WebVR多场景运行机制&/figcaption&&/figure&&p&VRCore.js作为公用模块管理整个webvr应用的所有子场景，包括场景初始化、VR相机渲染、场景切换、场景回收等静态函数。&br&VRPage.js作为每个场景的工厂类，支持不同3d页面（场景）之间的代码独立。&br&每一个VR页面的生命周期都是：创建物体-&加载模型-&启动渲染的过程，因此，需要创建一个基类，来实现每一个VR场景实例的生命周期。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&//common/VRPage.js&/span&
&span class=&kr&&import&/span& &span class=&o&&*&/span& &span class=&nx&&as&/span& &span class=&nx&&WebVR&/span& &span class=&nx&&from&/span& &span class=&s1&&'VRCore.js'&/span& &span class=&c1&&//管理所有场景的公用模块&/span&
&span class=&c1&&// VR场景工厂&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&kr&&class&/span& &span class=&nx&&VRPage&/span& &span class=&p&&{&/span&
&span class=&nx&&constructor&/span&&span class=&p&&(&/span&&span class=&nx&&options&/span&&span class=&o&&=&/span&&span class=&p&&{})&/span& &span class=&p&&{&/span&
&span class=&c1&&// 创建场景，如果场景已初始化&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&createScene&/span&&span class=&p&&(&/span&&span class=&nx&&options&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&start&/span&&span class=&p&&();&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&loadPage&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&nx&&loadPage&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&DefaultLoadingManager&/span&&span class=&p&&.&/span&&span class=&nx&&onLoad&/span& &span class=&o&&=&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// 模型加载完毕，即开启渲染&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&renderStart&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&update&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&loaded&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&nx&&start&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 实例的start方法将在启动渲染之前，场景相机初始化后执行。&/span&
&span class=&p&&}&/span&
&span class=&nx&&loaded&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 实例的loaded方法将在场景资源加载后执行。&/span&
&span class=&p&&}&/span&
&span class=&nx&&update&/span&&span class=&p&&(&/span&&span class=&nx&&delta&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&c1&&// 实例的update方法将在渲染器每一次渲染时执行。&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&这里使用&code&THREE.DefaultLoadingManager.onLoad&/code&方法监听场景是否加载完毕，一旦加载完毕，便启动渲染。&/p&&h2&WebVR场景首次渲染&/h2&&p&主要包括四个步骤&/p&&ol&&li&新建场景&/li&&/ol&&p&&br&&/p&&ul&&li&创建VR相机&/li&&li&加载场景脚本与资源&/li&&li&开启动画渲染&/li&&/ul&&h2&VR环境初始化&/h2&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kd&&function&/span& &span class=&nx&&init&/span&&span class=&p&&(&/span&&span class=&nx&&routers&/span&&span class=&p&&,&/span& &span class=&nx&&container&/span&&span class=&p&&,&/span& &span class=&nx&&fov&/span&&span class=&p&&,&/span& &span class=&nx&&far&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&createScene&/span&&span class=&p&&(...&/span&&span class=&nb&&Array&/span&&span class=&p&&.&/span&&span class=&nx&&prototype&/span&&span class=&p&&.&/span&&span class=&nx&&slice&/span&&span class=&p&&.&/span&&span class=&nx&&call&/span&&span class=&p&&(&/span&&span class=&nx&&arguments&/span&&span class=&p&&,&/span&&span class=&mi&&1&/span&&span class=&p&&));&/span&
&span class=&nx&&Router&/span&&span class=&p&&.&/span&&span class=&nx&&createRouter&/span&&span class=&p&&(&/span&&span class=&nx&&routers&/span&&span class=&p&&);&/span& &span class=&c1&&// 创建路由管理器&/span&
&span class=&p&&}&/span&
&span class=&kd&&function&/span& &span class=&nx&&createScene&/span&&span class=&p&&({&/span&&span class=&nx&&domContainer&/span&&span class=&o&&=&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&body&/span&&span class=&p&&,&/span&&span class=&nx&&fov&/span&&span class=&o&&=&/span&&span class=&mi&&70&/span&&span class=&p&&,&/span&&span class=&nx&&far&/span&&span class=&o&&=&/span&&span class=&mi&&4000&/span&&span class=&p&&})&/span& &span class=&p&&{&/span&
&span class=&c1&&// 创建场景&/span&
&span class=&nx&&Scene&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&Scene&/span&&span class=&p&&();&/span&
&span class=&c1&&// 创建相机&/span&
&span class=&nx&&Camera&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&PerspectiveCamera&/span&&span class=&p&&(&/span&&span class=&nx&&fov&/span&&span class=&p&&,&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&innerWidth&/span&&span class=&o&&/&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&innerHeight&/span&&span class=&p&&,&/span&&span class=&mf&&0.1&/span&&span class=&p&&,&/span&&span class=&nx&&far&/span&&span class=&p&&);&/span&
&span class=&nx&&Camera&/span&&span class=&p&&.&/span&&span class=&nx&&position&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&(&/span& &span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&mi&&0&/span& &span class=&p&&);&/span&
&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&nx&&Camera&/span&&span class=&p&&);&/span&
&span class=&c1&&// 创建渲染器&/span&
&span class=&nx&&Renderer&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&WebGLRenderer&/span&&span class=&p&&({&/span& &span class=&nx&&antialias&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span& &span class=&p&&}&/span& &span class=&p&&);&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&setSize&/span&&span class=&p&&(&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&innerWidth&/span&&span class=&p&&,&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&innerHeight&/span&&span class=&p&&);&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&shadowMapEnabled&/span& &span class=&o&&=&/span& &span class=&kc&&true&/span&&span class=&p&&;&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&setPixelRatio&/span&&span class=&p&&(&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&devicePixelRatio&/span&&span class=&p&&);&/span&
&span class=&nx&&domContainer&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&domElement&/span&&span class=&p&&);&/span&
&span class=&nx&&initVR&/span&&span class=&p&&();&/span&
&span class=&nx&&resize&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&首先是three.js开发三部曲，创建场景、相机、渲染器，接着调用&code&initVR&/code&函数来完成VR场景分屏和陀螺仪控制，WebVR基本开发步骤可以参考。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kd&&let&/span& &span class=&nx&&Display&/span&&span class=&p&&;&/span&
&span class=&kd&&function&/span& &span class=&nx&&initVR&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 获取VR设备，通知渲染器启动VR渲染模式&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&vr&/span&&span class=&p&&.&/span&&span class=&nx&&enabled&/span& &span class=&o&&=&/span& &span class=&kc&&true&/span&&span class=&p&&;&/span&
&span class=&c1&&// 获取VR头显实例&/span&
&span class=&nx&&navigator&/span&&span class=&p&&.&/span&&span class=&nx&&getVRDisplays&/span&&span class=&p&&().&/span&&span class=&nx&&then&/span&&span class=&p&&(&/span& &span class=&nx&&display&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&Display&/span& &span class=&o&&=&/span& &span class=&nx&&display&/span&&span class=&p&&[&/span&&span class=&mi&&0&/span&&span class=&p&&];&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&vr&/span&&span class=&p&&.&/span&&span class=&nx&&setDevice&/span&&span class=&p&&(&/span&&span class=&nx&&Display&/span&&span class=&p&&);&/span&
&span class=&c1&&// 初始化控制VR渲染模式的控制按钮&/span&
&span class=&nx&&VRButton&/span&&span class=&p&&.&/span&&span class=&nx&&init&/span&&span class=&p&&(&/span&&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&domElement&/span&&span class=&p&&.&/span&&span class=&nx&&parentNode&/span&&span class=&p&&,&/span&&span class=&nx&&Display&/span&&span class=&p&&,&/span&&span class=&nx&&Renderer&/span&&span class=&p&&);&/span&
&span class=&p&&}).&/span&&span class=&k&&catch&/span&&span class=&p&&(&/span&&span class=&nx&&err&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&warn&/span&&span class=&p&&(&/span&&span class=&nx&&err&/span&&span class=&p&&));&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&h2&开启动画渲染&/h2&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// VRCore.js&/span&
&span class=&kd&&function&/span& &span class=&nx&&renderStart&/span&&span class=&p&&(&/span&&span class=&nx&&callback&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&animate&/span&&span class=&p&&(&/span&&span class=&kd&&function&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&callback&/span&&span class=&p&&();&/span&
&span class=&nx&&TWEEN&/span&&span class=&p&&.&/span&&span class=&nx&&update&/span&&span class=&p&&();&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&render&/span&&span class=&p&&(&/span&&span class=&nx&&Scene&/span&&span class=&p&&,&/span& &span class=&nx&&Camera&/span&&span class=&p&&);&/span&
&span class=&p&&});&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&这里动画渲染主要封装了three.js的&code&renderer.animate()&/code&方法，入参作传入一个&code&callback&/code&回调方法，这个方法会在动画渲染的每一帧中执行。&/p&&h2&WebVR场景切换&/h2&&p&主要包括四个步骤&/p&&ol&&li&暂停渲染&/li&&li&清空当前场景物体&/li&&li&请求并加载目标场景脚本与资源&/li&&li&重启渲染&/li&&/ol&&h2&暂停动画渲染&/h2&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kd&&function&/span& &span class=&nx&&renderStop&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nx&&Renderer&/span&&span class=&p&&.&/span&&span class=&nx&&dispose&/span&&span class=&p&&();&/span& &span class=&c1&&// 暂停渲染器渲染&/span&
&span class=&nx&&TWEEN&/span&&span class=&p&&.&/span&&span class=&nx&&removeAll&/span&&span class=&p&&();&/span& &span class=&c1&&// 移除所有tween动画&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&h2&回收当前场景&/h2&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kd&&function&/span& &span class=&nx&&clearScene&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&kd&&let&/span& &span class=&nx&&i&/span& &span class=&o&&=&/span& &span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&children&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span& &span class=&o&&-&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span& &span class=&o&&&=&/span& &span class=&mi&&0&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&--&/span& &span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&children&/span&&span class=&p&&[&/span&&span class=&nx&&i&/span&&span class=&p&&].&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'PerspectiveCamera'&/span&&span class=&p&&)&/span& &span class=&k&&continue&/span&&span class=&p&&;&/span& &span class=&c1&&// 保留相机&/span&
&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&remove&/span&&span class=&p&&(&/span&&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&children&/span&&span class=&p&&[&/span&&span class=&nx&&i&/span&&span class=&p&&]);&/span& &span class=&c1&&// 移除当前场景中的物体&/span&
&span class=&p&&}&/span&
&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&fog&/span& &span class=&o&&=&/span& &span class=&kc&&null&/span&&span class=&p&&;&/span& &span class=&c1&&// 清除场景雾&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&h2&按需加载&/h2&&p&切换到下一场景，我们需要请求对应的场景脚本，这里使用webpack2的&a href=&https://link.zhihu.com/?target=https%3A//webpack.js.org/guides/code-splitting-async/%23dynamic-import-import-& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&import&/a&函数进行代码分离，当然你也可以使用&code&require.ensure(filename =& {require(filename)})&/code&方法。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span&&span class=&p&&(&/span&&span class=&sb&&`views/&/span&&span class=&si&&${&/span&&span class=&nx&&fileName&/span&&span class=&si&&}&/span&&span class=&sb&&.js`&/span&&span class=&p&&);&/span&
&/code&&/pre&&/div&&p&最终将清空当前场景与请求加载目标场景功能封装为&code&forward&/code&跳转方法，就可以在页面里直接调用了。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// src/core/VRCore.js&/span&
&span class=&kd&&function&/span& &span class=&nx&&forward&/span&&span class=&p&&(&/span&&span class=&nx&&fileName&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&renderStop&/span&&span class=&p&&();&/span&
&span class=&nx&&clearScene&/span&&span class=&p&&();&/span&
&span class=&kr&&import&/span&&span class=&p&&(&/span&&span class=&sb&&`views/&/span&&span class=&si&&${&/span&&span class=&nx&&fileName&/span&&span class=&si&&}&/span&&span class=&sb&&.js`&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&c1&&// src/views/page1.js&/span&
&span class=&p&&...&/span&
&span class=&kr&&class&/span& &span class=&nx&&Page1&/span& &span class=&kr&&extends&/span& &span class=&nx&&VRPage&/span& &span class=&p&&{&/span&
&span class=&nx&&start&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&geometry&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&CubeGeometry&/span&&span class=&p&&(&/span&&span class=&mi&&5&/span&&span class=&p&&,&/span&&span class=&mi&&5&/span&&span class=&p&&,&/span&&span class=&mi&&5&/span&&span class=&p&&);&/span&
&span class=&kr&&const&/span& &span class=&nx&&material&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&MeshBasicMaterial&/span&&span class=&p&&({&/span& &span class=&nx&&color&/span&&span class=&o&&:&/span& &span class=&mh&&0x00aadd&/span& &span class=&p&&});&/span&
&span class=&kr&&const&/span& &span class=&nx&&button&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&THREE&/span&&span class=&p&&.&/span&&span class=&nx&&Mesh&/span&&span class=&p&&(&/span&&span class=&nx&&geometry&/span&&span class=&p&&,&/span&&span class=&nx&&material&/span&&span class=&p&&);&/span&
&span class=&nx&&button&/span&&span class=&p&&.&/span&&span class=&nx&&position&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&(&/span&&span class=&mi&&3&/span&&span class=&p&&,&/span&&span class=&o&&-&/span&&span class=&mi&&2&/span&&span class=&p&&,&/span&&span class=&o&&-&/span&&span class=&mi&&3&/span&&span class=&p&&);&/span&
&span class=&c1&&// 添加 gaze 监听事件&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&Gazer&/span&&span class=&p&&.&/span&&span class=&nx&&on&/span&&span class=&p&&(&/span&&span class=&nx&&button&/span&&span class=&p&&,&/span& &span class=&s1&&'gazeEnter'&/span&&span class=&p&&,&/span&&span class=&nx&&target&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span& &span class=&c1&&// gazeIn trigger&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&forward&/span&&span class=&p&&(&/span&&span class=&s1&&'page2.js'&/span&&span class=&p&&);&/span&
&span class=&p&&});&/span&
&span class=&nx&&WebVR&/span&&span class=&p&&.&/span&&span class=&nx&&Scene&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&nx&&box&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&nx&&Page1&/span&&span class=&p&&;&/span&
&span class=&c1&&// src/views/page2.js&/span&
&span class=&kr&&class&/span& &span class=&nx&&Page2&/span& &span class=&kr&&extends&/span& &span class=&nx&&VRPage&/span& &span class=&p&&{&/span&
&span class=&p&&...&/span&
&span class=&p&&}&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&nx&&Page2&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&我们在&code&page1&/code&场景里创建一个立方体，当凝视到该物体时，执行&code&forward&/code&方法跳转至&code&page2&/code&场景。&/p&&h2&VR单页面路由管理&/h2&&p&除了按需加载，考虑到是单页面应用，我们还需对页面的history堆栈进行管理，在实际的代码中，页面跳转和按需加载被封装成&code&Router&/code&对象，管理页面路由跳转。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// src/core/VRCore.js&/span&
&span class=&kr&&const&/span& &span class=&nx&&Router&/span& &span class=&o&&=&/span& &span class=&p&&{&/span&
&span class=&c1&&// 路由管理器初始化&/span&
&span class=&nx&&createRouter&/span&&span class=&p&&(&/span&&span class=&nx&&routes&/span&&span class=&o&&=&/span&&span class=&p&&[{&/span&&span class=&s1&&''&/span&&span class=&o&&:&/span&&span class=&s1&&'index.js'&/span&&span class=&p&&}])&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&routeObj&/span& &span class=&o&&=&/span& &span class=&p&&{};&/span&
&span class=&nx&&routes&/span&&span class=&p&&.&/span&&span class=&nx&&forEach&/span&&span class=&p&&(&/span&&span class=&nx&&route&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nb&&Object&/span&&span class=&p&&.&/span&&span class=&nx&&defineProperty&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&routeObj&/span&&span class=&p&&,&/span&&span class=&nx&&route&/span&&span class=&p&&.&/span&&span class=&nx&&route&/span&&span class=&p&&,{&/span& &span class=&nx&&value&/span&&span class=&o&&:&/span&&span class=&nx&&route&/span&&span class=&p&&.&/span&&span class=&nx&&path&/span& &span class=&p&&});&/span&
&span class=&p&&});&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_proxyRouter&/span&&span class=&p&&();&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_historyProxy&/span&&span class=&p&&();&/span&
&span class=&p&&},&/span&
&span class=&c1&&// 跳转公用方法&/span&
&span class=&nx&&forward&/span&&span class=&p&&(&/span&&span class=&nx&&routeName&/span&&span class=&p&&,&/span&&span class=&nx&&newtarget&/span& &span class=&o&&=&/span& &span class=&kc&&true&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&cleanPage&/span&&span class=&p&&();&/span&
&span class=&kr&&const&/span& &span class=&nx&&fileName&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_getFileName&/span&&span class=&p&&(&/span&&span class=&nx&&routeName&/span&&span class=&p&&);&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&newtarget&/span&&span class=&p&&)&/span& &span class=&nx&&history&/span&&span class=&p&&.&/span&&span class=&nx&&pushState&/span&&span class=&p&&({&/span& &span class=&nx&&routeName&/span&&span class=&p&&,&/span& &span class=&nx&&fileName&/span& &span class=&p&&},&/span& &span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&routeName&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&fetchFile&/span&&span class=&p&&(&/span&&span class=&nx&&fileName&/span&&span class=&p&&);&/span&
&span class=&p&&},&/span&
&span class=&c1&&// 当在地址栏输入url，请求url路由对应的场景文件&/span&
&span class=&nx&&_proxyRouter&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&routeName&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_getCurrentRouteName&/span&&span class=&p&&();&/span&
&span class=&kr&&const&/span& &span class=&nx&&fileName&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_getFileName&/span&&span class=&p&&(&/span&&span class=&nx&&routeName&/span&&span class=&p&&);&/span&
&span class=&nx&&history&/span&&span class=&p&&.&/span&&span class=&nx&&replaceState&/span&&span class=&p&&({&/span& &span class=&nx&&routeName&/span&&span class=&p&&,&/span& &span class=&nx&&fileName&/span& &span class=&p&&},&/span& &span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&_getCurrentRouteName&/span&&span class=&p&&());&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&fetchFile&/span&&span class=&p&&(&/span&&span class=&nx&&fileName&/span&&span class=&p&&);&/span&
&span class=&p&&},&/span&
&span class=&c1&&// 监听history堆栈变化，跳转至对应场景&/span&
&span class=&nx&&_historyProxy&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&addEventListener&/span&&span class=&p&&(&/span&&span class=&s1&&'popstate'&/span&&span class=&p&&,&/span&&span class=&nx&&e&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&routeName&/span& &span class=&o&&=&/span& &span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&state&/span&&span class=&p&&.&/span&&span class=&nx&&routeName&/span&&span class=&p&&;&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&forward&/span&&span class=&p&&(&/span&&span class=&nx&&routeName&/span&&span class=&p&&,&/span&&span class=&kc&&false&/span&&span class=&p&&);&/span&
&span class=&p&&},&/span&&span class=&kc&&false&/span&&span class=&p&&);&/span&
&span class=&p&&},&/span&
&span class=&nx&&_getCurrentRouteName&/span&&span class=&p&&()&/span& &span class=&p&&{&/span& &span class=&k&&return&/span& &span class=&nx&&location&/span&&span class=&p&&.&/span&&span class=&nx&&pathname&/span&&span class=&p&&.&/span&&span class=&nx&&split&/span&&span class=&p&&(&/span&&span class=&s1&&'/'&/span&&span class=&p&&).&/span&&span class=&nx&&pop&/span&&span class=&p&&();&/span& &span class=&p&&},&/span&
&span class=&nx&&_getFileName&/span&&span class=&p&&(&/span&&span class=&nx&&routeName&/span&&span class=&p&&)&/span&