ELF – 灵活可扩展的 HTML5 构建工具

ELF,意为小精灵,来自 War3 中暗夜精灵族的农民。 通常当我们开始一个新的 HTML5 场景营销活动项目时,需要创建项目目录,初始化基本的项目文件,然后再添加构建(grunt/gulp/webpack)相关的文件(一次两次三次…,像小精灵采木一样~),目前有不少工具可以帮我们解决一部分这种重复性的工作,但不能完全的解决,于是,就有了小精灵 – ELF。 快速上手 1. 安装 通过 npm 全局安装(依赖的包比较多,推荐使用淘宝的 npm 镜像进行安装)

安装好后,可以运行 elf –help 查看支持的命令和帮助说明。 2. 初始化项目 假如我们现在要做一个向下整页滑屏的 HTML5 项目

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上,样式预处理自动编译、样式热加载等功能早已具备,在此基础上,你就可以开始按照你的需求愉快的开发了。 3. 部署 当项目开发完成之后,需要将代码合并压缩用于部署,运行

会生成一个 dist 文件夹用于部署。 整个流程下来,基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作,已在团队内广泛使用,包括 Q4 京东品牌运营的10多个 H5 项目,如 皇家视频 京东精选 功能介绍 ELF 主要包括三部分功能:项目构建、示例模板和通用组件。 项目构建 现在在做 web 开发时,基本都会引入构建工具,常用的有 grunt、gulp 以及目前最流行的 […]

浅谈 WebVR

“目镜在他眼前涂上了一抹朦胧的淡色,映射着一幅弯曲的广角画面:一条灯火辉煌的大街,伸向无尽的黑暗。但这大街其实并不存在,它只是电脑绘出的一片虚拟的空间。” ——《Snow Crash》,Neal Stephenson 1992 年 什么是 VR VR(Virtual Reality)是利用电脑模拟产生一个三维空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户感觉仿佛身历其境,可以及时、没有限制地观察三维空间内的事物。用户进行位置移动时,电脑可以立即进行复杂的运算,将精确的三维世界视频传回产生临场感。—— 维基百科 VR 的显示原理 了解 VR 显示原理前,先了解我们人眼的立体视觉的成像原理: 人眼的视觉是可以感觉出深度的,也就是深度知觉(depth perception)。而有了深度的信息后,才能判断出立体空间的相对位置。 另外,由于两个眼睛的位置不一样(一般人两眼相距 5~7 厘米),所以看到的东西会有两眼视差(binocular parallax),大脑再将这两个图像做融合处理,从而产生立体的感觉(即所谓的 binocular cues)。 头戴式显示器(Head-mounted Display) 头戴式显示器(HMD)是 VR 目前最常见的一种体验方式。它的原理是将小型二维显示器所产生的图像经由光学系统放大。具体而言,小型显示器所发射的光线经过凸状透镜使图像因折射产生类似远方效果。利用此效果将近处物体放大至远处观赏,从而达到所谓的全息视觉(Hologram)。另外,显示器被分为左右两个部分,分别显示左右眼看到的图像。大脑再将左右眼所看到的图像(两眼视差)做融合处理,从而产生 3D 效果。同时,HMD 会根据头部运动让视角与之同步。综合上述特性,用户通过 HMD 体验 VR 时就如同在现实中观看一样,这种体验也被称为沉浸式体验。 HMD 种类 目前市场上主要有以下 3 种 HMD 设备: 滑配式 这是目前最初级、价格最低的 HMD 设备。它与智能手机相连接,将 2D 显示变成 3D VR 显示。滑配式 HMD 设备强烈依赖于主机系统(智能手机),后者是提供 VR […]

© 2017 JDC. All Rights Reserved.