优秀案例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优秀项目案例——任意门的主要内容,如果未能解决你的问题,请参考以下文章

Angular使用案例征集令

B村全席 | 人工智能精准诊断遗传疾病,BioX斩获智博会优秀案例奖

好未来高性能AI服务治理平台入选信通院年度优秀云原生案例 | AI大事件

云原生应用优秀案例和技术创新案例征集今日重磅启动!

不仅做观众,你还能这样参与 Google 开发者大会!

百源汇于数据仓库,莫让数据“流浪地球”丨教育统计优秀案例②