Three.js产品Web3D展示(WebGL)简介
本课程主要通过three.js实现产品三维模型的在线3D展示。
学习本课程需要前端基础
学习建议：每节课都有对应的案例源码，一定要结合每节课提供的案例源码学习，不要仅仅看视频
Three.js产品Web3D展示(WebGL)价格
这一套教程价格128元
课程目录
章节1:实现方案和课程简介
1.课程效果展示
2.产品Web3D展示方案
3.学习安排
章节2:手机展示1—三维建模和引入three.js
1.手机相关几个章节学习指南( 源码下载 网易云私信 )
2.绘制产品三维模型—手机
3.Blender或3dmax导出gltf格式模型
4.三维软件导出产品模型注意
5.Blender预览产品PBR材质的模型
6.Three.js下载R125版本并使用.
7.threejs最小案例—模型和光源
8.threejs最小案例—相机和渲染器
9.渲染循环(设置产品旋转预览动画)
10.产品预览旋转和缩放(相机控件OrbitControls)
章节3:手机展示2—渲染产品3D模型
1.three.js加载gltf模型
2.查询模型节点并设置模型PBR材质贴图.
3.产品展示相机参数设置注意
4.环境贴图envMap
5.调试场景光源参数
6.手机产品旋转动画控制
7.Canvas画布全屏且跟随窗口变化
8.three.js代码模块化
9.gui辅助调节光源强度、位置、受环境光影响程
章节4:手机展示3—交互体验
1.产品展示缩放和旋转范围约束
2.一个720辅助显示的圆弧线—圆弧线
3.一个720辅助显示的圆弧线—720符号
4.前端UI按钮切换颜色贴图
5.UI按钮暂停手机旋转动画
6.练习例子—canvas局部布局UI按钮切换颜色贴图
7.颜色贴图.map切换动画
8.产品特定部位标注—光点
9.产品特定部位标注—半透明叠加问题解决.
10.产品特定部位标注—波动光点
11.HTML 2D标签标注相机热点
12.HTML 3D标签标注相机热点
13.射线拾取标注热点—弹出信息
14.点击热点弹出HTML信息标签
章节5:轿车展示—基础渲染效果
1.轿车3D模型基本情况简介
2.加载车gltf模型1—模型和相机
3.加载车gltf模型2—材质和贴图
4.gltf加载颜色空间和颜色失真问题
5.批量设置Mesh环境贴图
6.MeshStandardMaterial金属度和粗糙度了解
7.设置后视镜效果
8.MeshPhysicalMaterial(车外壳、车玻璃)
9.代码创建一个地面
10.代码创建一个隧道
11.设置雾化效果
12.约束相机控件的旋转、缩放
章节6:轿车展示—交互
1.车开关门—思路和模型问题
2.车门开关—热点标注
3.车门开关—射线拾取，打开或关门车门
4.tweenjs库设置开关门动画
5.车门开关—开关门声音
6.颜色款式选择
7.颜色变化动画
8.背景音乐设置
9.旋转动画开启或关闭
10.车前灯开关模拟
Three.js产品Web3D展示(WebGL)项目截图
Three.js产品Web3D展示(WebGL)项目截图
实现产品开门效果
实现产品开灯效果
手机产品效果
