上个月底,在朋友圈看到一个号称“这可能是地球上最美的h5”的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 线上地址 github地址 除了手机端的media控制没有去兼容,其他的基本都给仿了. 那为了让你觉得是高仿,最好使用chrome的手机调试模式进行访问.微信打开将听不见声音看不到视频... (后面再有时间看是不是仿的再进一步) 之所以要仿它,因为觉得这个h5还挺酷,想看看自己需要花多长时间找到并实现它的技术路径. 需求分析 这个h5的主要玩…

概述 这个h5的主要玩法很简单:地球自转的时候会播放背景音乐(比如海浪声),为了找到这个声音是从哪个地球上哪个地方传来的,需要长按下方的按钮,这时地球会自动转动到目标地点,然后镜头拉近,穿过云层,最后你会看到和这段声音相关的视频内容:松开手之后,上面的过程会倒退回去,地球又开始自转,播放着下段神秘的背景音乐. 详细 代码下载:http://www.demodashi.com/demo/10342.html 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这…

一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插件,听起来是一个很棒的事情.大学的时候,计算机老师让我们课后学习3Dmax,种种原因,并没有听老师的话,但是,却一直希望能够接触一下三维世界.现在,我喜欢的JavaScript也可以实现三维动画效果,当然有点小惊喜,既然如此,何不借此机会,了解webgl的同时,巩固下自己的JavaScript基础呢…

*********************************** 基础知识/名词 瓦片/矢量瓦片GeoJson - 绘制GeoJson看数据, geojson规范, 中文版 ***********************************WEB前端地图框架Openlayers (3.x apiDoc http://geoadmin.github.io/ol3/apidoc/)mapbox-gl-js ***********************************Geo可视化t…

写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻. 有时间看看的一些threejs的博客: http://www.5icool.org/a/201310/a2773.html 粒子库:http://www.ffpic.com/jiaoben/151005337599.html 这个3D库不是3dmax可以研究下有时间: https://s.h5t…

ThreeJS学习6_几何体相关(BufferGeometry) 使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销 可以自定义顶点位置, 面片索引, 法向量, 颜色值 目录 ThreeJS学习6_几何体相关(BufferGeometry) 1. BufferGeometry使用初体验 2. 简单压缩几何体的方法 3. 创建由点到线的几何体 4. 创建由线到面的几何体 5. 创建点云的源码 1. BufferGeometry使用初体验 在之前的学习中, 我是…

ThreeJS学习7_裁剪平面(clipping) 目录 ThreeJS学习7_裁剪平面(clipping) 1. 裁剪平面简介 2. 全局裁剪和局部裁剪 3. 被多个裁剪平面裁剪后 4. 被多个裁剪平面截断后代码 1. 裁剪平面简介 裁剪平面指的是存在一个平面, 能够对场景中的物质进行截断, 这个平面就是裁剪平面, 裁剪平面分为全局的裁剪和局部裁剪 全局裁剪指的有一个平面裁剪了整个场景的物体, 这需要在renderer中设置 局部裁剪指的有一个平面裁剪裁剪指定物体, 这需要在指定物体的mate…

一. Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用…

一.在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象? 二.射线法确定步骤及代码 //Three.js提供一个射线类Raycaster来拾取场景里面的物体.更方便的使用鼠标来操作3D场景. //从某个方向发射一条射线,穿过鼠标所在的点,则这条射线经过的对象就是鼠标点击的对象 //射线法获取鼠标选择的元素,然后修元素的材质. var raycaster = new THREE.Raycaster(); //mouse,鼠标所对应的二维向量,监听鼠标移动事件 //mou…

  Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js        http://www.hewebgl.com/article/getarticle/58 stats.setMode(1);参数为0的时候,表示显示的是FPS界面,参数为1的时候,表示显示的是MS界面.Stats的begin和end 函数本质上是在统计代码执行的时间和帧数,然后用公式fps=帧数/时间,就能够得到FPS.MS表示渲染一帧需要的…