适用人群

1. 想掌握Web前端高薪技能:3D可视化,差异化竞争
2. 已有一定web3d经验,想学高阶(课程中高阶内容很多)

课程概述

内容巨多!(入门+中级+高阶+案例),全网除了本课程,很少有课程提供那么多高级进阶的案例或知识讲解,这意味着,初学者除了入门学习,还可以长期进阶学习,已经入门的可以拿来高级进阶。

目录

章节1:课程部分3D案例展示试看
课时1视频课程案例源码3D效果5分钟速览04:18可试看
课时2视频智慧城市数字孪生3D可视化01:46可试看
课时3视频智慧小区01:00可试看
课时4视频物联网数字孪生3D可视化案例——收费站00:31可试看
课时5视频智慧工厂(初步效果,完善中)01:07可试看
课时6视频产品720 3D展示( 轿车 手机)01:58可试看
课时7视频地球大屏3D可视化—飞线00:41可试看
课时8视频地图中国大屏可视化00:24可试看
课时9视频机械 BIM在线预览(源码在课件中)00:21可试看
课时10视频展厅案例01:34可试看
章节2:Web3D生态和如何学习试看
课时11视频课程面向人群07:28可试看
课时12视频Web3D现状以及如何学习07:32可试看
课时13视频WebGL前端工程师工作、要求、待遇问题15:23可试看
章节3:【Threejs教程】1.threejs快速入门试看
课时14视频1.threejs文件包下载和目录简介06:50可试看
课时15视频2.学习环境—代码编辑器和本地静态服务器08:48可试看
课时16视频3.开发和学习环境,引入threejs库17:29可试看
课时17视频4.第一个3D案例—创建3D场景12:39可试看
课时18视频5.第一个3D案例—透视投影相机19:03可试看
课时19视频6.第一个3D案例—渲染器13:36可试看
课时20视频7.Threejs三维坐标系—加强三维空间认识16:45可试看
课时21视频8.光源对物体表面影响11:55可试看
课时22视频9.相机控件轨道控制器OrbitControls13:45可试看
课时23视频【选修】Vue + Threejs 开发环境( 可跳过 )15:37可试看
课时24视频【选修】React +  Threejs开发环境( 可跳过 )12:28可试看
课时25视频10.平行光与环境光19:04可试看
课时26视频11.动画渲染循环16:20可试看
课时27视频12.Canvas画布布局和全屏10:24可试看
课时28视频13.stats查看threejs渲染帧率11:57可试看
课时29视频14.阵列立方体和相机适配体验19:06可试看
课时30视频15.Threejs常见简单几何体简介09:12
课时31视频16.高光网格材质MeshPhongMaterial10:14
课时32视频17.WebGL渲染器设置(锯齿模糊、背景颜色)08:52
课时33视频18.gui.js库(可视化改变三维场景)22:01
课时34视频19.gui.js库(颜色、命名、步长、事件)11:48
课时35视频20.gui.js库(下拉菜单、单选框)11:48
课时36视频21.gui.js库(分组)10:05
课时37视频22.查询案例examples和文档(辅助开发)11:06
课时38视频23.threejs语法总结18:06
章节4:【Threejs教程】2.几何体BufferGeometry顶点
课时39视频1.几何体顶点位置数据和点模型对象Points14:52
课时40视频2.线模型渲染顶点数据06:59
课时41视频3.网格模型渲染顶点数据(三角形概念)08:18
课时42视频4.构建一个矩形平面几何体07:13
课时43视频5.几何体顶点索引数据07:56
课时44视频6.顶点法线数据11:21
课时45视频7.查看three.js自带几何体顶点结构12:14
课时46视频8.BufferGeometry的旋转、缩放、平移方法08:42
章节5:【Threejs教程】3.模型对象、材质
课时47视频1.三维向量Vector3与模型位置、缩放属性20:21
课时48视频2.欧拉Euler与角度属性.rotation11:04
课时49视频3.模型材质颜色(Color对象)13:02
课时50视频4.模型材质父类Material12:10
课时51视频5.模型材质和几何体属性10:18
课时52视频6.克隆.clone()和复制.copy()12:50
章节6:【Threejs教程】4.层级模型
课时53视频1.组对象Group、层级模型17:33
课时54视频2.递归遍历模型树结构、查询模型节点10:36
课时55视频3.本地坐标和世界坐标10:22
课时56视频4.改变模型相对局部坐标原点位置05:20
课时57视频5.移除对象.remove()06:09
课时58视频6.模型隐藏或显示06:14
章节7:【Threejs教程】5.几何顶点UV坐标、纹理贴图
课时59视频1.创建纹理贴图07:52
课时60视频2.自定义顶点UV坐标08:26
课时61视频3.圆形平面CircleGeometry设置纹理贴图07:19
课时62视频4.纹理对象Texture阵列( 瓷砖地面案例 )08:26
课时63视频5.矩形Mesh加背景透明png贴图(场景标注)10:19
课时64视频6.UV动画(偏移属性.offset)17:51
章节8:【Threejs教程】6.加载外部三维模型(gltf)
课时65视频1.建模软件绘制3D场景(比如Blender)07:06
课时66视频2. GLTF格式简介 (Web3D领域JPG)10:26
课时67视频3.加载.gltf文件(模型加载全流程) (如遇版本变化参考电子书说明)27:27
课时68视频4.OrbitControls辅助设置相机参数11:09
课时69视频5.gltf不同文件形式(.glb、贴图、.bin)06:43
课时70视频6.模型命名(程序与美术协作)—层级模型节点选择12:15
课时71视频7.递归遍历层级模型修改材质08:53
课时72视频8.外部模型材质是否共享的问题08:42
课时73视频9.纹理.encoding和渲染器.outputEncoding10:40
课时74视频10.gltf模型更换.map(纹理.flipY属性)06:17
章节9:【Threejs教程】7.PBR材质与纹理贴图
课时75视频1.PBR材质简介08:36
课时76视频2.PBR材质金属度和粗糙度(金属效果)08:53
课时77视频3.环境贴图.envMap(金属效果)13:07
课时78视频4.环境贴图207:49
课时79视频5.MeshPhysicalMaterial清漆层Clearcoat13:53
课时80视频6.物理材质透光率.transmission08:08
课时81视频7.三维软件导出PBR材质属性10:02
章节10:【Threejs教程】8.渲染器和前端UI交互界面
课时82视频1.three.js Canvas画布布局13:06
课时83视频2.UI交互界面与Canvas画布叠加07:24
课时84视频3.UI交互按钮与3D场景交互03:33
课时85视频4.Three.js背景透明度06:37
课时86视频5.Three.js渲染结果保存为图片07:41
课时87视频6.深度冲突(模型闪烁)10:17
课时88视频7.模型加载进度条10:52
章节11:【Threejs教程】9.生成曲线、几何体
课时89视频1.生成圆弧顶点07:34
课时90视频2.几何体方法.setFromPoints()07:22
课时91视频3.曲线Curve简介10:05
课时92视频4.椭圆、圆07:53
课时93视频5.样条曲线08:10
课时94视频6.贝塞尔曲线10:25
课时95视频7.样条、贝塞尔曲线应用07:29
课时96视频8.组合曲线CurvePath拼接不同曲线12:28
课时97视频9.曲线路径管道TubeGeometry08:35
课时98视频10.旋转成型LatheGeometry06:58
课时99视频11.轮廓填充ShapeGeometry05:47
课时100视频12.拉伸ExtrudeGeometry12:37
课时101视频13.扫描ExtrudeGeometry05:25
课时102视频14.多边形轮廓Shape简介10:16
课时103视频15.多边形轮廓Shape(圆弧)10:08
课时104视频16.多边形Shape(内孔.holes)05:35
课时105视频17.模型边界线EdgesGeometry08:47
课时106视频18.几何体顶点颜色数数据08:56
课时107视频19.一段曲线颜色渐变08:29
课时108视频20.Color颜色渐变插值11:26
课时109视频21.查看或设置gltf几何体顶点09:08
课时110视频22.山脉地形高度可视化10:07
章节12:【Threejs教程】10.相机基础
课时111视频1.正投影相机20:43
课时112视频2.正投影相机-Canvas画布尺寸变化08:38
课时113视频3.包围盒Box308:38
课时114视频4.地图案例(包围盒、正投影)15:33
课时115视频5.相机动画( .position 和 .lookAt() )09:01
课时116视频6.不同方向的投影视图05:21
课时117视频7.相机上方向.up(旋转渲染结果)05:38
课时118视频8.管道漫游案例12:37
课时119视频9.OrbitControls旋转缩放限制13:41
课时120视频10.相机控件MapControls07:09
章节13:【Threejs教程】11.光源和阴影【工厂案例】
课时121视频1.聚光源SpotLight11:01
课时122视频2.平行光阴影计算17:07
课时123视频3.阴影范围.shadow.camera15:06
课时124视频4.阴影像素、弱化阴影边缘09:53
课时125视频5.工厂光源(环境贴图和环境光)08:51
课时126视频6.工厂光源(平行光模拟太阳光)13:11
课时127视频7.工厂(模拟太阳光阴影)11:31
课时128视频8.gui辅助调节阴影范围08:57
章节14:【Threejs教程】12.精灵模型Sprite
课时129视频1.精灵模型对象Sprite15:53
课时130视频2.精灵模型标注场景(贴图)13:30
课时131视频3.Sprite模拟下雨、下雪22:19
章节15:【Threejs教程】13.后期处理【工厂案例】
课时132视频1.后处理(高亮发光描边OutlinePass)12:40
课时133视频2.OutlinePass发光描边样式05:35
课时134视频3.Bloom发光通道07:32
课时135视频4.多通道组合(GlitchPass和描边)04:05
课时136视频5.gltf工厂模型设置发光描边08:30
课时137视频6.gltf后处理颜色异常(伽马校正)07:20
课时138视频7.抗锯齿后处理15:03
章节16:【Threejs教程】14.射线拾取模型【工厂案例】
课时139视频1.射线Ray20:07
课时140视频2.Raycaster(射线拾取模型)14:39
课时141视频3.屏幕坐标转标准设备坐标18:00
课时142视频4.Raycaster(鼠标点击选中模型)09:05
课时143视频5.Canvas尺寸变化(射线坐标计算)09:47
课时144视频6.射线拾取层级模型(发光描边)11:57
课时145视频7.射线拾取Sprite控制场景04:58
章节17:【Threejs教程】15.场景标注标签【工厂案例】
课时146视频1.CSS2DRenderer(HTM元素作为标签)23:40
课时147视频2.HTML标签遮挡Canvas画布事件09:46
课时148视频3.Canvas画布尺寸变化(HTML标签)09:46
课时149视频4.标签位置不同设置方式16:20
课时150视频5.标签位置(标注工厂设备)11:01
课时151视频6.标签指示线或箭头指向标注点12:40
课时152视频7.鼠标选中模型弹出标签(工厂案例)16:29
课时153视频8.单机按钮关闭HTML标签07:18
课时154视频9.CSS3DRenderer渲染HTML标签22:09
课时155视频10.CSS3批量标注多个标签12:52
课时156视频11.精灵模型Sprite作为标签08:08
课时157视频12.Sprite标签(Canvas作为贴图)12:50
章节18:【Threejs教程】16.关键帧动画
课时158视频1.关键帧动画14:45
课时159视频2.动画播放(暂停、倍速、循环)16:33
课时160视频3.动画播放(拖动任意时间状态)11:57
课时161视频4.解析外部模型关键帧动画13:41
课时162视频5.机械虚拟装配案例(播放)11:07
课时163视频6.虚拟装配(任意时间定位)08:12
课时164视频7.变形动画原理17:27
课时165视频8.变形动画(定制人物胖瘦)15:17
课时166视频9.骨骼关节Bon13:43
课时167视频10.查看外部模型骨骼动画16:21
课时168视频11.骨骼动画不同动作切换11:14
章节19:【Threejs教程】17.动画库tween.js
课时169视频1.tweenjs创建threejs动画14:25
课时170视频2.tweenjs相机运动动画11:32
课时171视频3.点按钮,相机飞行靠近观察设备.22:14
课时172视频4.点击设备,相机靠近放大预览10:41
课时173视频5.缓动算法.easing(地球渐入相机动画)09:59
课时174视频6.模型或标签淡入淡出13:32
章节20:【Vue+Threejs 3D可视化(收费站)】0.学前说明试看
课时175视频学前基础07:07可试看
章节21:【Vue3+Threejs(收费站)】1.Vue+Threejs基础试看
课时176视频1.Vite创建threejs开发环境05:17可试看
课时177视频2.Vite+Vue3引入threejs库06:35可试看
课时178视频3.Vue3+Threejs创建第一个3D案例—场景13:51可试看
课时179视频4.Vue3+Threejs创建第一个3D案例—相机13:19可试看
课时180视频5.Vue+threejs第一个3D案例—渲染器09:27可试看
课时181视频6.动画渲染循环06:01可试看
课时182视频7.平行光光源与材质13:05可试看
课时183视频8.相机控件OrbitControls14:05可试看
课时184视频9.渲染器设置(全屏、锯齿等)11:50
课时185视频10.Canvas插入vue3组件(ref方式)【选修】07:46
章节22:【Vue3+Threejs(收费站)】2.三维场景渲染
课时186视频1.3D建模软件搭建3D场景(Blender)05:52
课时187视频2.Blender下载、安装、中文界面【选】01:52
课时188视频3.Blender基本操作:旋转、缩放、平移【选】05:27
课时189视频4.编辑、保存网格模型【选】09:33
课时190视频5. GLTF格式简介 (Web3D领域JPG)【复习】10:26
课时191视频6.(全流程演示)Blender生成模型,threejs加载gltf13:40
课时192视频7.Blender导出gltf设置半透明材质04:09
课时193视频8.建模软件与threejs坐标xyz对应问题07:33
课时194视频9.层级模型、获取模型节点21:12
课时195视频10.模型材质共享问题09:25
课时196视频11.实战加载gltf,相机设置(收费站)19:16
课时197视频12.练习题-相机参数设置(智慧园区)03:27
课时198视频13.加载gltf场景.lookAt()设置08:35
章节23:【Vue3+Threejs(收费站)】3.渲染效果提升
课时199视频1.光照、环境贴图12:31
课时200视频2.环境贴图hdr格式05:13
课时201视频3.天空盒背景图11:00
课时202视频4.threejs深度冲突08:55
课时203视频5.标准网格材质(金属)16:37
课时204视频6.物理网格材质(玻璃)11:31
课时205视频7.dat.gui辅助调试物理材质12:19
课时206视频8.dat.gui辅助调试光源参数05:27
课时207视频9.dat.gui调节平行光照射角度11:33
章节24:【Vue3+Threejs收费站】4.渲染性能、模型压缩
课时208视频1.Stats查看渲染帧率10:29
课时209视频2.threejs三角形、顶点概念17:21
课时210视频3.Blender三角形、顶点23:36
课时211视频4.渲染性能(顶点、显卡)16:40
课时212视频5.Blender模型减面13:54
课时213视频6.模型数量与性能13:11
课时214视频7.减少模型加载时间(压缩)10:54
课时215视频8.Blender设置纹理贴图07:32
课时216视频9.Blender打包、解包文件【图像处理】08:46
课时217视频10.纹理贴图大小【性能优化】11:53
课时218视频11.共享几何体,减小模型文件09:15
章节25:【Vue3+Threejs】5.代码封装、进度条、切视角
课时219视频1.threejs代码封装17:04
课时220视频2.threejs代码封装212:37
课时221视频3.threejs代码封装3-辅助工具15:52
章节26:【Threejs 进阶】1. 数学几何计算基础(向量)
课时222视频1.threejs坐标系与三角函数15:45
课时223视频2.三维向量Vector3简介22:00
课时224视频3.向量大小(Vector3长度.length())33:47
课时225视频4.向量方向(归一化.normalize)20:34
课时226视频5.相机沿着视线方向运动22:35
课时227视频6.箭头ArrowHelper17:45
章节27:【Threejs 进阶】2. 位移、速度、加速度
课时228视频1.匀速动画(向量表示速度)10:29
课时229视频2.物体下落动画(重力加速度)13:06
章节28:【Threejs 进阶】3. 向量点乘、叉乘
课时230视频1.向量点乘dot12:11
课时231视频2.点乘练习-计算三角形夹角09:29
课时232视频3.点乘判断物体在人前或人后11:13
课时233视频4.点乘判断是否在扇形内15:19
课时234视频5.向量叉乘cross.mp418:50
课时235视频6.叉乘判断人左右14:39
课时236视频7.点乘判断平行向量方向异同05:38
课时237视频8.判断两个点是否在线段同一侧14:39
课时238视频9.叉乘计算三角形法线08:14
课时239视频10.叉乘计算三角形面积06:22
课时240视频11.练习—计算物体的表面积12:11
课时241视频12.点到直线的距离06:50
章节29:【Threejs 进阶】4.四元数、欧拉角(角度姿态)
课时242视频1.欧拉角Euler14:22
课时243视频2.四元数Quaternion10:55
课时244视频3.四元数表示物体姿态07:48
课时245视频4.四元数乘法运算09:24
课时246视频5.四元数表示两个向量旋转08:00
课时247视频6.练习-无人机绕飞20:47
章节30:【Threejs 进阶】5. 矩阵基础
课时248视频1.数学基础(平移、旋转、缩放矩阵)15:13
课时249视频2.模型矩阵14:27
课时250视频3.Three.js矩阵Matrix414:44
课时251视频4.矩阵乘法multiply12:28
课时252视频5.模型本地矩阵、世界矩阵16:31
课时253视频6.视图矩阵、投影矩阵19:13
章节31:【Threejs进阶】6.射线
课时254视频1. 射线Ray(复习前面内容)20:07
课时255视频2.射线拾取模型(复习前面)14:39
章节32:【Threejs进阶】7.包围盒
课时256视频1.包围盒Box3(复习前面)08:38
章节33:8. 第一、三人称漫游  ( 游戏/元宇宙 常用) 
课时257视频1.键盘WASD按键状态记录12:27
课时258视频2.W键控制角色模型运动09:30
课时259视频3.W控制人移动,设置加速度08:38
课时260视频4.阻尼(玩家角色逐渐减速停止)08:30
课时261视频5.按键S退后运动04:51
课时262视频6.相机跟着玩家走(第三人称漫游)16:52
课时263视频7.鼠标左右拖动改变玩家视角14:03
课时264视频8.获取玩家(相机)正前方方向10:26
课时265视频9.鼠标上下滑动改变相机视角13:37
课时266视频10.玩家角色左右运动(叉乘)08:26
课时267视频11.鼠标滑动改变视角(指针锁定模式)11:22
课时268视频12.快捷键切换第一、第三人称10:50
课时269视频13.骨骼动画与运动状态关联14:10
章节34:第一、三人称漫游—八叉树碰撞检测
课时270视频1.八叉树Octree扩展库介绍15:44
课时271视频2.胶囊Capsule扩展库13:01
课时272视频3.八叉树与胶囊Capsule交叉计算13:01
课时273视频4.角色漫游(八叉树碰撞检测)17:48
课时274视频5.设置重力加速度(下坡、坠落)10:48
课时275视频6.简化碰撞体(提升八叉树计算性能)18:24
章节35:【Threejs进阶】10.物理引擎CannonJS(更新中)
课时276视频1.CannonJS简介和引入08:01
课时277视频2.CannonJS自由落体计算17:47
课时278视频3.练习-threejs可视化cannon计算结果08:24
课时279视频4. CannonJS模拟乒乓球下落反弹10:41
课时280视频5.练习-修改小球参数04:48
课时281视频6.练习-点按钮重复下落03:56
课时282视频7.CannonJS碰撞事件,碰撞声音12:23
课时283视频8.长方体Box碰撞体(箱子下落)13:50
课时284视频9.练习题-外部gltf箱子模型08:13
课时285视频10.凸多面体ConvexPolyhedron11:29
章节36:vue3+threejs展厅3D可视化试看
课时286视频1.学前说明、展厅效果01:34可试看
课时287视频2.Blender查看展厅模型07:01
课时288视频3.vue3+Vite +threejs【复习】-舍弃 待删除17:04
课时289视频3.vue3+Vite +threejs【重新录制】03:43
课时290视频4.加载展厅gltf模型、相机内部预览13:00
课时291视频5.发光属性.emissive09:41
课时292视频6.Blender设置发光属性07:37
课时293视频7.发光贴图.emissiveMap04:40
课时294视频8.Blender设置emissiveMap05:13
课时295视频9.Blender烘焙光照到贴图14:17
课时296视频10.Blender生成全景环境贴图10:32
课时297视频11.Blender设置环境贴图、涂层06:29
课时298视频12.gui调试环境贴图09:46
课时299视频13.gui调节材质涂层07:56
课时300视频14.threejs渲染曝光功能08:56
课时301视频15.展厅背景音乐05:35
课时302视频16.练习—按钮开关背景音乐14:07
课时303视频17.视频作为纹理贴图09:49
课时304视频18.色差问题—视频纹理颜色空间07:25
课时305视频19.展厅屏幕播放宣传视频07:12
章节37:2. 展厅漫游
课时306视频【预先学】1.八叉树Octree扩展库介绍15:44
课时307视频【预先学】2.胶囊Capsule扩展库13:01
课时308视频【预先学】3.八叉树与胶囊Capsule交叉计算13:01
课时309视频【预先学】4.角色漫游(八叉树碰撞检测)17:48
课时310视频【预先学】5.设置重力加速度(下坡、坠落)10:48
课时311视频【预先学】6.简化碰撞体(提升八叉树计算性能)18:24
课时312视频1.展厅漫游(八叉树碰撞检测)-练习07:41
章节38:【Blender】Blender基础操作试看
课时313视频1.Web3D可视化3D建模02:15可试看
课时314视频2.Blender下载、安装、中文界面01:52可试看
课时315视频3.基本操作:旋转、缩放、平移05:27可试看
课时316视频4.编辑、保存网格模型09:33
课时317视频5.Blender导出gltf(美术与程序员协作)09:50
章节39:案例——物联网粮仓
课时318视频1.2.项目方案选择18:50
课时319视频1.3.学习安排(必看)08:26
课时320视频1.4.公司项目人员方案09:58
课时321视频2.1.Three.js下载特定版本并使用06:40
课时322视频2.2.一个最小Three.js代码14:44
课时323视频2.3.渲染循环06:37
课时324视频2.4.Three.js开发辅助工具09:40
课时325视频2.5.项目部署Canvas画布页面布局相关09:56
课时326视频2.6.Three.js代码模块化13:41
课时327视频3.1.三维软件绘制模型(美术和程序协作)17:36
课时328视频3.2.体验three.js editor编辑器-搭建一个三维场景16:06
课时329视频3.3. GLTF格式模型文件简介 (Web3D领域JPG)11:36
课时330视频3.4.建模软件导出GLTF(blender、3dmax)14:19
课时331视频3.5.加载GLTF格式粮仓基地模型19:33
课时332视频3.6.粮仓贴图颜色偏差问题解决09:15
课时333视频3.7.gltf相关文件glb07:05
课时334视频3.8.gltf文件是否包含光源13:52
课时335视频3.9.相机渲染范围和视角设置15:13
课时336视频3.10.模型导出位置和姿态问题注意08:39
课时337视频3.11.加载gltf模型(透视投影相机)19:41
课时338视频3.12.批量修改GLTF材质11:50
课时339视频3.13.粮仓基地场景雾化效果设置(Fog)11:20
课时340视频4.1.模型命名(程序与美术协作)17:19
课时341视频4.2.粮仓基地模型命名并导出20:34
课时342视频4.3.CSS2DRenderer标注每个粮仓32:31
课时343视频4.4.CSS3DRenderer标注每个粮仓10:19
课时344视频4.5.鼠标交互-射线拾取14:56
课时345视频4.6.射线拾取弹出粮仓HTML信息标签15:53
课时346视频4.7.火焰效果(序列帧动画)13:29
课时347视频4.8.粮仓火焰标注12:39
课时348视频4.9.火焰信息标签07:12
章节40:案例—产品720展示(轿车、手机)试看
课时349视频1.1.课程效果展示01:58可试看
课时350视频1.2.产品Web3D展示方案15:57
课时351视频1.3.学习安排14:01
课时352视频2.1.手机相关几个章节学习指南06:51
课时353视频2.2.绘制产品三维模型—手机10:40
课时354视频2.3.Blender或3dmax导出gltf格式模型09:47
课时355视频2.4.三维软件导出产品模型注意16:20
课时356视频2.5.Blender预览产品PBR材质的模型22:08
课时357视频2.6.Three.js下载R125版本并使用13:22
课时358视频2.7.threejs最小案例—模型和光源31:26
课时359视频2.8.threejs最小案例—相机和渲染器25:18
课时360视频2.9.渲染循环(设置产品旋转预览动画)10:35
课时361视频2.10.产品预览旋转和缩放(相机控件OrbitControls)19:15
课时362视频3.1.three.js加载gltf模型19:24
课时363视频3.2.查询模型节点并设置模型PBR材质贴图17:27
课时364视频3.3.产品展示相机参数设置注意24:25
课时365视频3.4.环境贴图envMap13:05
课时366视频3.5.调试场景光源参数16:03
课时367视频3.6.手机产品旋转动画控制10:13
课时368视频3.7.Canvas画布全屏且跟随窗口变化08:55
课时369视频3.8.three.js代码模块化07:54
课时370视频3.9.gui辅助调节光源强度、位置、受环境光影响程20:13
课时371视频4.1.产品展示缩放和旋转范围约束11:39
课时372视频4.2.一个720辅助显示的圆弧线—圆弧线13:48
课时373视频4.3.一个720辅助显示的圆弧线—720符号09:41
课时374视频4.4.UI按钮暂停手机旋转动画14:32
课时375视频4.5.前端UI按钮切换颜色贴图11:44
课时376视频4.6.练习例子—canvas局部布局UI按钮切换颜色贴图05:21
课时377视频4.7.颜色贴图.map切换动画11:24
课时378视频4.8.产品特定部位标注—光点14:42
课时379视频4.9.产品特定部位标注—半透明叠加问题解决07:10
课时380视频4.10.产品特定部位标注—波动光点08:30
课时381视频4.11.HTML 2D标签标注相机热点17:53
课时382视频4.12.HTML 3D标签标注相机热点10:16
课时383视频4.13.射线拾取标注热点—弹出信息21:44
课时384视频4.14.点击热点弹出HTML信息标签11:40
课时385视频5.1.轿车3D模型基本情况简介12:01
课时386视频5.2.加载车gltf模型1—模型和相机15:41
课时387视频5.3.加载车gltf模型2—材质和贴图09:54
课时388视频5.4.gltf加载颜色空间和颜色失真问题15:05
课时389视频5.5.批量设置Mesh环境贴图04:11
课时390视频5.6.MeshStandardMaterial金属度和粗糙度了解15:52
课时391视频5.7.设置后视镜效果07:18
课时392视频5.8.MeshPhysicalMaterial(车外壳、车玻璃)13:30
课时393视频5.9.代码创建一个地面07:57
课时394视频5.10.代码创建一个隧道09:18
课时395视频5.11.设置雾化效果05:19
课时396视频5.12.约束相机控件的旋转、缩放和平移09:15
课时397视频6.1.车开关门—思路和模型问题10:05
课时398视频6.2.车门开关—热点标注08:11
课时399视频6.3.车门开关—射线拾取,打开或关门车门07:20
课时400视频6.4.tweenjs库设置开关门动画10:43
课时401视频6.5.车门开关—开关门声音05:41
课时402视频6.6.颜色款式选择06:33
课时403视频6.7.颜色变化动画09:40
课时404视频6.8.背景音乐设置03:31
课时405视频6.9.旋转动画开启或关闭03:18
课时406视频10.车前灯开关模拟11:57
章节41:【WebGL教程】1.WebGL快速入门(更新中)
课时407视频1.学前说明06:31
课时408视频2.着色器GLSL ES语言15:15
课时409视频3.第一个WebGL案例(绘制一个点)21:51
课时410视频4.WebGL坐标系10:00
章节42:WebGL入门教程( 学习上个章节新录制的即可 )
课时411视频0.学习WebGL的必要性15:45
课时412视频1.第一个WebGL程序(绘制一个点)22:36
课时413视频2.WebGL绘制一个矩形23:21
课时414视频3.WebGL坐标系(投影)13:06
课时415视频4.WebGL平移变换13:56
课时416视频5.绘制一个立方体(WebGL旋转变换)15:35
课时417视频6.WebGL顶点索引绘制09:59
课时418视频7.varying变量和颜色插值.20:05
课时419视频8.立方体(每个面一种颜色)10:09
课时420视频9.WebGL光照渲染立方体43:18
课时421视频10.立方体旋转动画10:41
课时422视频11.WebGL绘制多个几何体08:34
课时423视频12.纹理贴图18:04
课时424视频13.彩色图转灰度图07:38
课时425视频14.切换着色器程序14:09
课时426视频15.WebGL透明度与α融合06:44
课时427视频16.深度测试与α融合06:46
章节43:【Shader教程】1.threejs Shader基础语法试看
课时428视频1.学前说明04:59可试看
课时429视频2.着色器GLSL ES语言(复习WebGL中内容)15:15
课时430视频3.ShaderMaterial着色器材质33:33
课时431视频4.ShaderMaterial半透明、双面显示06:10
课时432视频5.uniform变量传值09:56
课时433视频6.WebGL渲染管线13:58
课时434视频7.片元屏幕坐标fragCoord.xy11:10
课时435视频8.顶点颜色varying插值计算09:57
课时436视频9.顶点位置插值(实现渐变色)19:02
课时437视频10.颜色贴图map(顶点UV坐标)11:56
课时438视频11.shader模仿点材质效果12:57
课时439视频12.attribute自定义顶点变量08:02
章节44:【shader教程】2. onBeforeCompile修改材质
课时440视频1.threejs各个材质的shader代码11:25
课时441视频2.onBeforeCompile修改材质shader10:43
课时442视频3.修改材质shader(彩色图变灰度图)06:38
课时443视频4.顶点位置插值(设置片元颜色)16:04
课时444视频5.顶点位置插值(设置片元颜色)214:50
课时445视频6.模型扫光效果(顶点位置插值)10:14
课时446视频7.模型扫光效果(颜色渐变)11:08
章节45:案例—大屏3D地图可视化试看
课时447视频1.1.课程完成效果展示08:29可试看
课时448视频1.2.技术选择(SVG、Canvas、WebGL、Three.js)08:27
课时449视频1.3.Three.js引擎简介11:48
课时450视频1.4.学习细节安排06:12
课时451视频2.1.GeoJOSN数据简介和获取10:44
课时452视频2.2.先通过Three.js实现一个基础渲染代码23:19
课时453视频2.3.渲染非全屏(相机和渲染器)06:38
课时454视频2.4.相机渲染范围、位置和目标15:32
课时455视频2.5.渲染循环和相机控件OrbitControls09:21
课时456视频2.6.解析边界线(几何体顶点和Line模型)27:49
课时457视频2.7.Shape几何体填充行政区域14:34
课时458视频2.8.渲染中国地图(相机参数适配)20:23
课时459视频2.9.渲染省份或城市地图轮廓07:17
课时460视频2.10.拉伸行政区轮廓18:08
课时461视频2.11.经纬度转墨卡托坐标10:09
课时462视频3.1.矩形贴图标注位置14:02
课时463视频3.2.热点—波动光圈13:48
课时464视频3.3.热点—旋转棱锥12:10
课时465视频3.4.HTML元素作为标签(世界坐标转屏幕坐标)09:20
课时466视频3.5.HTML元素作为标签(CSS2DRenderer)15:37
课时467视频3.6.HTML元素作为标签(CSS3DRenderer)12:24
课时468视频3.7.鼠标单击拾取选中一个行政区13:22
课时469视频4.1.中国地图颜色深浅可视化16:07
课时470视频4.2.练习-世界各国GDP可视化(区域颜色深浅)09:44
课时471视频4.3.行政区域拉伸不同高度可视化数据08:17
课时472视频4.4.气泡图(不同颜色和大小圆圈)11:03
课时473视频4.5.柱子可视化数据06:59
课时474视频5.1.密集点(微博登录活动)05:08
课时475视频5.2.Line可视化轨迹线(北京公交轨迹)02:39
课时476视频5.3.Line可视化轨迹线(全球高速公路轨迹GeoJSON)05:57
课时477视频5.4.世界人口密度(柱子可视化)18:24
课时478视频5.5.世界人口密度(柱子颜色渐变).13:27
课时479视频5.6.世界人口密度可视化(几何体合并)14:43
课时480视频5.7.柱子可视化(数据特定间距)07:05
课时481视频6.1.轨迹线(样条曲线)13:08
课时482视频6.2.飞线(轨迹线上提取一段作为飞线)07:16
课时483视频6.3.飞线粗细设置(linewidth).06:42
课时484视频6.4.shader实现小蝌蚪状飞线11:04
课时485视频6.5.练习题—飞线综合案例07:03
章节46:案例——大屏3D地球可视化试看
课时486视频1.1.地球大屏数据可视化效果00:41可试看
课时487视频1.1.课程完成案例展示06:00
课时488视频1.2.学习安排06:24
课时489视频2.1.Three.js下载并使用09:27
课时490视频2.2.一个最小Three.js代码11:44
课时491视频2.3.渲染循环、OrbitControls、AxesHelper.10:24
课时492视频2.4.通过纹理贴图渲染一个地球效果10:32
课时493视频3.1.地球经纬度和球面坐标05:22
课时494视频3.2.经纬度坐标转球面坐标推理12:52
课时495视频3.3.解析world.json绘制所有国家边界线10:56
课时496视频3.4.解析world.json绘制所有国家轮廓Mesh05:24
课时497视频3.5.解析world.json程序生成纹理贴图09:54
课时498视频3.6.球面上渲染国家边界线09:34
课时499视频3.7.精灵模型Sprite设置地球光圈07:03
课时500视频3.8.所有国家边界线合并为一个19:41
课时501视频3.9密集点数据可视化09:47
课时502视频3.10.密集点数据可视化—颜色插值明暗变化10:48
课时503视频3.11.轨迹线可视化11:46
课时504视频4.1.矩形平面Mesh标注球面某地14:26
课时505视频4.2.平面Mesh标注新闻热点和机场05:49
课时506视频4.3.光柱效果07:03
课时507视频4.4.地球新闻热点标注光柱09:30
课时508视频4.5.热点波动光圈-标注新闻热点13:47
课时509视频4.6.光柱、光柱底座、波动光圈合成一个06:36
课时510视频4.7.光柱高度、颜色和新闻热度相关07:02
课时511视频4.8.射线拾取新闻热点模型对象11:50
课时512视频5.1.整体思路( 生成每个国家的球面Mesh )09:57
课时513视频5.2.多边形轮廓内生成等间距网格点13:29
课时514视频5.3.三角剖分15:07
课时515视频5.4.三角剖分绘制每个国家球面Mesh07:34
课时516视频5.5.射线拾取国家Mesh,弹出国家名称HTML标签16:06
课时517视频5.6.各个国家GDP可视化(Mesh颜色深浅不同)13:00
课时518视频5.7.地球陆地网格点阵特效11:56
课时519视频6.1.柱子可视化国家GDP17:32
课时520视频6.2.世界人口密度可视化-柱子姿态13:36
课时521视频6.3.世界人口密度—渲染所有柱子14:06
课时522视频6.4.世界人口密度层次感—顶点颜色12:10
课时523视频7.1.球面上两点轨迹线绘制思路07:00
课时524视频7.2.轨迹线实现方式—贝赛尔曲线20:22
课时525视频7.3.圆弧线ArcCurve介绍(绘制一条圆弧轨迹线)09:54
课时526视频7.4.平面上三点确定一条圆弧16:03
课时527视频7.5.3D空间中三点确定一条圆弧飞线轨迹13:24
课时528视频7.6.解析经纬度坐标数据绘制轨迹线03:46
课时529视频7.7.轨迹线上提取一段作为飞线08:13
课时530视频7.8.shader实现小蝌蚪状飞线12:43
课时531视频7.9.圆弧轨迹-使用圆弧绘制绘制飞线07:27
课时532视频7.10.练习—解析数据绘制地球飞线效果10:09
课时533视频7.11.飞线起始点标注和波动光圈04:48
课时534视频7.12.棱锥标注飞线起点10:14
章节47:入门到精通(本章节当做手册查询功能使用即可)
课时535视频1.1 第一个3D(本章节已升级为2023版本,发布在前面,选修即可)21:15
课时536视频1.2 旋转动画、requestAnimationFrame周期性渲染17:17
课时537视频1.3 鼠标操作三维场景旋转缩放10:57
课时538视频1.4 场景插入新的几何体21:14
课时539视频1.5 设置材质效果06:50
课时540视频1.6 光照效果设置07:24
课时541视频2.1.顶点位置数据解析渲染12:16
课时542视频2.2.顶点颜色数据插值计算09:05
课时543视频2.3.顶点法向量数据光照计算11:21
课时544视频2.4.顶点索引复用顶点数据09:29
课时545视频2.5.设置Geometry顶点位置和颜色数据( 新版本已舍弃Geometry )09:58
课时546视频2.6.Face3对象定义Geometry的三角面( 新版本已舍弃Geometry )12:02
课时547视频2.7.访问几何体对象的数据( 新版本已舍弃Geometry )14:57
课时548视频3.1.常用材质介绍15:55
课时549视频3.2.材质共有属性、私有属性17:30
课时550视频4.1.点、线、网格模型介绍12:45
课时551视频4.2.模型对象旋转平移缩放变换11:21
课时552视频4.3.模型对象克隆clone复制copy15:05
课时553视频5.1.光照原理和常见光源类型20:57
课时554视频5.2.阴影投影计算16:22
课时555视频5.3.基类Light和Object3D05:15
课时556视频6.1.组对象Group、层级模型15:33
课时557视频6.2.对象节点命名、查找、遍历15:04
课时558视频6.3.本地位置坐标、世界位置坐标08:31
课时559视频7.1.常见几何体和曲线API介绍14:09
课时560视频7.2.圆弧线绘制(直线、椭圆、圆弧)、基类Curve17:10
课时561视频7.3.样条曲线、贝赛尔曲线11:14
课时562视频7.4.多个线条组合曲线CurvePath06:00
课时563视频7.5.曲线路径管道成型TubeGeometry07:17
课时564视频7.6.旋转成型LatheGeometry04:36
课时565视频7.7.Shape对象和轮廓填充ShapeGeometry16:29
课时566视频7.8.拉伸扫描成型ExtrudeGeometry10:55
课时567视频8.1.创建纹理贴图14:36
课时568视频8.2.UV映射原理(顶点纹理坐标)23:02
课时569视频8.3.数组材质、材质索引materialIndex15:38
课时570视频8.4.纹理对象Texture(阵列、偏移、旋转…)18:33
课时571视频8.5.canvas画布、视频作为纹理贴图11:03
课时572视频8.6.凹凸贴图、法线贴图(压缩模型)19:38
课时573视频8.7.光照贴图添加阴影08:02
课时574视频8.8.高光贴图.07:42
课时575视频8.9.环境贴图06:31
课时576视频8.10.数据纹理对象DataTexture11:30
课时577视频9.1.正投影和透视投影相机27:49
课时578视频9.2.窗口变化自适应渲染10:27
课时579视频10.1.精灵模型对象Sprite.16:06
课时580视频10.2.中国城市PM2.5可视化案例12:15
课时581视频10.3.树林效果07:17
课时582视频10.4.下雨场景效果模拟10:42
课时583视频11.1.编辑关键帧并解析播放14:24
课时584视频11.2.解析外部模型的的帧动画09:33
课时585视频11.3.播放设置(暂停、时间段、时间点)10:08
课时586视频12.1.骨骼动画原理30:28
课时587视频12.2.加载外部模型骨骼动画13:07
课时588视频12.3.变形目标动画原理14:04
课时589视频12.4.解析外部模型变形目标数据.avi11:43
课时590视频13.1.音频与场景关联(音源、监听者)10:57
课时591视频13.2.音乐可视化.07:13
课时592视频14.1.Three.js数据结构、导入导出.25:14
课时593视频14.2.加载stl文件并解析10:22
课时594视频14.3.加载obj文件(几何体、材质、贴图16:17
课时595视频14.4.加载FBX并解析骨骼动画07:13
课时596视频14.5.手镯在线预览(商品展示)13:04
课时597视频14.6.心脏预览(法线、高光、环境贴图).17:23
课时598视频15.1.场景渲染结果网页局部显示10:45
课时599视频16.1.向量29:15
课时600视频16.2.矩阵16:07
课时601视频16.3.旋转、平移和缩放矩阵17:14
课时602视频16.4.投影矩阵、视图矩阵14:42
课时603视频16.5.包围盒Box3、Box2、Sphere17:33
课时604视频16.6.欧拉Euler和四元数Quaternion15:45
课时605视频16.7.几何计算Line3、Triangle、Ray、Plane17:34
课时606视频17.1.场景、相机和渲染器(17章学习前提:熟悉webgl和threejs)22:07
课时607视频17.2.WebGL渲染器简介17:44
课时608视频17.3.renderers目录下渲染器相关代码块介绍25:54
课时609视频17.4.顶点数据封装19:13
课时610视频17.5.解析几何体提取顶点数据33:53
课时611视频17.6.层级模型封装和解析16:31
课时612视频17.7.本地矩阵和世界矩阵18:45
课时613视频17.8.对象具体分类过程21:24
课时614视频17.9.点线网格模型和绘制模式11:52
课时615视频17.10.光源对象分类18:26
课时616视频17.11.Material对应的Shader20:30
课时617视频17.12.处理shader代码21:18
课时618视频17.13.着色器字符串处理—材质属性、光源数量10:38
课时619视频17.14.火狐查看Three.js合成的着色器shader04:33
课时620视频17.15.传值-attribute16:18
课时621视频17.16.uniform变量传值25:56
课时622视频17.17.着色器材质对象ShaderMaterial09:22
课时623视频18.1.第一个three.js着色器程序14:51
课时624视频18.2.着色器—矩阵变换19:06
课时625视频18.3.着色器——Uniform12:18
课时626视频18.4.着色器——光照计算11:53
课时627视频18.5.着色器——颜色插值计算07:54
课时628视频18.6.着色器——纹理贴图08:50
课时629视频18.7.着色器——彩色图处理为灰度图.05:30
课时630视频18.8.着色器——UV动画11:42
课时631视频18.9.着色器——着色器模块.glsl调用17:17
课时632视频18.10.着色器——系统uniforms模块调用UniformsLib15:58
课时633视频18.11.着色器——模仿系统的材质对象11:05
课时634视频18.12.着色器——自动提取光源对象信息13:47
课时635视频18.13.着色器——phong网格材质二次开发08:30
课时636视频18.14.WebGLRenderTarget(离屏渲染)15:39
课时637视频18.15.WebGLRenderTarget实现灰度图后处理功能08:27
课时638视频16.后处理EffectComposer—自定义着色器18:30
课时639视频18.17.后处理EffectComposer——直接调用常见通道09:03
课时640视频19.1.模型标注(热点)——平面网格模型Mesh14:49
课时641视频19.2.模型标签——精灵模型对象Sprite05:38
课时642视频19.3.模型的标签——HTML元素15:50
课时643视频19.4.HTML元素标签位置更新09:49
课时644视频19.5.模型标签—HTML、CSS实现一个好看的UI效果08:28
课时645视频19.6.模型标签——Canvas技术与threejs结合11:33
课时646视频19.7.Canvas作为精灵或网格模型标签的贴图09:09
课时647视频19.8.CSS2DRenderer—HTML元素标签15:12
课时648视频19.9.CSS3DRenderer15:35
课时649视频19.10.标签坐标问题—局部、世界坐标09:27
课时650视频19.11.标签坐标问题—几何体顶点坐标14:24
课时651视频19.12.标签坐标问题—加载外部模型标注案例10:19
课时652视频19.13.标签坐标问题—几何体偏移06:06
课时653视频19.14.射线投射器Raycaster和射线Ray介绍07:22
课时654视频19.15.射线Raycaster—鼠标点击选中拾取网格模型08:43
课时655视频19.16.点Points线Line精灵Sprite—拾取07:43
课时656视频19.17.射线碰撞检测相关12:22
课时657视频19.18.射线拾取、模型标签坐标变换—局部渲染07:02
课时658视频20.1.全屏和局部区域渲染09:43
课时659视频20.2.Threejs画布自适应窗口尺寸变化(窗口事件)12:43
课时660视频20.3.Three.js背景(图片作为背景或设置颜色)05:13
课时661视频20.4.Three.js背景透明度(模型悬浮在网页上)06:41
课时662视频20.5.WebGL渲染器锯齿问题.08:09
课时663视频20.6.帧缓冲区(颜色、深度、模板)18:28
课时664视频20.7.材质控制渲染管线(深度测试)11:57
课时665视频20.8.Three.js渲染视口.setViewport()09:59
课时666视频20.9.渲染管线剪裁测试( 剪裁方法`.setScissor()`13:25
课时667视频20.10.渲染管线—模板测试23:50
课时668视频20.11.剪裁剖切模型(.clippingPlanes属性)09:11
课时669视频20.12.添加剖切面封口(模板测试)14:42
课时670视频20.13.Three.js渲染结果保存为图片07:31
课时671视频20.14.Three.js渲染更新总结14:22
课时672视频20.15.模型闪烁解释( 两个平面重合或非常接近 )07:12
课时673视频20.16.透视投影相机导致的模型闪烁Z-fighting05:27
课时674视频20.17.渲染顺序(.sortObjects和.renderOrder)12:22
课时675视频20.18.多个二维图叠加渲染(禁止深度测试解决深度冲05:11
课时676视频20.19.一个模型总渲染在前面(排序和深度测试)04:55
课时677视频20.20.透明和不透明three.js默认渲染顺序08:31
课时678视频20.21.透明模型嵌套(透明模型渲染排序)07:44
课时679视频21.1.相机动画( .position 和 .lookAt() )11:23
课时680视频21.2.相机不同方向的投影视图06:12
课时681视频21.3.旋转canvas画布渲染结果( .up 相机上方向)05:25
课时682视频21.4.相机漫游视线和轨迹相切( 沿已知坐标的轨迹 ).11:49
课时683视频21.5.练习小案例—管道漫游15:26
课时684视频21.6.获得相机当前视线方向,并沿着视线移动05:55
课时685视频21.7.OrbitControls.js相机控件08:14
课时686视频21.8.浏览器控制台辅助选择相机视角(OrbitControls·06:16
课时687视频21.9.同步两个相机的位置视线等信息07:08
课时688视频21.10.地图导航控件MapControls04:38
课时689视频21.11.鼠标单击目的地,相机飞行漫游09:07
课时690视频21.12.相机控件与.lookAt()无效( .target属性 )11:01
课时691视频21.13.模型无法渲染或渲染不完整( 相机参数不匹配17:26
课时692视频21.14.包围盒功能辅助你合理设置相机参数15:13
课时693视频21.15.正投影相机自适应居中和全屏渲染模型13:35
课时694视频21.16.透视投影相机自适应居中和全屏模型渲染14:08
课时695视频21.17.判断mesh是否位于相机视锥体Frustum内09:29
课时696视频22.1.渲染Mesh三角形边线和顶点04:53
课时697视频22.2.渲染模型边界线EdgesGeometry07:58
课时698视频22.3.几何边线和半透明渲染模型05:20
课时699视频22.4.模型隐藏( .visible )05:05
课时700视频22.5.雾化效果(Fog)07:02
课时701视频22.6.练习小案例—简约地面效果11:08
课时702视频22.7.线宽lineWidth无效( 扩展库解决线宽 )07:10
课时703视频22.8.模型高亮发光描边(后期处理OutlinePass)09:15
课时704视频23.1.PBR材质简介12:44
课时705视频23.2.PBR材质渲染金属质感例子13:29
课时706视频23.3.PBR材质环境贴图(金属效果例子)12:16
课时707视频23.4.解析外部PBR模型(金属度和粗糙度贴图)08:22
课时708视频23.5.alphaMap透明度贴图05:02
课时709视频24.1.序列帧动画(多张图)08:25
课时710视频24.2.序列帧动画(单张图,UV坐标).12:42
课时711视频24.3.矩形Mesh加背景透明png贴图(场景标注)06:35
课时712视频24.4.光柱效果06:18
课时713视频24.5.球体Mesh渲染全景图04:59
课时714视频24.6.渲染全景图(矩形Mesh拼接立方体空间)09:37
课时715视频24.7.一个贴图加载完再加载另一个(Promise和async)09:07
课时716视频24.8.优先加载视锥体内Mesh的全景贴图07:42
课时717视频24.9.矩形图片剪裁为圆形渲染(CircleGeometry).05:59
课时718视频25.1.position控制片元06:08
课时719视频25.2.纹理贴图像素值混合叠加03:55
课时720视频25.3.随着高度透明度渐变(onBeforeCompile二次开发16:54
课时721视频25.4.onBeforeCompile修改Phong着色器代码(灰度图)08:45
课时722视频25.5.PointsMaterial方点变圆点06:22
课时723视频25.6.练习小案例—波浪特效123:43
课时724视频25.7.练习小案例—波浪特效2(圆点渲染)11:06
课时725视频25.8.练习小案例-波浪特效3(波峰波谷点大小不同)13:41
课时726视频26.1.绘制三角函数曲线和波动动画13:10
课时727视频26.2.BufferGeometory构建一个加号06:32
课时728视频26.3.ShapeGeometry填充加号轮廓05:14
课时729视频26.4.样条曲线绘制心形轮廓05:56
课时730视频26.5.几何体表面积计算10:46
课时731视频26.6.多个几何体合并为一个BufferGeometryUtils06:45
课时732视频26.7.山脉地形高度可视化(顶点颜色插值)11:33
课时733视频26.8.一段曲线颜色渐变12:23
课时734视频26.9.一段曲线逐渐绘制出来(.setDrawRange)08:05
课时735视频26.10.细线飞线和飞线轨迹11:57
课时736视频26.11.粗线飞线.08:15
课时737视频26.12.粗头细尾飞线(自定义着色器)12:45
课时738视频26.13.轨迹线生成带状平面Mesh15:38
课时739视频26.14.getSpacedPoints和getPoints曲线上取点区别09:46
课时740视频26.15.轨迹线生成带状平面Mesh(CurvePath直线不细·07:51
课时741视频26.16.直线拐角自动圆角化(贝赛尔曲线转弯).13:53
课时742视频26.17.直线拐角自动圆角化(圆弧转弯)20:15
课时743视频26.18.光点或小球沿着任意轨迹线运动04:49
课时744视频26.19.练习小案例—纯代码模拟树和小树林12:50
课时745视频27.1.三维模型、美术、分工15:56
课时746视频27.2.三维模型导出格式问题14:43
课时747视频27.3.three.js编辑器editor简介16:35
课时748视频27.4.three.js editor设置材质和贴图11:45
课时749视频27.5. GLTF格式简介 (Web3D领域JPG)13:22
课时750视频27.6.加载GLTF格式文件11:06
课时751视频27.7.相机渲染范围和外部模型尺寸匹配(美术与程序)25:41
课时752视频27.8.美术是否居中导出模型问题09:08
课时753视频27.9.模型导出角度和姿态调整问题(美术导出注意)09:04
课时754视频27.10.导出gltf格式是否包含光源对象14:25
课时755视频27.11.解析层级模型批量设置材质颜色、环境贴图等12:30
课时756视频27.12.加载gltf包含外部贴图.bin等文件08:10
课时757视频27.13.程序与美术协作(模型命名)18:13
课时758视频27.14.获取模型加载进度设置进度条08:46
课时759视频27.15.解析外部模型骨骼关键帧动画(GLTF)07:10
课时760视频27.16.模型压缩(gltf-pipeline、Draco)08:07
课时761视频27.17.包围盒计算模型位置(平移模型居中)09:44
课时762视频28.1.查看渲染性能(stats.js计算渲染帧率FPS)09:06
课时763视频28.2.资源占用和性能瓶颈(CPU、内存、GPU、显存)16:33
课时764视频28.3.控制redner执行减少GPU资源占用10:08
课时765视频28.4.remove()移除场景不需要的对象05:29
课时766视频28.5.浏览器控制台查看geometry内存占用07:16
课时767视频28.6.three.js对象CPU内存占用释放06:52
课时768视频28.7.GPU内存释放.dispose()10:37
课时769视频28.8.几何体和材质尽量共享06:12
课时770视频28.9.几何体合并06:56
课时771视频28.10.尽量选择BufferGeometry06:37
课时772视频28.11.多细节层次模型Lod09:45
课时773视频29.1.动画库tweenjs简介和引入项目06:27
课时774视频29.2.第一个threejs和tweenjs结合案例10:29
课时775视频29.3.多段tween动画串联起来.chain()07:47
课时776视频29.4.批量创建tween动画片段并串联05:02
课时777视频29.5.tween开始、暂停、继续、延迟、重复05:38
课时778视频29.6.动画不同阶段回调函数(开始、执行中、完成)05:34
课时779视频29.7.一段tween完成后多个tween同步执行03:54
课时780视频29.8.缓动算法.easing()09:46
课时781视频29.9.模型颜色渐变动画.04:18
课时782视频29.10.模型或标签淡入淡出05:55
课时783视频29.11.相机运动动画02:59
课时784视频30.1.Web3D项目实战开发(three.js与web前端结合)05:43
课时785视频30.2.threejs与前端框架结合(Vue、react、angular)08:41
课时786视频30.3.vue-cli4项目文件引入three.js10:20
课时787视频30.4.CSS z-index层叠问题04:38
课时788视频30.5.vue前端UI与3D场景交互—改变颜色04:22
课时789视频30.6.vue创建threejs HTML标签组件07:55
课时790视频30.7.加载gltf模型文件04:02
章节48:案例—智慧城市试看
课时791视频1.1智慧城市案例01:46可试看
课时792视频1.2.技术方向和方案问题(选看)11:48可试看
课时793视频1.3.学习安排(必看)06:43
课时794视频2.1.开发环境和threejs基本代码06:55
课时795视频2.2.城市3D场景构建思路和数据问题10:41
课时796视频2.3.加载blender导出的城市gltf模型11:35
课时797视频2.4.访问加载场景的某些或某个模型设置材质08:20
课时798视频2.5.ShapeGeometry解析城市几何数据14:52
课时799视频2.6.ShapeGeometry批量渲染建筑物平面图05:53
课时800视频2.7.经纬度转墨卡托坐标11:08
课时801视频2.8.ExtrudeGeometry批量渲染建筑物11:06
课时802视频2.9.代码生成的模型导出gltf格式06:19
课时803视频3.1.根据多边形轮廓坐标构建围墙geometry09:47
课时804视频3.2.围墙透明度渐变发光shader-自定义高度相关09:29
课时805视频3.3.围墙透明度渐变发光shader – 使用position控08:16
课时806视频3.4.围墙geometry UV坐标生成06:24
课时807视频3.5.围墙流动效果—texture动画05:54
课时808视频3.6.围墙水平方向流光06:09
课时809视频3.7.外部模型或threejs自带几何体流光效果04:28
课时810视频3.8.自定义ShapeGeometry的UV坐标,设置水面纹理09:45
课时811视频4.1.建筑随着高度颜色渐变shader10:00
课时812视频4.2.建筑物雾化效果09:04
课时813视频4.3.点阵模拟地面06:29
课时814视频4.4.模型线框05:14
课时815视频4.5.建筑场景扫描光带shader14:26
课时816视频4.6.建筑场景扫描光环shader06:10
课时817视频5.1.城市场景插入飞行的无人机14:14
课时818视频5.2.线模型绘制轨迹线04:04
课时819视频6.1.地面波动光圈06:05
课时820视频6.2.旋转棱锥06:19
课时821视频6.3.棱锥透明度渐变05:34
课时822视频6.4.圆柱透明渐变波动效果06:52
课时823视频6..5.透明度径向渐变球shader11:00
课时824视频6.6.扫描雷达效果04:57
课时825视频6.7.信号波动画05:57
课时826视频6.8.HTML标签标注无人机和建筑物11:12
课时827视频6.9.火焰序列帧动画05:06
课时828视频6.10.信号飞线shader09:24
课时829视频6.11.地铁公路流线shader05:00
课时830视频7.1.渲染帧率测试09:14
课时831视频7.2.几何体合并07:08
课时832视频7.3.draco压缩模型06:29
课时833视频8.1.与前端结合工程化开发14:11
课时834视频9.1.城市3D场景和大屏可视化图表结合11:52
章节49:【WebGPU教程】1.WebGPU快速入门
课时835视频1.WebGPU学习开发环境配置04:41
课时836视频2.WebGPU API和Canvas画布14:36
课时837视频3.创建顶点缓冲区、渲染管线25:29
课时838视频4.着色器语言WGSL快速了解17:53
课时839视频5.顶点着色器31:17
课时840视频6.片元着色器、图元装配19:31
课时841视频7.渲染命令(至此完成第一个案例)25:40
课时842视频8.WebGPU 3D坐标系(投影)10:03
课时843视频9.三角形拼接矩形07:18
章节50:【WebGPU教程】2. 3D几何变换数学基础
课时844视频1.数学基础(平移、旋转、缩放矩阵)15:13
课时845视频2.模型矩阵14:27
课时846视频3.gl-matrix数学计算库19:31
课时847视频4.顶点着色器矩阵变换20:10
课时848视频5.传递uniform数据.25:34
课时849视频6.gl-matrix生成顶点着色器的矩阵12:26
课时850视频7.WebGPU动画(uniform旋转矩阵)12:36
课时851视频8.绕y轴旋转动画10:04
课时852视频9.片元的屏幕坐标19:31
课时853视频10.片元深度值、深度缓冲区10:35
课时854视频11.WebGPU顶点数据插值计算17:26
课时855视频12.练习—顶点位置插值14:49
课时856视频13.顶点颜色渐变插值17:56
课时857视频14.顶点位置、颜色数据共享缓冲区13:23
课时858视频15.练习-顶点颜色04:23
课时859视频16.结构体作为WGLSL函数参数
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。