3D网页开发
Three.js and TypeScrip
👩💻推荐:Three.js 和 TypeScript相结合的开发
Three.js是一个JavaScript库,可以构建3D图形和动画,而TypeScript是一种强类型的JavaScript超集。
这两个工具结合使用可以提高代码的可读性和维护性,使得3D图形开发更加高效。
课程内容
你将会学到的 😎✅
- 通过许多演示和示例代码学习 Threejs 的基础知识 🎓💡
- 使用 VSCode、Git 和 NodeJS 设置开发环境 🛠️💻🌐
- 安装 TypeScript 📥🚀
- 使用 NPM 和 package json 创建 Threejs 项目 📦🌟🆕
- 了解 Webpack、NodeJS、Express 以及为浏览器客户端提供 ES6 模块。🤓📚
- 创建(或可选地安装)Threejs TypeScript 样板以在整个课程中使用 🎨👨🎨📝
- 了解 Threejs 场景、相机和渲染器 🌆📷🖌️
- 了解动画循环 🔄🎥
- 了解 Stats 和 Dat GUI 面板 📊🎛️
- 了解 Object3D 基类,以及 Rotation、Position、Scale、Visibility 和 Matrix 属性 💪📐🌟
- 了解几何形状,例如 Box、Sphere、Icosahedron、Plane、TorusKnot 等 🔳🔴🔵🟡
- 了解 Basic、Normal、Lambert、Phong、Standard、Physical、Matcap 和其他材料 🎨🖌️📐
- 了解 SpecularMap、RoughnessMap 和 MetalnessMap 的突出显示选项 🌟🔍👀
- 了解凹凸贴图和置换贴图 🌄🖼️🌟
- 了解如何使用材质选项修改纹理和置换贴图 UV。🧐🔍👍
- 了解使用环境光、定向光、半球光、点光源和聚光灯的照明。💡💡💡
- Mipmap、自定义 Mipmap 和各向异性过滤 🎉🔊👍
- 了解使用 Perspective 和 Orthographic 阴影相机的阴影。📷🌕☀️
- 了解 Orbit、Trackball 和 Pointerlock 鼠标和触摸交互控件 🐭👌👍
- 了解模型加载器,例如 OBJ、MTL、GLTF、DRACO 等 🚛📦🚚
- 导入第三方 FBX 和 glTF/glB 动画 🎬📽️📀
- 创建自定义动画并从 Blender 导出为 glTF/glB 🎞️🎨🔥
- 使用 Raycaster 以及如何使用它在场景中拾取 3D 对象,👀🕵️♂️🌟
#Threejs #WebGL #开发 #前端开发