学IT吧 精品IT资源库

 找回密码
 立即注册
查看: 653|回复: 0

[web前端] 622 WebGL+Three.js 入门与实战,系统学习 Web3D 技术

[复制链接]

1596

主题

1596

帖子

6417

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6417
发表于 2022-12-10 22:29:51 | 显示全部楼层 |阅读模式
webgl.png

课程介绍:
随着元宇宙、数字孪生的火热,前端3D可视化需求越来越广泛,懂 WebGL 技术的前端人才也成为行业香饽饽,薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容,并结合图形学相关的数学知识,带你从0基础入门,体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市,让你顺利将 WebGL 和 Three.js 技术落地,掌握其实际应用。

课程目录:
第1章 课程开篇  试看 2 节 | 12分钟
本章中,将介绍本门课的相关信息,包括知识概览、项目效果、所需知识、课程知识点整理等。

收起列表
视频:
1-1 课程导学 (08:25)
试看
视频:
1-2 课程简介 (03:11)
第2章 WebGL 简单应用:学习 WebGL 简单使用,建立 WebGL 认知 8 节 | 117分钟
WebGL 简单应用,学习WebGL 简单使用,建立 WebGL 认知,具体内容包括:WebGL 基础结构、绘制一个点、WebGL 坐标系统、通过变量绘制一个点、vertexAttrib3f() 同族兄弟等。

收起列表
视频:
2-1 canvas 和 webgl 的区别 (04:27)
视频:
2-2 认识 webgl,了解 webgl (16:56)
视频:
2-3 webgl 入门 - 给画布换个颜色 (10:03)
视频:
2-4 绘制一个点 (26:56)
视频:
2-5 介绍 webgl 三维坐标系 (11:49)
视频:
2-6 学习使用 attribute 变量-绘制一个水平移动的点 (15:46)
视频:
2-7 通过鼠标控制绘制 (16:36)
视频:
2-8 使用 uniform 变量 - 绘制不同颜色的点 (14:14)
第3章 WebGL 多图形绘制和动画 10 节 | 89分钟
本章节学习多图形、多缓冲区使用,学习如何实现动画,学习使用矩阵操来操作动画。

收起列表
视频:
3-1 使用缓冲区对象 - 绘制多个点 (15:39)
视频:
3-2 多缓冲区和数据偏移 (09:01)
视频:
3-3 实现多种图形绘制 (08:42)
视频:
3-4 图形平移 - 着色器 (04:32)
视频:
3-5 图形缩放 - 着色器 (02:00)
视频:
3-6 图形旋转 - 着色器 (05:28)
视频:
3-7 图形平移 - 平移矩阵 (13:23)
视频:
3-8 图形缩放 - 缩放矩阵 (06:43)
视频:
3-9 图形旋转 - 旋转矩阵 (09:56)
视频:
3-10 图形复合变换 - 矩阵组合 (12:42)
第4章 WebGL 颜色和纹理 4 节 | 44分钟
本章节,学习在WebGL 中修改图形颜色,学会使用图片进行贴图操作和使用多重纹理。

收起列表
视频:
4-1 使用 varying 变量 - 绘制彩色三角形 (05:45)
视频:
4-2 从顶点到图形 – webgl 渲染流程介绍 (03:58)
视频:
4-3 给图形添加背景图 (24:15)
视频:
4-4 使用多重纹理 (09:05)
第5章 WebGL原理学习:OpenGL ES 语言 7 节 | 27分钟
WebGL原理学习:OpenGL ES 语言自定义着色器的必备知识点,学习基础语法和简单使用。

收起列表
视频:
5-1 OpenGL ES 语言基础 (07:24)
视频:
5-2 矢量和矩阵 (03:29)
视频:
5-3 纹理取样器 (03:03)
视频:
5-4 分支和循环 (02:26)
视频:
5-5 函数 (02:24)
视频:
5-6 内置函数介绍 (02:48)
视频:
5-7 存储限定词 (04:47)
第6章 WebGL 三维世界 5 节 | 70分钟
如何定义一个三维场景,如何将物体渲染到三维场景中,学会使用顶点法和索引法绘制立方体。

收起列表
视频:
6-1 3D 基础 (17:19)
视频:
6-2 正射投影 (10:20)
视频:
6-3 透视投影 (17:17)
视频:
6-4 立方体绘制(顶点法) (11:59)
视频:
6-5 立方体绘制(索引法) (12:57)
第7章 webgl 光照
没有光照的场景是不真实的,本章主要讲述光照的具体使用。

第8章 WebGL 进阶操作
在 WebGL 中如何选中物体?能不能实现圆角的物体?能不能设置透明度?本章会告诉你答案。

第9章 【Threejs 基础】简单实现一些阴影、雾化的效果
介绍 Threejs 基础使用和基本结构,简单实现一些阴影、雾化的效果~~

第10章 【Threejs 组件】每个组件都有其独特的使用方法,可以做特定的设置
threejs 中,每个组件都有其独特的使用方法,可以做特定的设置,通过不同的相机也可以模拟不同的效果。

第11章 【Threejs 光源】相信光,能照亮场景的每个角落,一个不够?再来几个吧。
本章讲解,【光源基础】分类和属性、【聚光灯】 SpotLight、【环境光】 AmbientLight、【点光源】 PointLight、【太阳光】 Directinallight、 【半球光】 HemisphereLight~~

第12章 【threejs 材质】不同的材质能呈现出不同的效果,合适最重要
本章讲解 MeshBasicMaterial、 MeshDepthMaterial、MeshNormalMaterial、MeshFaceMaterial、 MeshLambertMaterial、MeshPhongMaterial、ShaderMaterial、直线和虚线~~

第13章 【Threejs 几何体】还在为物体坐标烦恼吗?内置几何体来了
本章讲解分类和属性、平面、圆、自定义二维图形、立方体、球体、圆柱体、圆环、纽结、多面体、文字~~

第14章 【Threejs 动画和相机】不同的角度看到的景色是不一样的,从多角度来观察吧
本章讲解,简单动画、使用 Tween 实现动画、点击选取对象~~

第15章 【Threejs 纹理】场景不再单一,丰富多了
本章讲解基础纹理、凹凸贴图、法向贴图、环境贴图、canvas 贴图~~

第16章 【Threejs 粒子】舞动的精灵,你值得拥有
本章讲解粒子、粒子系统、创建水波效果、粒子组合成立方体等~~

第17章 【智慧城市实战】基础内容怎么样了?来实战一下吧
本章讲解blender基础使用,创建场景,加载 fbx 文件,以及各种特效:特效:透明墙、地面扩散、发光扩散半球、发光旋转四棱锥、飞点、道路运动等~~
购买主题 本主题需向作者支付 30 学币 才能浏览
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|学IT吧

GMT+8, 2024-12-25 21:15 , Processed in 0.087432 second(s), 23 queries .

学IT吧 www.xueit8.com X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表