Threejs及TypeScript教程

最新推荐文章于 2024-06-25 09:40:49 发布
最新推荐文章于 2024-06-25 09:40:49 发布
阅读量638 收藏 2
点赞数
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duoshehuan6005/article/details/126732306
版权

Threejs及TypeScript教程

学习 Threejs、TypeScript 和 NodeJS 在网络上创建交互式 3D 内容

课程英文名：Three.js and TypeScrip

此视频教程共6.0小时，中英双语字幕，画质清晰无水印，源码附件全

下载地址

百度网盘地址：https://pan.baidu.com/s/11fq7xpyK2GWhU4P3M1FryQ?pwd=5f0c

课程内容

你将会学到的

  • 通过许多演示和示例代码学习 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 对象，

  • Cannonjs 物理

  • Cannonjs 调试渲染器

  • 了解用于碰撞检测的凸多面体与复合形状

  • 配置、部署和启动我们的 Threejs 项目到生产服务器

  • 安装 Nginx 代理，指向一个域名并安装 SSL

  • 将模块说明符与 Webpack 与相对导入引用一起使用

  • 还有更多非常有用的 Threejs 示例

课程内容

1 个章节 - 78 个讲座 - 总时长 9 小时 22 分钟

介绍78 个讲座 - 9 小时 23 分钟

要求

  • 一台可以安装 VSCode、Git 和 NodeJS 的计算机

  • 渴望在 Threejs 和 TypeScript 中编写 3D Web 应用程序

说明

欢迎来到我的 Three.js 和 Typescript 课程。

在本课程中，我们将学习有关 Three.js 的所有知识，用 TypeScript 编写它，并使用 Webpack 和 NodeJS 编写 HTML 客户端和服务器组件。

该课程分为5个主要部分，

  1. 设置开发环境并安装 TypeScript

  2. 创建 Three.js 样板项目。这部分是可选的，你可以在第 3 部分中安装一个预先构建的样板，但是从头开始手动构建它将使你对从头开始创建一个新的 Three.js 项目所涉及的方面有一个很好的理解。

  3. 安装 Threejs Course Boilerplate，以防你在第 2 部分中没有手动创建它。

  4. 了解 Three.js 的所有方面，从核心到在更高级的示例中使用它并涉及其他第三方库。

  5. 部署到生产。我们将研究你在 Internet 上公开托管 Threejs 项目的几种不同选择。

随附文档中提供了所有代码，以便你可以轻松复制和粘贴，以防你不想暂停视频并从屏幕复制。文档链接位于每个视频旁边的资源中。

TypeScript 在我们的代码中引入了类型安全，使其更加健壮，并为 IDE 提供了额外的工具，例如智能，我们可以使用这些工具来帮助我们更准确、更快地找到和理解可用的 Threejs 属性和方法以及代码。

感谢你参加我的课程，我们会在那里见到你。

肖恩

此课程面向哪些人：

  • 有兴趣学习 Threejs 的人

  • 有兴趣学习 TypeScript 的人

  • 有兴趣在网络上创建交互式 3D 应用程序、游戏或可视化的用户

  • 想要充分了解 Threejs、TypeScript 和 NodeJS 以使其有用的人

     

学术Fun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs-typescript：具有TypeScript和webpack的three.js项目的入门模板。 支持npm软件包
02-25
具有TypeScript模板的Three.js 该项目包含用于Three.js应用程序并带有类型检查的样板代码。 webpack用于编译和捆绑所有代码，包括导入的npm软件包。 运行项目 yarn install以下载所需的软件包 yarn dev监视文件并启动实时服务器 在GitHub Pages上部署 yarn build以创建构建文件 ./deploy.sh运行部署脚本 在GitHub存储库设置中，将GitHub Pages指向上一步中指定的分支
threeify：一个基于three.js的Typescript 3D库
01-28
三化 一个基于three.js的Typescript库 threeify是一个基于three.js的Typescript 3D库。 功能概述： 现代：打字稿，可摇树，小型构建文件 渲染：WebGL 1，WebGL 2（即将推出）和WebGPU（即将推出） 材料：基于物理的材料 后期效果：DOF（即将推出），运动模糊（（即将推出）），SOA（即将推出），TRAA（即将推出） 动画：剪辑（即将推出），混音器（即将推出） 资产：glTF（即将推出），Draco（即将推出）和Basis（即将推出） XR：通过WebXR增强现实和虚拟现实（即将推出） 记录（TSDocs）和测试（笑话） 警告 正在开发中，尚未准备使用任何种类 该库目前处于测试阶段，并且正在进行重大开发。 它甚至可能无法正确编译。 你被警告了。 安装和导入 Threeify及其模块在npm上发布，并具有完全键入支持。 要安装，请使用： npm install threeify --save 要么 yarn add threeify 这将使您可以完全使用以下方式导入Threeify： import * as
typescript结合three.js
weixin_30565199的博客
04-04 563
import * as THREE from "three"; // https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts class Game { private _scene: THREE.Scene; //private _canvas: HTMLCanvasE...
探索未来视觉艺术与编程的交融 —— Three.js Vite 模板与 TypeScript 的完美结合
最新发布
gitblog_00091的博客
06-25 355
???? 探索未来视觉艺术与编程的交融 —— Three.js Vite 模板与 TypeScript 的完美结合 项目地址:https://gitcode.com/pachoclo/vite-threejs-ts-template 在数字世界的广阔天地中，Three.js 已经成为构建交互式3D图形和动画应用的强大工具箱。而当我们谈论现代化前端开发框架时，Vite 和 TypeScript 往往是绕不...
使用typescript构建three.js项目
热门推荐
X01动力装甲的专栏
03-14 1万+
使用typescript开发three.js项目
ThreeJS - 封装一个GLB模型展示组件（TypeScript）
m0_64130892的博客
10-02 2475
最近基于Three.JS，使用class封装了一个GLB模型展示，支持TypeScript、支持不同框架使用，具有多种功能。最主要的操作，其实就是下面这两步，做完就显示模型出来了，其它就是可视化的配置了。const modelShow = new GLBModel(node) //创建实例//加载模型。
threejs-tutorial:Three.js 系列教程，学习和探索 Three.js 世界
04-18
threejs-tutorial 从今天 2020年11月27日 开始学习和探索 Three.js 。 以下内容更新于 2021.04.16 特别提醒： 本教程最开始使用的是 r123 版本，但是后来 Three.js 更新到 r125 版后，r125 中做了一些修改，将 ...
threeJS:加油啊，学习threeJS
04-11
在本教程中，我们将围绕"umi项目"来探讨如何入门ThreeJS，并使用TypeScript进行开发。 首先，要开始ThreeJS的学习之旅，你需要确保你的开发环境已经准备就绪。"umi项目"是一个基于React的高级脚手架，它集成了路由...
threejs_fun：与Threejs一起玩。
02-15
在这个"threejs_fun"压缩包中，我们很可能是找到了一系列示例代码、教程或者练习，用于演示如何使用Three.js。由于项目标签为"TypeScript"，我们可以期待看到Three.js与TypeScript的结合使用。TypeScript是...
three-js-tutorial
03-16
《Three.js教程详解：TypeScript实现》 Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得简单易行。本教程将深入探讨如何利用TypeScript这一强大的静态类型语言来编写Three.js应用程序，...
Threejs-Template
03-18
本项目“Threejs-Template”是一个专门针对TypeScript的起始模板，帮助开发者快速搭建基于Three.js的3D项目。 【安装与运行】 在开始之前，确保已经安装了Node.js环境，这是运行npm命令的前提。接下来，按照以下...
threejs-typescript-template
06-26
Threejs-打字稿-模板 用于在 TypeScript 中使用three.js 编写程序的项目模板。 先决条件 用法 步骤1 执行以下命令。 npm install grunt setup grunt 第2步 在支持 WebGL 的浏览器中打开 dest/index.html。 （您必须使用本地服务器。） 如果您的 PC 上安装了 Chrome，您还可以使用以下命令。 grunt connect tsd 用法 tsd query <module> --action install --resolve --save --config conf/tsd.json
typescript-webpack-threejs-template:新Three.js项目的模板
05-22
TypeScript + Webpack + Three.js模板 安装依赖 yarn 在监视模式下运行项目 yarn start 建立项目 yarn build 整理代码 yarn lint
threejs-framework:一个Typescript和three.js模板，可预测一个复杂的多场景应用
05-04
threejs框架 这是我在TypeScript中的第一个项目，也是我在three.js中的第一个大型项目。 目标是使用npm，TypeScript，Three.js和Browserify创建模板。 我有几个实际的项目，但是它们都足够复杂，可以从多文件方法中受益，并且需要一种干净地处理多个场景的方法。 欢迎提出意见和建议！
Three.js-TypeScript-Boilerplate:Three.js TypeScript样板
05-02
Three.js TypeScript样板 这个样板是作为的子项目创建的，仅是您要创建的内容的开始。 优惠券： : 运行时，样板将显示一个绿色的线框旋转立方体，其中包括OrbitControls。 它使用NodeJS和Express托管。 它包含均以TypeScript编写的服务器和客户端脚本。 客户端打字稿和已编译的javascript均使用 正在安装 克隆存储库 git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git CD放入文件夹 cd Three.js-TypeScript-Boilerplate 安装TypeScript npm install -g typescript 安装依赖项 npm install 启动它 npm run dev 访问 您应该看到一
three-ts-types:流行的WebGL库Threejs的TS类型库
03-21
该存储库是three.js的TypeScript类型的宿主。定期将来自此存储库的更新推送到DefinitelyTyped并在@types/three npm软件包中发布。 我们将此存储库用作类型的主页，而不是DefinitelyTyped，因为： 用户在特定于three.js的存储库上提出问题或创建PR并不那么困难 组织过程以确保我们及时了解Three.js存储库中的更改会更容易 它给了我们更多使用我们自己过程的自由 重点和目标 最高优先级是确保没有不正确的类型（或已删除的事物的类型）。 目的是为src目录中的所有代码提供完整的类型。 由于示例模块的数量以及修改的速度， examples/jsm目录对于每个示例模块都没有完整的声明文件并不是目标。如果要使用缺少类型的示例模块，请创建PR以添加类型，或创建问题以请求我们为该模块添加缺少的类型。 贡献 请参阅我们的以帮助您入门。最重要的事情之一
探索TypeScript与Three.js的完美结合：`@types/three`
gitblog_00084的博客
06-20 397
探索TypeScript与Three.js的完美结合：@types/three 项目地址:https://gitcode.com/three_types/three-ts-types 在3D可视化领域，Three.js无疑是前端开发者心中的明星库，它简化了WebGL的复杂性，让网页上的3D体验触手可及。而今天，我们要深入探讨的是一个不可或缺的伙伴——TypeScript类型定义项目：TypeScr...
基于typescript开发的threejs3D动画项目
毕业作品网站
06-21 2838
我们前面使用的是自己编写的ts，以及自己手动引入的jquery，由于第三方库采用的是直接引入js，没有d.ts声明文件，开发起来很累，所以一般情况下我们使用npm引入第三方的库，本文记录使用npm，typescript开发threejs3D项目，搭建基础实例，为以后开发具体业务做准备。依旧是熟悉的SpringBoot项目，不同以往的是使用了npm管理工具来下载依赖js库，类似maven，同时为了解决typescript编译后引入npm库的路径有问题，导致浏览器报错的问题，我们采用的webpack打包工具来打
Three.js+TypeScript+Webpack学习记录（一）
kuokuo666的博客
04-21 519
Three.js+TypeScript+Webpack学习记录（一）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值