Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

来自网络整理·免费领取学习资源

7,766 领取 · 7,345 收藏更新于 2026年9月20日

Three.js 前端开发

这份资料来自网络整理2026年的付费VIP课，内容以视频为主，对应《Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术》。官网需要单独购买，有集上可以免费领取。

资源介绍：

课程全面系统的讲解WEB 3D可视化技术，涵盖目前企业开发的各种应用技术和项目案例。包含智慧园区、智慧城市、智慧工厂

课程目录

[1.1]–如何的学习WEB可视化3D技术与课程内容演示
[1.2]–本地搭建threejs官方网站
[1.3]–使用parcel搭建three.js开发环境
[1.4]–使用three.js渲染第一个场景和物体
[1.5]–如何处理运行搭建开发Three环境出现的问题
[10.1]–渲染管线
[10.2]–细讲渲染流程
[10.3]–WEBGL绘制三角形
[10.4]–缩放矩阵与uniform变量和varying变量
[10.5]–着色器glsl基本规范
[11.10]–shader着色器打造漫天飞舞孔明灯1
[11.11]–shader着色器打造漫天飞舞孔明灯2
[11.1]–初识着色器语言
[11.2]–着色器插件安装与文件导入开发
[11.3]–认识rawShaderMaterial与attribute_un
[11.4]–控制顶点位置打造波浪形状
[11.5]–unform传递时间变量打造动画与通过uv采样纹理
[11.6]–着色器编写各种类型图案
[11.7]–着色器编写各类型图案2
[11.8]–shader着色器编写高级图案
[11.9]–shader着色器编写高级图案2
[12.1]–烟雾水效果介绍与代码准备v
[12.2]–sin函数与噪声函数混合
[12.3]–设置sin与噪声参数
[12.4]–时间打造流动效果
[12.5]–设置水流和波纹方向与速度
[12.6]–使用官方提供的水模型
[12.7]–打造沙滩_水池
[13.1]–着色器设置点材质基本设置
[13.2]–点着色器图形设置原理
[13.3]–使用纹理设置点着色器材质
[13.4]–Points中生成不同点图案
[13.5]–根据视图Position设置点图案远近大小
[13.6]–着色器设置顶点旋转打造臂旋星系
[13.7]–着色器设置顶点颜色打造渐变星系
[14.1]–点着色器设置炫丽烟花项目案例01
[14.2]–点着色器设置炫丽烟花项目案例02
[14.3]–点着色器设置炫丽烟花项目案例03
[15.1]–three框架材质原理与应用
[15.2]–修改物理光照材质制作人物被打效果01
[15.3]–修改物理光照材质制作人物被打效果02
[15.4]–修改物理光照材质制作人物被打效果03
[16.1]–合成效果原理与设置
[16.2]–实现抗锯齿_点效果_发光_屏幕闪动等特效
[16.3]–使用shaderPass实现自定义合成效果
[16.4]–使用法向纹理合成特色渲染镜头
[16.5]–运用时间打造水底波浪动态渲染效果
[17.1]–CSS渲染器基本使用
[17.2]–添加多个元素标签跟随物体移动
[17.3]–使用射线碰撞来检测标签显示隐藏
[18.1]–曲线使用与绘制流程
[18.2]–让物体与相机沿着曲线轨迹运动
[19.1]–变形动画原理与实现
[19.2]–实现花苗生长到花开效果
[2.10]–调用js接口控制画布全屏和退出全屏
[2.11]–应用图形用户界面更改变量
[2.1]–轨道控制器查看物体
[2.2]–添加坐标轴辅助器
[2.3]–设置物体移动
[2.4]–物体的缩放与旋转
[2.5]–应用requestAnimationFrame正确处理动画运动
[2.6]–通过Clock跟踪时间处理动画
[2.7]–Gsap动画库基本使用与原理
[2.8]–Gsap控制动画属性与方法
[2.9]–根据尺寸变化实现自适应画面
[20.1]–全景看房实现原理
[20.2]–客厅厨房多空间切换实现
[21.10]–飞线方案2-着色器绘制酷炫飞线
[21.11]–函数翻折实现彗星型飞线动画
[21.12]–edgeGeometry生成建筑线框特效
[21.13]–智慧城市光墙特效
[21.14]–智慧城市雷达扫描特效
[21.15]–封装3D警告标识与点击提示事件
[21.16]–添加智慧城市天空盒子和设置抗锯齿效果
[21.17]–智慧城市大屏样式与结构
[21.18]–置Pointer-events穿透事件
[21.19]–智慧城市动态数字面板动画
[21.1]–智慧城市和项目介绍
[21.20]–通过接口生成城市事件列表
[21.21]–城市事件列表动态生成雷达-飞线-光墙
[21.22]–大屏HTML元素与场景物体数据交互与特效展现
[21.2]–Vue_Vite创建智慧城市项目并配置glsl写法支持
[21.3]–项目基础代码结构分解
[21.4]–生成城市建筑模型
[21.5]–城市模型科技感渐变效果
[21.6]–多层着色器特效合并与城市光圈扩散效果
[21.7]–直线光带掠过城市效果
[21.8]–从下向上扫描城市特效
[21.9]–利用tube特性生成带纹理图案飞线
[22.1]–blender下载与语言渲染设置
[22.2]–blender大纲选项开关与保存启动文件
[22.3]–界面布局与工具栏侧边栏
[22.4]–3d界面查看与相机视图
[22.5]–相机视图和透视与正交
[22.6]–局部视图与隐藏物体
[22.7]–添加与删除物体和添加物体的操作面板
[22.8]–ExtraObject插件添加额外石头物体
[23.10]–各种视图着色预览使用
[23.1]–物体选择
[23.2]–物体移动旋转缩放设置方式
[23.3]–变换坐标系与变换轴心点
[23.4]–吸附功能使用
[23.5]–模式切换与物体吸附
[23.6]–物体合并与分离
[23.7]–设置物体的父级和子级
[23.8]–叠加层与快速收藏夹
[23.9]–平滑与平直着色
[24.1]–点线面基本操作
[24.2]–删除点线面基本操作
[24.3]–法向与法向翻转
[24.4]–挤出功能使用
[24.5]–倒角
[24.6]–环切与切割
[24.7]–多边形与旋转
[24.8]–光滑和随机以及滑移
[24.9]–推拉_球形化_隔离顶点
[25.1]–阵列修改器
[25.2]–倒角修改器
[25.3]–布尔修改器
[25.4]–镜像修改器
[25.5]–实体化修改器
[25.6]–表面细分修改器
[25.7]–字体3D添加与中文字体
[26.10]–制作照亮路面的路灯
[26.11]–根据地图打造马路
[26.12]–根据地图创建多边形建筑
[26.1]–原理化BSDF
[26.2]–原理化BSDF各种属性使用
[26.3]–使用纹理贴图创建大厦
[26.4]–物体设置2种材质打造大厦屋顶
[26.5]–使用image插件快速搭建房子
[26.6]–通过现实照片打造摩天大楼
[26.7]–使用建筑生成插件快速生成建筑
[26.8]–使用建筑插件快速生成建筑
[26.9]–制作园区树木
[27.10]–设置大屏控制物体运动模式
[27.11]–设置园区汽车运行轨迹与动画
[27.12]–园区多相机视角切换
[27.13]–自定义园区观览模式-轨道-飞行模式-第一人称
[27.1]–资产库打造智慧园区
[27.2]–沃罗诺伊纹理种出随机草地
[27.3]–烘焙计算好光照阴影的纹理
[27.4]–模型优化与材质优化
[27.5]–如何优化导出模型
[27.6]–draco解压模型与场景摄像设置
[27.7]–优化模型渲染逼近真实物理展示效果
[27.8]–园区热气球动画
[27.9]–设置单一物体热气球多种动画
[28.1]–创建骨骼与顶点组
[28.2]–骨骼动画制作
[28.3]–人物的骨骼动画
[28.4]–如何切换控制器聚焦位置与拉近视角
[29.1]–根据户型图搭建户型结构墙体
[29.2]–平面上创建发光灯带
[29.3]–厂房楼层材质光效优化与模型加载
[29.4]–楼层结构与房间用3D科幻悬浮框标注
[29.5]–根据需要微调科幻标注的位置
[29.6]–大屏控制各楼层展开显示
[29.7]–战斗机产品打散变形与组装恢复动画特效
[29.8]–设置单个物体轮廓发光
[29.9]–分层设置物体发光特效
[3.1]–掌握几何体顶点_UV_法向属性
[3.2]–BufferGeometry设置顶点创建矩形
[3.3]–生成酷炫自定义三角形科技物体
[3.4]–常用网格几何体
[30.1]–GEOJSON与地图下载
[30.2]–通过GEO数据生成3D地图
[30.3]–与3D地图进行交互
[30.4]–通过GEO生成地图3D线
[31.10]–人物前后视角切换
[31.10]–添加物体与3D建筑物
[31.11]–标签与广告牌
[31.11]–人物动作控制
[31.12]–3D模型添加与设置
[31.12]–根据速度流畅切换走路与跑步动作
[31.13]–大场景渲染大量相同物体的实例化网格
[31.13]–椭圆_走廊_圆柱体添加与设置
[31.14]–threejs合并物体工具提升渲染性能
[31.14]–多边形_体积折线_矩形_椭球体设置
[31.15]–Primitive创建图像物体
[31.15]–真实物理材质与新增彩虹折射效果
[31.16]–Primitive多个实体与颜色修改
[31.16]–真实动态映射环境物体纹理
[31.17]–镜面反射与原理
[31.17]–与entity和primitive物体交互
[31.18]–canvas绘制纹理生成动态3d文字
[31.18]–与entity和primitive物体交互
[31.19]–alpha贴图与视频纹理
[31.19]–entity材质使用materialProperty
[31.1]–打造第一个cesium应用
[31.1]–元宇宙项目搭建与准备
[31.20]–entity折线材质设置
[31.20]–视频纹理与canvas动态结合打造酷炫3D文字界面
[31.21]–Appearance外观与材质
[31.21]–LOD不同精细模型制作
[31.22]–primitive材质类型与设置
[31.22]–场景多个位置生源音效
[31.23]–fabric自定义着色器设置材质
[31.23]–项目结构与代码编写模式
[31.24]–cesium着色器自带函数与变量
[31.24]–场景动态云雾制作
[31.25]–Appearance编写着色器修改外观
[31.25]–粒子群优化渲染体积云
[31.26]–编写自定义MaterialProperty材质
[31.26]–通过着色器修改水面材质源码实现海洋效果
[31.27]–加载渲染GEOJSON数据
[31.27]–加载元宇宙场景与灯光
[31.28]–元宇宙场景人物控制与物理碰撞
[31.28]–自定义GEOJSON生成物体的样式
[31.29]–KML数据生成3D地理标记
[31.29]–视频纹理实现场景位置目标光阵效果
[31.2]–Cesium基础设置
[31.2]–元宇宙项目物理环境
[31.30]–初识CZML数据与应用
[31.30]–视觉投影修改UV实现酷炫流光光阵特效
[31.31]–CZML时间动态图形场景
[31.31]–人物抵达光阵或位置触发自定义事件
[31.32]–canvas纹理创建场景聊天框
[31.32]–追踪航班跨洋飞行
[31.33]–3DTiles与性能监控
[31.33]–自定义酷炫3D动效文字框
[31.34]–根据不同条件设置3D_tiles样式
[31.34]–修改开源着色器网站shaderToy开源代码编写酷炫篝火
[31.35]–3D_tiles高级样式设置与条件渲染
[31.35]–场景火焰实时跟着音乐律动与音乐距离衰减
[31.3]–详讲viewer查看器
[31.3]–元宇宙碰撞检测实现
[31.4]–cesium天空盒
[31.4]–控制物体运动与阻尼
[31.5]–Cesium自定义地图与地图叠加
[31.5]–运用叉积控制左右水平运动
[31.6]–添加地形与添加自定义地形
[31.6]–相机跟随任务运动与跳跃实现
[31.7]–让人物爬坡爬楼梯原理
[31.7]–坐标系与坐标系数值转换
[31.8]–LOD多细节分层次优化场景模型展示
[31.9]–巧用空对象完成相机左右跟随人物
[32.11]–纹理采样设置酷炫轨迹飞线
[32.12]–色器实现五彩斑斓雷达特效
[32.13]–六边形光波扩散特效
[32.14]–着色器编写区域光墙
[32.15]–粒子实现广州塔小蛮腰烟花特效
[32.1]–项目介绍
[32.2]–制作获取地图经纬度插件
[32.3]–指南罗盘与比例尺
[32.4]–修改着色器实现酷炫地图颜色
[32.5]–编写着色器实现建筑物渐变特效
[32.6]–编写着色器实现滚动光环特效
[32.7]–实现酷炫光锥动画
[32.8]–着色器实现科技感流光飞线特效
[32.9]–地理小工具生成道路汽车行驶轨迹线
[4.10]–设置金属度与金属贴图
[4.11]–法线贴图应用
[4.12]–如何获取各种类型纹理贴图
[4.13]–纹理加载进度情况
[4.14]–详解环境贴图
[4.15]–经纬线映射贴图与HDR
[4.1]–初识材质与纹理
[4.2]–详解纹理偏移_旋转_重复
[4.3]–设置纹理显示算法与mipmap
[4.4]–透明材质与透明纹理
[4.5]–环境遮挡贴图与强度
[4.6]–详解PBR物理渲染
[4.7]–标准网格材质与光照物理效果
[4.8]–置换贴图与顶点细分设置
[4.9]–设置粗糙度与粗糙度贴图
[5.1]–灯光与阴影的关系与设置
[5.2]–平行光阴影属性与阴影相机原理
[5.3]–详解聚光灯各种属性与应用
[5.4]–详解点光源属性与应用
[6.1]–初识Points与点材质
[6.2]–深度解析点材质属性
[6.3]–应用顶点着色打造绚丽多彩的星空
[6.4]–通过封装与相机裁剪实现漫天飞舞的雪花
[6.5]–运用数学知识打造复杂形状臂旋星系01
[6.6]–运用数学知识打造复杂形状臂旋星系02
[6.7]–运用数学知识打造复杂形状臂旋星系03
[6.8]–运用颜色收敛方法设置星系臂旋渐变
[7.1]–精讲投射光线实现3维物体交互
[8.1]–设置页面结构与样式
[8.2]–同步屏幕滚动与相机位置
[8.3]–设置三屏特效
[8.4]–切屏触发当前屏幕物体特效
[8.5]–gsap控制网页切屏文字动画
[8.6]–鼠标控制相机摇晃特效
[8.7]–设置滚动条隐藏的方式
[9.1]–认识物理引擎与cannon安装
[9.2]–使用物理引擎关联Threejs物体
[9.3]–设置固定不动的地面与小球碰撞
[9.4]–监听碰撞事件和控制碰撞音效
[9.5]–关联材质设置摩擦与弹性系数
[9.6]–立方体相互碰撞后旋转效果
[9.7]–给物体施加作用力

包含内容

· [1.1]–如何的学习WEB可视化3D技术与课程内容演示
· [1.2]–本地搭建threejs官方网站
· [1.3]–使用parcel搭建three.js开发环境
· [1.4]–使用three.js渲染第一个场景和物体
· [1.5]–如何处理运行搭建开发Three环境出现的问题
· [10.1]–渲染管线
· [10.2]–细讲渲染流程
· [10.3]–WEBGL绘制三角形

贡献者

小宇

白银

学习社区

1 人正在学习

编程与技术实践交流

交流编程基础、项目实践、数据库和部署问题。提问请说明环境、复现步骤与已尝试的方法。

加入学习群

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

来自网络整理

免费领取学习资源

原价：199¥7,766 领取 · 7,345 收藏

Three.js 前端开发

资源介绍：

课程全面系统的讲解WEB 3D可视化技术，涵盖目前企业开发的各种应用技术和项目案例。包含智慧园区、智慧城市、智慧工厂

课程目录

[1.1]–如何的学习WEB可视化3D技术与课程内容演示
[1.2]–本地搭建threejs官方网站
[1.3]–使用parcel搭建three.js开发环境
[1.4]–使用three.js渲染第一个场景和物体
[1.5]–如何处理运行搭建开发Three环境出现的问题
[10.1]–渲染管线
[10.2]–细讲渲染流程
[10.3]–WEBGL绘制三角形
[10.4]–缩放矩阵与uniform变量和varying变量
[10.5]–着色器glsl基本规范
[11.10]–shader着色器打造漫天飞舞孔明灯1
[11.11]–shader着色器打造漫天飞舞孔明灯2
[11.1]–初识着色器语言
[11.2]–着色器插件安装与文件导入开发
[11.3]–认识rawShaderMaterial与attribute_un
[11.4]–控制顶点位置打造波浪形状
[11.5]–unform传递时间变量打造动画与通过uv采样纹理
[11.6]–着色器编写各种类型图案
[11.7]–着色器编写各类型图案2
[11.8]–shader着色器编写高级图案
[11.9]–shader着色器编写高级图案2
[12.1]–烟雾水效果介绍与代码准备v
[12.2]–sin函数与噪声函数混合
[12.3]–设置sin与噪声参数
[12.4]–时间打造流动效果
[12.5]–设置水流和波纹方向与速度
[12.6]–使用官方提供的水模型
[12.7]–打造沙滩_水池
[13.1]–着色器设置点材质基本设置
[13.2]–点着色器图形设置原理
[13.3]–使用纹理设置点着色器材质
[13.4]–Points中生成不同点图案
[13.5]–根据视图Position设置点图案远近大小
[13.6]–着色器设置顶点旋转打造臂旋星系
[13.7]–着色器设置顶点颜色打造渐变星系
[14.1]–点着色器设置炫丽烟花项目案例01
[14.2]–点着色器设置炫丽烟花项目案例02
[14.3]–点着色器设置炫丽烟花项目案例03
[15.1]–three框架材质原理与应用
[15.2]–修改物理光照材质制作人物被打效果01
[15.3]–修改物理光照材质制作人物被打效果02
[15.4]–修改物理光照材质制作人物被打效果03
[16.1]–合成效果原理与设置
[16.2]–实现抗锯齿_点效果_发光_屏幕闪动等特效
[16.3]–使用shaderPass实现自定义合成效果
[16.4]–使用法向纹理合成特色渲染镜头
[16.5]–运用时间打造水底波浪动态渲染效果
[17.1]–CSS渲染器基本使用
[17.2]–添加多个元素标签跟随物体移动
[17.3]–使用射线碰撞来检测标签显示隐藏
[18.1]–曲线使用与绘制流程
[18.2]–让物体与相机沿着曲线轨迹运动
[19.1]–变形动画原理与实现
[19.2]–实现花苗生长到花开效果
[2.10]–调用js接口控制画布全屏和退出全屏
[2.11]–应用图形用户界面更改变量
[2.1]–轨道控制器查看物体
[2.2]–添加坐标轴辅助器
[2.3]–设置物体移动
[2.4]–物体的缩放与旋转
[2.5]–应用requestAnimationFrame正确处理动画运动
[2.6]–通过Clock跟踪时间处理动画
[2.7]–Gsap动画库基本使用与原理
[2.8]–Gsap控制动画属性与方法
[2.9]–根据尺寸变化实现自适应画面
[20.1]–全景看房实现原理
[20.2]–客厅厨房多空间切换实现
[21.10]–飞线方案2-着色器绘制酷炫飞线
[21.11]–函数翻折实现彗星型飞线动画
[21.12]–edgeGeometry生成建筑线框特效
[21.13]–智慧城市光墙特效
[21.14]–智慧城市雷达扫描特效
[21.15]–封装3D警告标识与点击提示事件
[21.16]–添加智慧城市天空盒子和设置抗锯齿效果
[21.17]–智慧城市大屏样式与结构
[21.18]–置Pointer-events穿透事件
[21.19]–智慧城市动态数字面板动画
[21.1]–智慧城市和项目介绍
[21.20]–通过接口生成城市事件列表
[21.21]–城市事件列表动态生成雷达-飞线-光墙
[21.22]–大屏HTML元素与场景物体数据交互与特效展现
[21.2]–Vue_Vite创建智慧城市项目并配置glsl写法支持
[21.3]–项目基础代码结构分解
[21.4]–生成城市建筑模型
[21.5]–城市模型科技感渐变效果
[21.6]–多层着色器特效合并与城市光圈扩散效果
[21.7]–直线光带掠过城市效果
[21.8]–从下向上扫描城市特效
[21.9]–利用tube特性生成带纹理图案飞线
[22.1]–blender下载与语言渲染设置
[22.2]–blender大纲选项开关与保存启动文件
[22.3]–界面布局与工具栏侧边栏
[22.4]–3d界面查看与相机视图
[22.5]–相机视图和透视与正交
[22.6]–局部视图与隐藏物体
[22.7]–添加与删除物体和添加物体的操作面板
[22.8]–ExtraObject插件添加额外石头物体
[23.10]–各种视图着色预览使用
[23.1]–物体选择
[23.2]–物体移动旋转缩放设置方式
[23.3]–变换坐标系与变换轴心点
[23.4]–吸附功能使用
[23.5]–模式切换与物体吸附
[23.6]–物体合并与分离
[23.7]–设置物体的父级和子级
[23.8]–叠加层与快速收藏夹
[23.9]–平滑与平直着色
[24.1]–点线面基本操作
[24.2]–删除点线面基本操作
[24.3]–法向与法向翻转
[24.4]–挤出功能使用
[24.5]–倒角
[24.6]–环切与切割
[24.7]–多边形与旋转
[24.8]–光滑和随机以及滑移
[24.9]–推拉_球形化_隔离顶点
[25.1]–阵列修改器
[25.2]–倒角修改器
[25.3]–布尔修改器
[25.4]–镜像修改器
[25.5]–实体化修改器
[25.6]–表面细分修改器
[25.7]–字体3D添加与中文字体
[26.10]–制作照亮路面的路灯
[26.11]–根据地图打造马路
[26.12]–根据地图创建多边形建筑
[26.1]–原理化BSDF
[26.2]–原理化BSDF各种属性使用
[26.3]–使用纹理贴图创建大厦
[26.4]–物体设置2种材质打造大厦屋顶
[26.5]–使用image插件快速搭建房子
[26.6]–通过现实照片打造摩天大楼
[26.7]–使用建筑生成插件快速生成建筑
[26.8]–使用建筑插件快速生成建筑
[26.9]–制作园区树木
[27.10]–设置大屏控制物体运动模式
[27.11]–设置园区汽车运行轨迹与动画
[27.12]–园区多相机视角切换
[27.13]–自定义园区观览模式-轨道-飞行模式-第一人称
[27.1]–资产库打造智慧园区
[27.2]–沃罗诺伊纹理种出随机草地
[27.3]–烘焙计算好光照阴影的纹理
[27.4]–模型优化与材质优化
[27.5]–如何优化导出模型
[27.6]–draco解压模型与场景摄像设置
[27.7]–优化模型渲染逼近真实物理展示效果
[27.8]–园区热气球动画
[27.9]–设置单一物体热气球多种动画
[28.1]–创建骨骼与顶点组
[28.2]–骨骼动画制作
[28.3]–人物的骨骼动画
[28.4]–如何切换控制器聚焦位置与拉近视角
[29.1]–根据户型图搭建户型结构墙体
[29.2]–平面上创建发光灯带
[29.3]–厂房楼层材质光效优化与模型加载
[29.4]–楼层结构与房间用3D科幻悬浮框标注
[29.5]–根据需要微调科幻标注的位置
[29.6]–大屏控制各楼层展开显示
[29.7]–战斗机产品打散变形与组装恢复动画特效
[29.8]–设置单个物体轮廓发光
[29.9]–分层设置物体发光特效
[3.1]–掌握几何体顶点_UV_法向属性
[3.2]–BufferGeometry设置顶点创建矩形
[3.3]–生成酷炫自定义三角形科技物体
[3.4]–常用网格几何体
[30.1]–GEOJSON与地图下载
[30.2]–通过GEO数据生成3D地图
[30.3]–与3D地图进行交互
[30.4]–通过GEO生成地图3D线
[31.10]–人物前后视角切换
[31.10]–添加物体与3D建筑物
[31.11]–标签与广告牌
[31.11]–人物动作控制
[31.12]–3D模型添加与设置
[31.12]–根据速度流畅切换走路与跑步动作
[31.13]–大场景渲染大量相同物体的实例化网格
[31.13]–椭圆_走廊_圆柱体添加与设置
[31.14]–threejs合并物体工具提升渲染性能
[31.14]–多边形_体积折线_矩形_椭球体设置
[31.15]–Primitive创建图像物体
[31.15]–真实物理材质与新增彩虹折射效果
[31.16]–Primitive多个实体与颜色修改
[31.16]–真实动态映射环境物体纹理
[31.17]–镜面反射与原理
[31.17]–与entity和primitive物体交互
[31.18]–canvas绘制纹理生成动态3d文字
[31.18]–与entity和primitive物体交互
[31.19]–alpha贴图与视频纹理
[31.19]–entity材质使用materialProperty
[31.1]–打造第一个cesium应用
[31.1]–元宇宙项目搭建与准备
[31.20]–entity折线材质设置
[31.20]–视频纹理与canvas动态结合打造酷炫3D文字界面
[31.21]–Appearance外观与材质
[31.21]–LOD不同精细模型制作
[31.22]–primitive材质类型与设置
[31.22]–场景多个位置生源音效
[31.23]–fabric自定义着色器设置材质
[31.23]–项目结构与代码编写模式
[31.24]–cesium着色器自带函数与变量
[31.24]–场景动态云雾制作
[31.25]–Appearance编写着色器修改外观
[31.25]–粒子群优化渲染体积云
[31.26]–编写自定义MaterialProperty材质
[31.26]–通过着色器修改水面材质源码实现海洋效果
[31.27]–加载渲染GEOJSON数据
[31.27]–加载元宇宙场景与灯光
[31.28]–元宇宙场景人物控制与物理碰撞
[31.28]–自定义GEOJSON生成物体的样式
[31.29]–KML数据生成3D地理标记
[31.29]–视频纹理实现场景位置目标光阵效果
[31.2]–Cesium基础设置
[31.2]–元宇宙项目物理环境
[31.30]–初识CZML数据与应用
[31.30]–视觉投影修改UV实现酷炫流光光阵特效
[31.31]–CZML时间动态图形场景
[31.31]–人物抵达光阵或位置触发自定义事件
[31.32]–canvas纹理创建场景聊天框
[31.32]–追踪航班跨洋飞行
[31.33]–3DTiles与性能监控
[31.33]–自定义酷炫3D动效文字框
[31.34]–根据不同条件设置3D_tiles样式
[31.34]–修改开源着色器网站shaderToy开源代码编写酷炫篝火
[31.35]–3D_tiles高级样式设置与条件渲染
[31.35]–场景火焰实时跟着音乐律动与音乐距离衰减
[31.3]–详讲viewer查看器
[31.3]–元宇宙碰撞检测实现
[31.4]–cesium天空盒
[31.4]–控制物体运动与阻尼
[31.5]–Cesium自定义地图与地图叠加
[31.5]–运用叉积控制左右水平运动
[31.6]–添加地形与添加自定义地形
[31.6]–相机跟随任务运动与跳跃实现
[31.7]–让人物爬坡爬楼梯原理
[31.7]–坐标系与坐标系数值转换
[31.8]–LOD多细节分层次优化场景模型展示
[31.9]–巧用空对象完成相机左右跟随人物
[32.11]–纹理采样设置酷炫轨迹飞线
[32.12]–色器实现五彩斑斓雷达特效
[32.13]–六边形光波扩散特效
[32.14]–着色器编写区域光墙
[32.15]–粒子实现广州塔小蛮腰烟花特效
[32.1]–项目介绍
[32.2]–制作获取地图经纬度插件
[32.3]–指南罗盘与比例尺
[32.4]–修改着色器实现酷炫地图颜色
[32.5]–编写着色器实现建筑物渐变特效
[32.6]–编写着色器实现滚动光环特效
[32.7]–实现酷炫光锥动画
[32.8]–着色器实现科技感流光飞线特效
[32.9]–地理小工具生成道路汽车行驶轨迹线
[4.10]–设置金属度与金属贴图
[4.11]–法线贴图应用
[4.12]–如何获取各种类型纹理贴图
[4.13]–纹理加载进度情况
[4.14]–详解环境贴图
[4.15]–经纬线映射贴图与HDR
[4.1]–初识材质与纹理
[4.2]–详解纹理偏移_旋转_重复
[4.3]–设置纹理显示算法与mipmap
[4.4]–透明材质与透明纹理
[4.5]–环境遮挡贴图与强度
[4.6]–详解PBR物理渲染
[4.7]–标准网格材质与光照物理效果
[4.8]–置换贴图与顶点细分设置
[4.9]–设置粗糙度与粗糙度贴图
[5.1]–灯光与阴影的关系与设置
[5.2]–平行光阴影属性与阴影相机原理
[5.3]–详解聚光灯各种属性与应用
[5.4]–详解点光源属性与应用
[6.1]–初识Points与点材质
[6.2]–深度解析点材质属性
[6.3]–应用顶点着色打造绚丽多彩的星空
[6.4]–通过封装与相机裁剪实现漫天飞舞的雪花
[6.5]–运用数学知识打造复杂形状臂旋星系01
[6.6]–运用数学知识打造复杂形状臂旋星系02
[6.7]–运用数学知识打造复杂形状臂旋星系03
[6.8]–运用颜色收敛方法设置星系臂旋渐变
[7.1]–精讲投射光线实现3维物体交互
[8.1]–设置页面结构与样式
[8.2]–同步屏幕滚动与相机位置
[8.3]–设置三屏特效
[8.4]–切屏触发当前屏幕物体特效
[8.5]–gsap控制网页切屏文字动画
[8.6]–鼠标控制相机摇晃特效
[8.7]–设置滚动条隐藏的方式
[9.1]–认识物理引擎与cannon安装
[9.2]–使用物理引擎关联Threejs物体
[9.3]–设置固定不动的地面与小球碰撞
[9.4]–监听碰撞事件和控制碰撞音效
[9.5]–关联材质设置摩擦与弹性系数
[9.6]–立方体相互碰撞后旋转效果
[9.7]–给物体施加作用力

包含内容

· [1.1]–如何的学习WEB可视化3D技术与课程内容演示
· [1.2]–本地搭建threejs官方网站
· [1.3]–使用parcel搭建three.js开发环境
· [1.4]–使用three.js渲染第一个场景和物体
· [1.5]–如何处理运行搭建开发Three环境出现的问题
· [10.1]–渲染管线
· [10.2]–细讲渲染流程
· [10.3]–WEBGL绘制三角形

小宇

贡献者

学习社区

编程与技术实践交流

交流编程基础、项目实践、数据库和部署问题。提问请说明环境、复现步骤与已尝试的方法。

加入学习群

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

来自网络整理·免费领取学习资源

7,766 领取 · 7,345 收藏更新于 2026年9月20日

Three.js 前端开发

资源介绍：

课程全面系统的讲解WEB 3D可视化技术，涵盖目前企业开发的各种应用技术和项目案例。包含智慧园区、智慧城市、智慧工厂

课程目录

[1.1]–如何的学习WEB可视化3D技术与课程内容演示
[1.2]–本地搭建threejs官方网站
[1.3]–使用parcel搭建three.js开发环境
[1.4]–使用three.js渲染第一个场景和物体
[1.5]–如何处理运行搭建开发Three环境出现的问题
[10.1]–渲染管线
[10.2]–细讲渲染流程
[10.3]–WEBGL绘制三角形
[10.4]–缩放矩阵与uniform变量和varying变量
[10.5]–着色器glsl基本规范
[11.10]–shader着色器打造漫天飞舞孔明灯1
[11.11]–shader着色器打造漫天飞舞孔明灯2
[11.1]–初识着色器语言
[11.2]–着色器插件安装与文件导入开发
[11.3]–认识rawShaderMaterial与attribute_un
[11.4]–控制顶点位置打造波浪形状
[11.5]–unform传递时间变量打造动画与通过uv采样纹理
[11.6]–着色器编写各种类型图案
[11.7]–着色器编写各类型图案2
[11.8]–shader着色器编写高级图案
[11.9]–shader着色器编写高级图案2
[12.1]–烟雾水效果介绍与代码准备v
[12.2]–sin函数与噪声函数混合
[12.3]–设置sin与噪声参数
[12.4]–时间打造流动效果
[12.5]–设置水流和波纹方向与速度
[12.6]–使用官方提供的水模型
[12.7]–打造沙滩_水池
[13.1]–着色器设置点材质基本设置
[13.2]–点着色器图形设置原理
[13.3]–使用纹理设置点着色器材质
[13.4]–Points中生成不同点图案
[13.5]–根据视图Position设置点图案远近大小
[13.6]–着色器设置顶点旋转打造臂旋星系
[13.7]–着色器设置顶点颜色打造渐变星系
[14.1]–点着色器设置炫丽烟花项目案例01
[14.2]–点着色器设置炫丽烟花项目案例02
[14.3]–点着色器设置炫丽烟花项目案例03
[15.1]–three框架材质原理与应用
[15.2]–修改物理光照材质制作人物被打效果01
[15.3]–修改物理光照材质制作人物被打效果02
[15.4]–修改物理光照材质制作人物被打效果03
[16.1]–合成效果原理与设置
[16.2]–实现抗锯齿_点效果_发光_屏幕闪动等特效
[16.3]–使用shaderPass实现自定义合成效果
[16.4]–使用法向纹理合成特色渲染镜头
[16.5]–运用时间打造水底波浪动态渲染效果
[17.1]–CSS渲染器基本使用
[17.2]–添加多个元素标签跟随物体移动
[17.3]–使用射线碰撞来检测标签显示隐藏
[18.1]–曲线使用与绘制流程
[18.2]–让物体与相机沿着曲线轨迹运动
[19.1]–变形动画原理与实现
[19.2]–实现花苗生长到花开效果
[2.10]–调用js接口控制画布全屏和退出全屏
[2.11]–应用图形用户界面更改变量
[2.1]–轨道控制器查看物体
[2.2]–添加坐标轴辅助器
[2.3]–设置物体移动
[2.4]–物体的缩放与旋转
[2.5]–应用requestAnimationFrame正确处理动画运动
[2.6]–通过Clock跟踪时间处理动画
[2.7]–Gsap动画库基本使用与原理
[2.8]–Gsap控制动画属性与方法
[2.9]–根据尺寸变化实现自适应画面
[20.1]–全景看房实现原理
[20.2]–客厅厨房多空间切换实现
[21.10]–飞线方案2-着色器绘制酷炫飞线
[21.11]–函数翻折实现彗星型飞线动画
[21.12]–edgeGeometry生成建筑线框特效
[21.13]–智慧城市光墙特效
[21.14]–智慧城市雷达扫描特效
[21.15]–封装3D警告标识与点击提示事件
[21.16]–添加智慧城市天空盒子和设置抗锯齿效果
[21.17]–智慧城市大屏样式与结构
[21.18]–置Pointer-events穿透事件
[21.19]–智慧城市动态数字面板动画
[21.1]–智慧城市和项目介绍
[21.20]–通过接口生成城市事件列表
[21.21]–城市事件列表动态生成雷达-飞线-光墙
[21.22]–大屏HTML元素与场景物体数据交互与特效展现
[21.2]–Vue_Vite创建智慧城市项目并配置glsl写法支持
[21.3]–项目基础代码结构分解
[21.4]–生成城市建筑模型
[21.5]–城市模型科技感渐变效果
[21.6]–多层着色器特效合并与城市光圈扩散效果
[21.7]–直线光带掠过城市效果
[21.8]–从下向上扫描城市特效
[21.9]–利用tube特性生成带纹理图案飞线
[22.1]–blender下载与语言渲染设置
[22.2]–blender大纲选项开关与保存启动文件
[22.3]–界面布局与工具栏侧边栏
[22.4]–3d界面查看与相机视图
[22.5]–相机视图和透视与正交
[22.6]–局部视图与隐藏物体
[22.7]–添加与删除物体和添加物体的操作面板
[22.8]–ExtraObject插件添加额外石头物体
[23.10]–各种视图着色预览使用
[23.1]–物体选择
[23.2]–物体移动旋转缩放设置方式
[23.3]–变换坐标系与变换轴心点
[23.4]–吸附功能使用
[23.5]–模式切换与物体吸附
[23.6]–物体合并与分离
[23.7]–设置物体的父级和子级
[23.8]–叠加层与快速收藏夹
[23.9]–平滑与平直着色
[24.1]–点线面基本操作
[24.2]–删除点线面基本操作
[24.3]–法向与法向翻转
[24.4]–挤出功能使用
[24.5]–倒角
[24.6]–环切与切割
[24.7]–多边形与旋转
[24.8]–光滑和随机以及滑移
[24.9]–推拉_球形化_隔离顶点
[25.1]–阵列修改器
[25.2]–倒角修改器
[25.3]–布尔修改器
[25.4]–镜像修改器
[25.5]–实体化修改器
[25.6]–表面细分修改器
[25.7]–字体3D添加与中文字体
[26.10]–制作照亮路面的路灯
[26.11]–根据地图打造马路
[26.12]–根据地图创建多边形建筑
[26.1]–原理化BSDF
[26.2]–原理化BSDF各种属性使用
[26.3]–使用纹理贴图创建大厦
[26.4]–物体设置2种材质打造大厦屋顶
[26.5]–使用image插件快速搭建房子
[26.6]–通过现实照片打造摩天大楼
[26.7]–使用建筑生成插件快速生成建筑
[26.8]–使用建筑插件快速生成建筑
[26.9]–制作园区树木
[27.10]–设置大屏控制物体运动模式
[27.11]–设置园区汽车运行轨迹与动画
[27.12]–园区多相机视角切换
[27.13]–自定义园区观览模式-轨道-飞行模式-第一人称
[27.1]–资产库打造智慧园区
[27.2]–沃罗诺伊纹理种出随机草地
[27.3]–烘焙计算好光照阴影的纹理
[27.4]–模型优化与材质优化
[27.5]–如何优化导出模型
[27.6]–draco解压模型与场景摄像设置
[27.7]–优化模型渲染逼近真实物理展示效果
[27.8]–园区热气球动画
[27.9]–设置单一物体热气球多种动画
[28.1]–创建骨骼与顶点组
[28.2]–骨骼动画制作
[28.3]–人物的骨骼动画
[28.4]–如何切换控制器聚焦位置与拉近视角
[29.1]–根据户型图搭建户型结构墙体
[29.2]–平面上创建发光灯带
[29.3]–厂房楼层材质光效优化与模型加载
[29.4]–楼层结构与房间用3D科幻悬浮框标注
[29.5]–根据需要微调科幻标注的位置
[29.6]–大屏控制各楼层展开显示
[29.7]–战斗机产品打散变形与组装恢复动画特效
[29.8]–设置单个物体轮廓发光
[29.9]–分层设置物体发光特效
[3.1]–掌握几何体顶点_UV_法向属性
[3.2]–BufferGeometry设置顶点创建矩形
[3.3]–生成酷炫自定义三角形科技物体
[3.4]–常用网格几何体
[30.1]–GEOJSON与地图下载
[30.2]–通过GEO数据生成3D地图
[30.3]–与3D地图进行交互
[30.4]–通过GEO生成地图3D线
[31.10]–人物前后视角切换
[31.10]–添加物体与3D建筑物
[31.11]–标签与广告牌
[31.11]–人物动作控制
[31.12]–3D模型添加与设置
[31.12]–根据速度流畅切换走路与跑步动作
[31.13]–大场景渲染大量相同物体的实例化网格
[31.13]–椭圆_走廊_圆柱体添加与设置
[31.14]–threejs合并物体工具提升渲染性能
[31.14]–多边形_体积折线_矩形_椭球体设置
[31.15]–Primitive创建图像物体
[31.15]–真实物理材质与新增彩虹折射效果
[31.16]–Primitive多个实体与颜色修改
[31.16]–真实动态映射环境物体纹理
[31.17]–镜面反射与原理
[31.17]–与entity和primitive物体交互
[31.18]–canvas绘制纹理生成动态3d文字
[31.18]–与entity和primitive物体交互
[31.19]–alpha贴图与视频纹理
[31.19]–entity材质使用materialProperty
[31.1]–打造第一个cesium应用
[31.1]–元宇宙项目搭建与准备
[31.20]–entity折线材质设置
[31.20]–视频纹理与canvas动态结合打造酷炫3D文字界面
[31.21]–Appearance外观与材质
[31.21]–LOD不同精细模型制作
[31.22]–primitive材质类型与设置
[31.22]–场景多个位置生源音效
[31.23]–fabric自定义着色器设置材质
[31.23]–项目结构与代码编写模式
[31.24]–cesium着色器自带函数与变量
[31.24]–场景动态云雾制作
[31.25]–Appearance编写着色器修改外观
[31.25]–粒子群优化渲染体积云
[31.26]–编写自定义MaterialProperty材质
[31.26]–通过着色器修改水面材质源码实现海洋效果
[31.27]–加载渲染GEOJSON数据
[31.27]–加载元宇宙场景与灯光
[31.28]–元宇宙场景人物控制与物理碰撞
[31.28]–自定义GEOJSON生成物体的样式
[31.29]–KML数据生成3D地理标记
[31.29]–视频纹理实现场景位置目标光阵效果
[31.2]–Cesium基础设置
[31.2]–元宇宙项目物理环境
[31.30]–初识CZML数据与应用
[31.30]–视觉投影修改UV实现酷炫流光光阵特效
[31.31]–CZML时间动态图形场景
[31.31]–人物抵达光阵或位置触发自定义事件
[31.32]–canvas纹理创建场景聊天框
[31.32]–追踪航班跨洋飞行
[31.33]–3DTiles与性能监控
[31.33]–自定义酷炫3D动效文字框
[31.34]–根据不同条件设置3D_tiles样式
[31.34]–修改开源着色器网站shaderToy开源代码编写酷炫篝火
[31.35]–3D_tiles高级样式设置与条件渲染
[31.35]–场景火焰实时跟着音乐律动与音乐距离衰减
[31.3]–详讲viewer查看器
[31.3]–元宇宙碰撞检测实现
[31.4]–cesium天空盒
[31.4]–控制物体运动与阻尼
[31.5]–Cesium自定义地图与地图叠加
[31.5]–运用叉积控制左右水平运动
[31.6]–添加地形与添加自定义地形
[31.6]–相机跟随任务运动与跳跃实现
[31.7]–让人物爬坡爬楼梯原理
[31.7]–坐标系与坐标系数值转换
[31.8]–LOD多细节分层次优化场景模型展示
[31.9]–巧用空对象完成相机左右跟随人物
[32.11]–纹理采样设置酷炫轨迹飞线
[32.12]–色器实现五彩斑斓雷达特效
[32.13]–六边形光波扩散特效
[32.14]–着色器编写区域光墙
[32.15]–粒子实现广州塔小蛮腰烟花特效
[32.1]–项目介绍
[32.2]–制作获取地图经纬度插件
[32.3]–指南罗盘与比例尺
[32.4]–修改着色器实现酷炫地图颜色
[32.5]–编写着色器实现建筑物渐变特效
[32.6]–编写着色器实现滚动光环特效
[32.7]–实现酷炫光锥动画
[32.8]–着色器实现科技感流光飞线特效
[32.9]–地理小工具生成道路汽车行驶轨迹线
[4.10]–设置金属度与金属贴图
[4.11]–法线贴图应用
[4.12]–如何获取各种类型纹理贴图
[4.13]–纹理加载进度情况
[4.14]–详解环境贴图
[4.15]–经纬线映射贴图与HDR
[4.1]–初识材质与纹理
[4.2]–详解纹理偏移_旋转_重复
[4.3]–设置纹理显示算法与mipmap
[4.4]–透明材质与透明纹理
[4.5]–环境遮挡贴图与强度
[4.6]–详解PBR物理渲染
[4.7]–标准网格材质与光照物理效果
[4.8]–置换贴图与顶点细分设置
[4.9]–设置粗糙度与粗糙度贴图
[5.1]–灯光与阴影的关系与设置
[5.2]–平行光阴影属性与阴影相机原理
[5.3]–详解聚光灯各种属性与应用
[5.4]–详解点光源属性与应用
[6.1]–初识Points与点材质
[6.2]–深度解析点材质属性
[6.3]–应用顶点着色打造绚丽多彩的星空
[6.4]–通过封装与相机裁剪实现漫天飞舞的雪花
[6.5]–运用数学知识打造复杂形状臂旋星系01
[6.6]–运用数学知识打造复杂形状臂旋星系02
[6.7]–运用数学知识打造复杂形状臂旋星系03
[6.8]–运用颜色收敛方法设置星系臂旋渐变
[7.1]–精讲投射光线实现3维物体交互
[8.1]–设置页面结构与样式
[8.2]–同步屏幕滚动与相机位置
[8.3]–设置三屏特效
[8.4]–切屏触发当前屏幕物体特效
[8.5]–gsap控制网页切屏文字动画
[8.6]–鼠标控制相机摇晃特效
[8.7]–设置滚动条隐藏的方式
[9.1]–认识物理引擎与cannon安装
[9.2]–使用物理引擎关联Threejs物体
[9.3]–设置固定不动的地面与小球碰撞
[9.4]–监听碰撞事件和控制碰撞音效
[9.5]–关联材质设置摩擦与弹性系数
[9.6]–立方体相互碰撞后旋转效果
[9.7]–给物体施加作用力

包含内容

· [1.1]–如何的学习WEB可视化3D技术与课程内容演示
· [1.2]–本地搭建threejs官方网站
· [1.3]–使用parcel搭建three.js开发环境
· [1.4]–使用three.js渲染第一个场景和物体
· [1.5]–如何处理运行搭建开发Three环境出现的问题
· [10.1]–渲染管线
· [10.2]–细讲渲染流程
· [10.3]–WEBGL绘制三角形

贡献者

小宇

白银

学习社区

1 人正在学习

编程与技术实践交流

交流编程基础、项目实践、数据库和部署问题。提问请说明环境、复现步骤与已尝试的方法。

加入学习群

资料

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

课程目录

包含内容

学习社区

评论

相关资源

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

课程目录

包含内容

学习社区

评论

相关资源

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

课程目录

包含内容

学习社区

评论

相关资源

Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术

课程目录

包含内容

学习社区

评论

相关资源