全部课程 > 中级 > JavaScript > ThreeJS版本-3D模型动态展示
ThreeJS版本-3D模型动态展示
中级JavaScript 共计13节课 时长00:53:42 ¥199.00 购买
课程介绍
本课程使用 Three.js 3D 渲染引擎和 Tween.js 动画库,层层递进的将 Blender 导出的多层汉堡模型加载到页面中,实现汉堡的多角度全景转动展示以及不同层级的展开与回收,让用户最大程度的了解将 3D 模型加载到渲染引擎中的方方面面,实现模型在立体空间中的全方位展示效果。
课程附件
策划稿(内容包含1个PPT文档)
设计稿(psd源件)
代码包
课程目录
  • 课程介绍
    • 课程介绍 ( 00:03:17 )

  • Three.js基础与页面搭建
    • Three.js基础 ( 00:03:23 )

    • Three.js 创建相机 ( 00:05:52 )

    • 添加渲染器与resize监听 ( 00:04:30 )

  • 3D 模型的导出与加载
    • Blender 基础 ( 00:01:26 )

    • Blender 模型导出 ( 00:02:38 )

    • 引入全景背景图 ( 00:05:28 )

    • 引入3D模型 ( 00:05:18 )

  • 实现页面场景的转动与元素缩放
    • 添加轨道控制器 ( 00:05:06 )

  • 使用Tween.js制作入场动画及元素移动
    • Tween.js 基础 ( 00:01:57 )

    • 使用 Tween.js 制作模型动画 ( 00:05:02 )

  • 细化页面效果
    • 制作预加载页面 ( 00:04:58 )

    • 曝光调整与控制转动角度 ( 00:04:47 )