为了账号安全，请及时绑定邮箱和手机
有什么ThreeJs的资源
想进一步了解
暂无任何回答
25921人关注
2465人关注
12604人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11Threejs 官网
我的图书馆
Threejs 官网
检测使用 three.js 时的 WebGL 和浏览器兼容性（Detecting WebGL and browser compatibility with three.js）太阳火神的美丽人生 ()本文遵循“”创作公用协议开发及移动和物联设备研究：、、、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。检测使用 three.js 时的 WebGL 和浏览器兼容性（Detecting WebGL and browser compatibility with three.js）&edited this page&on 30 Nov 2011&·&遇到的问题The problemNot all browsers support WebGL, in fact only chrome and firefox work with three.js WebGLRenderer currently. iOS works with the canvas renderer and although IE9 supports canvas, it doesn't support workers so currently isn't supported.一种解决方案A solutionIn order to detect webgl compatibility and gracefully inform the user you can add&to your
and use this example to avoid even attempting to render anything:if (Detector.webgl) {
animate();
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
相关资源Resources&
[转]&[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢哑口成语有哪些十_百度知道
哑口成语有哪些十
哑口成语有哪些十
我有更好的答案
带有这俩字就是…哑口无言，这个成语就是
采纳率：95%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。【前沿】想自学VR技术但不知从何学起？看看这些干货吧!
中国大学生在线
原始标题：
小编参考国外的一些教程推荐（主要参考Tee Jia Hen的总结），将相关知识做了以下整理，希望可以给大家带来小小的帮助。总体来说，技术知识的学习，大概涉及3部分。1开发 app或者游戏可以让内容更加丰富，刺激整个大环境的发展， 进而吸引更多的用户接触，让整个生态更繁荣。你开发的应用将安装在MAC、PC、Play Station 或者安卓、iOS上面。这将是的其中一个边界。你需要弄清楚的UI/UX，然后让用户以正确的方式充分享受带来的益处。你需要学习一种3D引擎。Unity是个优秀的入门引擎，掌握它需要学习C#和Javascript语言。如果你是个编程新手，我推荐你看《JavaScript DOM编程艺术》《EloquentJavaScript》这两本；如果你已经有一定程度编程经验，可以直接看《JavaScript语言精粹》。对于Unity，可以看一下Unity3D官网给出的Roll-a-ball，是个不错的小教程，可以用它初步熟悉下Unity。看完了这个，就可以直接去Oculus官网的DeveloperCenter学习文档和SDK了。个人认为，学习Unity的最佳方式就是自己去尝试着开发一个简单的小游戏，在过程中遇到问题的地方就去Google一下，或者去Stackoverflow寻求帮助。其次就是和开发者论坛的朋友们多交流，互帮互助。其次，刚刚上面讲的教程都是关于的输出设备或者说头显，如果你对输入设备感兴趣，想开发的UI/UX，Leap Motion是个不错的选择（当然还有Oculus touch 或者 HTC Vive），可以去leapmotion官方看看开发者文档。最后，除了基础编程知识，我建议再补充一些数学知识，推荐《EssentialMathematicsforGamesandInteractiveApplication：AProgrammer'sGuide，Second Edition》。2电影是另一个边界，方法是使用特殊的全景摄像机来录制360度视角的影片。拍摄全景视频，首先需要一套摄影设备。目前有很多解决方案，这里不一一列举了，有兴趣的同学可以Google搜索「 camera rig」。光场相机将会是这个领域的颠覆者。其中360Heros全景相机架是个不错的选择， 我有个朋友入手了，玩起来十分酸爽。平时如果你想给你的朋友分享一段普通视频，原生的视频足矣。但如果你想拍一段电影，你需要对视频做编辑，这时候普通的视频编辑器就不能用了，必须使用视频编辑器，比如「Splice Editor」。3毋庸置疑，原生应用和游戏以及视频会最先普及，但是最终，肯定会走向web。开发者们还记得「一次编写，处处运行」这句古老的名言吗？网页就是我们实现这一承诺的最大可能。与其开发仅能在单一平台或头显上运行的原生应用程序，开发者们不如采用web来打造自己的体验，这样就可以简简单单通过浏览器运行了。Google和Mozilla携手致力于Web的建设，我们可以预见3D版本的万维网的到来。随着用户们对原生应用需求的膨胀，他们也一定期待开发者创造出的web应用。首先， web体验将带给你类似浏览facebook或youtube的体验。用户在web上，可以将视频切换到「模式」。和电影不同的是，用户可以在环境中来做购物、约会或者在线课程的学习。你需要学习一下three.js。three.js是一款运行在浏览器中的 3D引擎，你可以用它创建各种3D场景，包括了摄影机、光影、材质等各种对象，它是由JavaScript编写的WebGL第三方库。你可以去它的官网学习：threejs.org。然后参考Github上的borismus/webvr-boilerplate项目试着实现一个简单的网站。记住使用Chromium或者Mozillanightly来测试你的站，参考webvr.info。接下来，试着向你的场景中加入3D模型，并试着改变它的位置，并将它旋转，threejs.org的examples中有丰富的小例子。假如你想向其中加入一些物理信息系统，参考Github中的Hello-Cannon.js!项目。看到这，你是否对技术的入门知识有个大概的了解呢？其实开发并不是什么特别的新东西，它跟传统的Native和Web开发相差并不远。希望这篇文章可以给喜欢的同学们带来一些小小帮助。素材编辑:亢浩宇执行编辑:亢浩宇责任编辑:梁萌
VR资源网整理出品
VRZY.COM VR资源网8.3k 次阅读
标签：至少1个，最多5个
上个月底，在朋友圈看到一个号称“”的分享，点进入后发现这个h5还很别致，思考了一会，决定要不高仿一个?
到今天为止，高仿基本完成，
除了手机端的media控制没有去兼容，其他的基本都给仿了。 那为了让你觉得是高仿，最好使用chrome的手机调试模式进行访问。微信打开将听不见声音看不到视频... （后面再有时间看是不是仿的再进一步）
之所以要仿它，因为觉得这个h5还挺酷，想看看自己需要花多长时间找到并实现它的技术路径。
这个h5的主要玩法很简单：地球自转的时候会播放背景音乐（比如海浪声），为了找到这个声音是从哪个地球上哪个地方传来的，需要长按下方的按钮，这时地球会自动转动到目标地点，然后镜头拉近，穿过云层，最后你会看到和这段声音相关的视频内容；松开手之后，上面的过程会倒退回去，地球又开始自转，播放着下段神秘的背景音乐。
个人觉得这个设计还是很新颖的，不是说用了3D的效果，而是将一个看起来很复杂的动画（从宇宙拉近到地表的过程），使用最基础的3D效果和其他一些常规的动画手法去实现，并且能流畅的运行在手机浏览器上。另外还有声音和视频的完美搭配，用户体验不错。
反复观察，理清页面功能：
加载：加载进度百分比，饶椭圆轨道运行的小行星作为loading动画（这个动画我没有做）
地球：3D球体，旋转入场动画，自转，漂移的云层，城市的坐标点，镜头的旋转与拉近，穿越云层动画
星空背景：静态星空背景图，动态（闪烁的）星星，划过的流星
隐藏的音频和视频：按内容（地理位置）划分的音频和视频内容
其他：操作指引示意动画，地球上方会显示当前城市的经纬度，“了解更多”的结语页面等
寻找技术路径
打开chrome inspect一下。
首先是这个地球，得看看它是真3D还是假3D（因为很多3D效果是拿雪碧图做的，比如这里的），结果找到了：
&div class="ns-webgl-page"&
&canvas width="750" height="1200" style="width: 375 height: 600"&&/canvas&
并且在网站source文件中搜到了THREE，那就是threejs没跑了。
然后是那个穿越云层的效果，猜测可能是GIF，可能是SpriteSheet Animation，也有可能是一段视频。但是考虑到这个穿越的动画可以正反双方播放，那么就很可能是是SpriteSheet Animation了，否则GIF或者视频文件需要两个动画方向各准备一份。这个从chrome debug工具的network下找到了证据—— 页面下载了一系列名为kf_cloud_0000X.jpg的图片文件。顺手就把它们down下来，备用。
再就是背景音乐和隐藏视频的问题，同样在network下，找到了两个文件，一个mp3一个mp4，每个文件都包含了所有片段，就像是media的雪碧图，只在需要的时候控制播放对应片段而已。
其他的内容都没什么问题，CSS动画或者CANVAS都好做。那么到此，技术路径都清楚了，准备开始写代码。
对于我而言，用threejs绘制地球可能会是难点，threejs没有用过，而且印象中对3D的东西，一直比较敬畏。如果3D的地球弄不出来，这个项目其他的都做完了，在浩瀚的宇宙中是怎么也找不到“声音来自何方”了。
OK，来看threejs怎么能弄出个地球来。（这个阶段并没有开始项目代码，而是尽量的在一个临时文件中进行涂鸦，快速随意的达到绘制出地球的目的就行了）
对于新的技术，首先得看。这里并不是来全面学习threejs的，而是抱着很强的目的性去实现特定功能，因此直接去示例中找，是否有类似实现可以借鉴。在官网首页中，通过缩略图，找到了下面三个关于地球的例子。
可惜，貌似这里的例子都是一些产品应用，代码都是压缩过的。于是开始去寻找官方示例，最后在里找到了，最棒的是在github上有。
clone下threejs的项目代码，找到上面的示例文件。示例代码不到200行，阅读之后发现其实threejs和之前接触过的一些2D的游戏引擎（createjs，pixijs）等比较类似，都需要有场景（scene），要有渲染循环（render loop），在scene上添加对象（Mesh）或者是group；而Mesh由形状（Geometry）和材质（Material）组成，Material则又是由图片创建的纹理（Texture）而来。不同的是，这里有相机（Camera），有光线（Light），还有一些一直都不明白的距离单位问题。
稍微改动一下示例代码，就能创建出来了earth。但是从使用的资源来看，只有一个地表纹理贴图（earth4.jpg），而xplan中还有3个关于earth的图片文件：
不确定bump和spec是什么，我的思路是先在官方文档中找这些关键词，如果找不到，就加上threejs一起去做google。官网上找到了bump相关的东西，但帮助最大的是google出来的一篇详细的如何使用threejs创建earth的。（如果这个教程早点冒出来，也省了前面改示例代码的时间了。主要也源于对threejs不熟悉，没有想到哪些示例可能已经有很多教程了）
换上了earth4.jpg贴图之后：
教程中的步骤不再这里重复，下面仅仅对一些关键东西作简单的解释。
earth_bump
了解到bumpmap：
Bump mapping is a technique to simulate bumps and wrinkles on the surface of an object. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not actually changed. I'm sorry, you can't tilt the camera to see 3D mountains with this technique. You can adjust the bump effect (how much the map affects lighting) with the bumpScaleparameter
threejs中bumpmap是调节对光线的感知，来使人能明显感觉到不光滑的表面，而并没有在mesh中添加起伏，即没有真的改变形状。
官方bumpmap示例效果图如下：
其实这里的earth_bump.jpg就是一个，在threejs中称作bumpmap，在其他一些地方也有被叫做heightmap。即用灰度图表达高程，越黑表示高程越低，越亮表示高程越高。GIS专业中常用，unity3D中创建地形也会用到这个。
添加了earth_bump之后：
earth_spec
了解到了earth_spec.jpg是specular map，用来调节镜面反射的，这里主要是调节海洋对光线的反射，增加真实性。
添加了earth_spec之后：
漂移的云层
云层的添加， 前面的教程里已经很详细了，其实就是一个同心，半径大一点的球体而已。
添加了云层之后：
浮动的标签
xplan中地球表面有城市标签，会随着地球的自转而移动，同时又保持了水平的方向。google关键词：threejs floating label。于是找到：
找到方向就好办，稍微参考一下官方API文档和找到的示例代码，能够很容易的在earth上添加上浮动标签。
到这里，3D地球的绘制基本差不多了。虽然threejs是新东西，但是绝大部分功能都容易找到方向，并且改动一下示例代码都够快速的实现我们想要的效果，所这个过程并不难。重点是如何在一个未知的领域内找到想要的东西，并且快速的为自己所用。
但过程中我碰到一个性能问题，耽误了很久。xplan的页面在chrome的PC和手机模式都有近60的FPS，但是我创建的earth在PC有60，但是在手机模式却不到30！最后逐一调试代码，修改参数，花了好久才找到原因：
renderer.setPixelRatio(window.devicePixelRatio)
threejs的示例代码中都有这么一行，就是这一行导致了我的代码比xplan的代码在手机上绘制的像素点翻倍，从而导致了性能成倍的下降。
另外，前面也提到，我对于3D框架中的距离单位和坐标问题，很模糊。于是这里，关于earth的大小，camera朝向，每个城市标签的三维坐标和其他关与三维坐标的问题，我都硬抄了xplan的参数（幸好他们的代码没有压缩...）。还有一个要承认的，就是地球后面的淡蓝色光晕效果，貌似用了一些高级的渲染技术，我也就硬搬了xplan这部分代码。
下一篇将介绍如何制作多步骤、可进可退的动画，在我看来这个才是技术难点。
13 收藏&&|&&43
你可能感兴趣的文章
作者你好，我想知道地球上的点是怎么换算的呢 ，并没有搞清楚诶，谢谢！！
coord: [-19.2, 14.], // 19° 12' S, 13° 67' E
position: [4.6, -1.29, -2.42],
cameraFarPosition: [-20.03, 13.47, -14.61],
cameraNearPosition: [-3.54, 2.38, -2.58],
作者你好，我想知道地球上的点是怎么换算的呢 ，并没有搞清楚诶，谢谢！！
coord: [-19.2, 14.], // 19° 12' S, 13° 67' E
position: [4.6, -1.29, -2.42],
cameraFarPosition: [-20.03, 13.47, -14.61],
cameraNearPosition: [-3.54, 2.38, -2.58],
我也是第一次使用three.js之前也没怎么接触3D 这里的坐标是手动移动地球后，将值console下来，然后记录到文件里的。
我也是第一次使用three.js之前也没怎么接触3D 这里的坐标是手动移动地球后，将值console下来，然后记录到文件里的。
@外籍杰克 谢谢！我再看看怎么搞
@外籍杰克 谢谢！我再看看怎么搞
怎么打印，你的里面js是用的es6语言吗，打印用什么语句的，谢谢哦
@外籍杰克[ygjack] 怎么打印，你的里面js是用的es6语言吗，打印用什么语句的，谢谢哦
微信打开线上地址可以听见声音看到视频的啊
微信打开线上地址可以听见声音看到视频的啊
后来做了修改的
后来做了修改的
做得真漂亮，谢谢回复。有源码可以学习一下吗
做得真漂亮，谢谢回复。有源码可以学习一下吗
文章里有github连接
@正能量工作站[zhengnenglianggongzuozhan] 文章里有github连接
大兄弟 很好。
大兄弟 很好。
很好，就是还要学下 vue...
很好，就是还要学下 vue...
杰克兄厉害的~~问下，这个地球能增加卫星功能吗
杰克兄厉害的~~问下，这个地球能增加卫星功能吗
编程嘛， 没有什么不能做的
编程嘛， 没有什么不能做的
添加卫星，可以参考这个例子
添加卫星，可以参考这个例子 https://jackgit.github.io/threejs-sphere-examples/#/moon
膜拜，大神，请收下我的膝盖。最近项目刚好。业务部接收到要仿做腾讯H5这个地球。去转了echarts，d3，各种始终感觉差了那么点感觉。被老大吹的急，看了很多文档，终于看到这篇比较nice的文章。确实介绍比较详细。仔细学习学习。
膜拜，大神，请收下我的膝盖。最近项目刚好。业务部接收到要仿做腾讯H5这个地球。去转了echarts，d3，各种始终感觉差了那么点感觉。被老大吹的急，看了很多文档，终于看到这篇比较nice的文章。确实介绍比较详细。仔细学习学习。
大神 那怎么点击上边的漂浮图片呢 我需要跳转
大神 那怎么点击上边的漂浮图片呢 我需要跳转
intersect () {
if (this.pointer) {
this.raycaster.setFromCamera(this.pointer, this.camera)
const intersects = this.raycaster.intersectObjects(this.earthGroup.children)
if (intersects[0] && intersects[0].object.type === 'Sprite') {
// your action here
this.pointer = null
render () {
this.intersect()
intersect () {
if (this.pointer) {
this.raycaster.setFromCamera(this.pointer, this.camera)
const intersects = this.raycaster.intersectObjects(this.earthGroup.children)
if (intersects[0] && intersects[0].object.type === 'Sprite') {
// your action here
this.pointer = null
render () {
this.intersect()
这个应该加在哪呢
这个应该加在哪呢
因为我也是用的vue
我借鉴了一下您的 现在是可以 但是就是想点击跳转 然后把这张图放大
因为我也是用的vue
我借鉴了一下您的 现在是可以 但是就是想点击跳转 然后把这张图放大
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}