全部课程 > 高级 > JavaScript > 360°卷轴3D全景H5制作全过程
360°卷轴3D全景H5制作全过程
高级JavaScript 共计21节课 时长1:56:31 ¥198.00 ¥299.00 购买
课程介绍
此次课程利用 CSS 3D 引擎和 orienter 重力感应组件来实现一个3D全景展示效果。课程分为全景展示的理论和实践两部分。理论部分涉及到全景场景的内在原理以及元素角度及距离的计算方式。实践部分会分步骤手写一个包括手势操控,场景创建,重力感应的全景展示效果实例。
课程附件
策划稿(内容包含1个PPT文档)
设计稿(AI源件)
代码包
课程目录
  • 第一章 课程介绍
    • 1.1 课程介绍 ( 00:03:08 )

  • 第二章 3D 制作基础
    • 2.1 CSS 3D引擎介绍 ( 00:04:48 )

    • 2.2 3D引擎基础元素介绍 ( 00:05:08 )

    • 2.3 orienter 介绍 ( 00:07:08 )

  • 第三章 全景实现原理
    • 3.1全景场景实现原理 ( 00:04:11 )

    • 3.2全景 Sprite 角度的计算 ( 00:04:53 )

  • 第四章 实战开发
    • 4.1页面划分 ( 00:03:12 )

    • 4.2 创建页面场景 ( 00:08:56 )

    • 4.3 创建全景元素1 ( 00:07:28 )

    • 4.3 创建全景元素2 ( 00:05:38 )

    • 4.3 创建全景元素3 ( 00:05:04 )

    • 4.4添加场景更新函数 ( 00:05:04 )

    • 4.5添加屏幕尺寸响应 ( 00:03:18 )

    • 4.6 添加手势操控 ( 00:09:10 )

    • 4.7 添加重力感应调节 ( 00:04:39 )

    • 4.8场景旋转入场动画1 ( 00:04:13 )

    • 4.8场景旋转入场动画2 ( 00:09:53 )

    • 4.9初始页面元素动画1 ( 00:04:49 )

    • 4.9初始页面元素动画2 ( 00:06:54 )

    • 4.9初始页面元素动画3 ( 00:05:17 )

  • 第五章 课程总结
    • 5.1课程总结 ( 00:03:40 )