优秀案例GDD大会Angular2优秀项目案例——任意门
Posted Angular中文社区
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优秀案例GDD大会Angular2优秀项目案例——任意门相关的知识,希望对你有一定的参考价值。
任意门项目背景
VR(即虚拟现实科技)打造的360度全景视效,是一种全新的视觉体验。“VR,可以完美且生动地复现‘现场’和‘全貌’,为观者带来全新生动的第一视角沉浸式感官体验。
民宿有别于旅馆或饭店,是结合了当地人文、自然景观、生态、环境资源的新兴型态,由于民宿具有强烈的个性化特征,较好的体验感,备受游客关注。
真正去过民宿的游客,都会有个感觉,这里通过照片甚至普通的视频没法全面展示,去过才知道,只有身临其境才能体验出民宿的精髓。
通过VR技术,消费者自由自主地选择观看视角,可轻松、全面地了解民宿的特色优势、硬件配套,所见即所得,从这点上来说,VR和民宿是天作之合。
任意门的目标
任意门将民宿预定平台与VR技术结合,旨在让旅客在订房前,通过沉浸式体验,可身临其境,轻松、全面地了解民宿的特色。
项目技术框架及实现
技术选型
angular2
使用angular2作为该前端框架缘由,社区早有讨论:
但是,有句古话:“任凭弱水三千 我只取一瓢饮”。
bootstrap3
前端样式库
webpack
项目打包工具
Cardborad
3D眼镜(Goolgle)
Matterport
模型扫描平台
项目结构划分
注:文件定义规则基本按照官方风格进行命名;
项目中主要难点及解决方案
懒加载(lazy load)
懒加载按照官方配置基本可以满足要求:
预编译(aot)
开发时在
JIT
环境上便于开发,打包发布时建议采用AOT
编译,当然个人觉得更好的还是server render
。i18n国际化(ng2-translate)
因为个人有相关的国际化json文件,所以该项目倒是没采用官方给出的国际化方案,
这是github社区提供的一个不错i18n方案。
测试(protractor)
Protractor 是 Angular 团队构建的一个端对端的测试运行工具,模拟用户交互,帮助你验证你的Angular应用的运行状况。
项目打包工具(webpack)
官方推荐webpack,当然社区里面也看到有人使用webpack+gulp组合打包。
@AngularClass
当然,在项目实际开发中会有许多问题,大部分都有做整理,可以看看我个人的文章及我们团队的博客:
个人技术文档:
唯幻科技技术博客:
项目运行地址
以上是关于优秀案例GDD大会Angular2优秀项目案例——任意门的主要内容,如果未能解决你的问题,请参考以下文章
B村全席 | 人工智能精准诊断遗传疾病,BioX斩获智博会优秀案例奖