three.js如何运行代码关键词

现在有越来越多的人想去学习网站的三维效果，三维场景的开发，但是不知道该学什么，该怎么学。那接下来呢，几期的视频，我就来分享一下我自己关于三维网站开发方面的学习经验。 那在我看来，三维网站开发的学习呢，可以大致分为三个阶段，基础、进阶、高级。 这期视频呢，我们就先来聊聊基础阶段。那这个阶段呢，主要就是要掌握在网站上加入一些三维的场景啊，三维的元素，同时让这些场景或者说元素啊，他具有一些可以交互的效果。 这些交互的效果呢，在基础阶段的话，主要就是局限在三维元素的旋转啊，位移啊，缩放啊等等基础的变化。那有些同学可能听到这里会觉得很不可思议啊，可能会忍不住会有一个疑问，你说的这些真 真的是基础阶段的吗？那其实这个所谓的基础阶段，你不要被我这个基础这两个字给骗了，那这个阶段的内容呢，只是相对于整个啊，整个三维开发的知识内容来说的，是相对基础的，也是相对容易掌握的。注意啊，这两个相对， 但是只要你用的好啊，也是能做出很多非常出彩的网站效果的，那要掌握这样的开发能力呢？那么前端必学的三门语言， h t m l c s s 和 draw a script 是必须要掌握的，那尤其是 draw a script， 你要掌握的比较熟练，不然的话呢，你要么学不下去，要么学下去也非常的痛苦。 那在已经掌握了这三门语言之后啊，我建议是可以先去尝试学习一个三维软件的基本使用啊，比如说像 c、 c， d 或者 blend 啊， 其实任何三维软件都行，当然我自己来说是更推荐 blender， 因为它不仅开源免费，那上手呢也不难，免费的学习资源呢，又非常多啊，确实也非常的好用啊，很强大， 尤其是他可以导出 gltf 格式啊，这个格式的模型文件，我们是可以直接在网页代码中使用的，非常方便。 那让大家去学习三维软件的主要的目的啊，首先是通过使用这些三维软件，能够了解到一些基础的三维概念，比如说像坐标系啊，顶点啊，几何体啊，什么材质啊，灯光啊，相机啊， uv 啊等等。 因为我们会在三维代码开发的这个代码学习的部分也会碰到这些概念的，如果你在学习具体的代码之前已经有了这些概念，那么你在学习代码的过程 中啊，就会少很多认知负担啊，学的也会更加顺利一些。其次呢，你学会了一个三维软件，那也有助于你自己去创建一些自己的三维模型，来实现自己的一些想法。 虽然我们也可以去一些模型网站上啊，去下载现成的模型来用，有些是免费的，有些是收费的，但是很多时候啊，确实是需要我们去制作一些跟项目相匹配的这样的一些三维模型的，那如果你是一个设计师的话呢，这个能力就更应该具备了。 那代码方面的话呢，我们主要的就是要学习这个 three g s 这个库啊，当然也有其他的库，比如说像这个 bobby long g s， 但是通常来说呢，我会更推荐 three g s， 因为它的综合生态会更好一些，那比如说它有专门的 react three five 这个库啊，它是基于 three g s 与 react， 可以让我们 在使用 rect 开发的项目中呢，轻松的实现。呃，各种三维的场景啊，三维的模型，那这个 three g s 呢，其实它是基于 webgl 的封装。那说到 webgl 呢，那必然要说到 web gpu， 那最近啊，就是四月六号，那谷歌的这个 chrome 浏览器啊，它正式 呃开始支持了这个 web gpu 啊，那 web gpu 呢，现在已经在贝塔测试阶段的这个 chromo 幺幺三版本中默认启用了。如果你不了解这个 web gpu 呢，你可以现在先暂时简单的把它理解成就是现代版的，升级版的，强化版的 webgl， 他的开始正式的应用呢，甚至可以让网页端有了可能去运行一些重型的图像处理工具，处理软件，还有一些重度的游戏。那接 接下来呢，我们还是要先来了解一下什么是 webgl。 那 webgl 这个库呢，其实呃就是用来在网页中的这个 canvas 元素上啊，绘制各种图形学效果的这样的一个库。 那绝大部分我们可以在各种网页上看到的各种眼花缭乱的什么三 d 二 d 的这种效果，其实都是通过 webgl 在 cameras 这个元素上绘制的。那 webgl 的全称叫做 web graphic library， 网页端的图形学库，那它呢，也是一个基于 j s 语法的库，所以其实理论上来说啊，只要你会写 j s 代码， 你就能用 webgl。 那只是说 webgl 的它的一个使用过程中啊，它会碰到很多图形学的概念，同时呢， webgl 的代码呢，有很多自己特定的一种逻辑，还有各种提供的功能呢，又相 对来说，相对底层代码组织的难度呢，比常规的，比写常规的 gs 代码会高很多，对于很多人来说呢，它是比较难上手的。那 three gs 呢，就是利用 wivegl 提供的各种能力，又封装了一套相对更简单易用的功能的酷， 你可以简单的把他们之间的关系理解成是，就是 three g s， 它是基于 web g l 或者说是 web g p o 的，然后 web g l 和 web g p o 呢，它是基于 javascript， 再加上一些计算机的图形。学它底层的这个调用， 那我们使用 three g s 呢，就会比使用 web g l 相对更简单，相对更高效。那注意啊，这个依然是相对的，比如同样绘制一个三角形，你用 web g l 可能要数十行的代码，但是用 three g s 呢， 你可能只要不到一半的代码量就能搞定。那本质上呢， three g s 它使用的还是外部 g r 的能力，不过可能过不了多久啊，那当 three g s 加入了对这个外部 g p o 的知识之后呢，你使用的 three g s 代码在支持外部 g p o 的这个设备上 执行的时候呢，调用的应该就是 web gpu 的能力了。所以利用 three g s 呢，可以更容易地去创建一些三维的元素，去实现一些三维交互的效果。 但是由于通过 c g s 的代码，只能实现一些简单的基本元素，如果你还想要在页面中实现一些复杂的三文元素， 复杂的三位场景的话呢，基本上都是要在三位软件中去制作，然后再导出相应的格式引入到页面中的，那要掌握这个初级阶段的网 网站开发的这个能力啊，其实现在来说核心的问题就是两个，第一个就是如何学习 three gs 并实现基本的具有三维效果的三维元素的这样的一个网站。第二个呢，就是要学习如何从三维软件中导出模型，让这个模型呢会在页面中渲染的效果更好。 那第一个问题啊，就是关于 three g s 的学习资料的，那大部分呢，现在来说都是国外平台的资料啊，免费的有，收费的也有啊，不管是在 b 站还是油管上呢，你都可以自己去搜一下这个 three g s 关键字， 或者去国外的。像这个优待米这个平台上他也有有一些相关的课程，那所以 g s 官网上呢，他自己也有一些推荐的课程，那我这里呢就不给大家推荐了，我觉得市面上这一块的教程呢，就我自己的观感来说，就我自己看过的来说啊，都有各自的 很多问题，我其实都不太推荐，这也是我为什么我在这个 gs 课程之后啊，想开始做这个图形学和 three gs 课程的原因啊，我希望把国内的这一块的这个课程啊，这块的教学资源呢，更加的丰富起来，让更多有兴趣的同学呢可以把这个学会。 那第二个问题就是关于导出模型的这个，那我近期呢，会把这个关于如何导出呃三维模型给网页端使用的这样的一个内容，做一个系列的分享视频， 把这个问题讲清楚。那到时候呢，我也会讲一讲最近比较火的一个三维在线的工具叫做 splin 啊，他如何和我们这个网页端开发啊，进行一些配合啊，到时候我也会在这个系列视频当中和大家分享。那最后呢，再总结一下，那学习三维网 在开发的这个基础阶段啊，那我建议呢是这样学习，首先你要掌握 html 和 css， 然后熟练掌握 javascript。 然后呢你要学习一款三维的软件的基本使用啊，比如说像 bland， 然后呢你就学会 three g s 的基本使用，然后还有就是学会如何导出适合网页端使用的三维模型。好， 那这期的视频内容呢就到这里了，那下一期呢，我们再来聊一聊三维网站开发的这个进阶阶段啊，我们要学些什么啊？怎么学？

哈喽，大家好，前两次我们也讲了一下四类 gs， 然后今天我们来还是继续分享一下四类 gs， 然后今天主要是讲了一个加载一个模型，怎么加载一个模型到一个页面进行一个展示，你看像我们就是一个这样的一个效果，然后这个飞机是一个 3d 的一个模型， 其实网上有很多一些三的模型可以下载，直接下下来就可以了。好，我们来看怎么实现。今天我们用六前，前几次我们用了一个 rag 的，还用了纯 stm 形式，今天我们就采用一个六的形式。好，这是我们先停掉 还是和上次一样？嗯，用力的勾卷，勾卷一个，嗯，加上 就 tf 吧，我们主要用是用的这个上面，其实之前是我刚写的一个代目，也还是叫这个一吧。 好，我们接着使用六，我们进一下，打开一下，然后我们把依赖放一下。 好，我们现在来装，我们先把这里，你看这是个 app， app 的 u 的文件，对吧？ 装好了，我们启动一下，对吧？好，这里 看一下，我们把这里钥匙改一下，钥匙先删掉，然后还有 word， 我们这个不需要了，我们直接用右上，这个也不用了，这留个第二名，好吧， 看一下效果，对吧？这个缩小一下。好，我们然后上一节，一样把碎节碎这个， 所以安装一下，对吧？一样的，还是安装这个魔盒棒，对吧？装一下 弄好了，对吧？我们把它引入进来， 我们直接把这个呆萌拿过来吧，还是一样的，很值钱的。把这个呆萌拿过来，先看看能不能正常访问。 嗯，我们这里可以先走 走，色直性，对吧？ 好，我们看一下效果，有了，对吧？这就是灯的效果，把钥匙盖一下，你看在周边对空隙，我们把它这个偏距收一下，把品质车铃 好像上节一样，我们把这个旋转 这个动画给去掉，然后把一个鼠标的滚动的加上这节，都和，这里其实都和上一节是一样的，对吧？ oh， my god， 看，对吧？我们还可以把我们那个辅助线加上， 你看你会发现我们这里没提示，没提示其实我们可以装一个类型的，你看他可以有个提示的，我们可以装一下这个。 好，我们再看一下看，对吧？在这一个把这个辅助线给加上来看一下，对吧？辅助线也有了， 好，接下我们就是要把我们的一个下载的一个三 d 模型加载进来，你看我这里下载了这网，网上有啊，网上其实大家也可以找一下，我们这是用的这个，我们就用这个飞机，今天用这个一个飞机的这个一个模型，把它用网页形式把它加载进来，我们这里可以一般下下来都是这个 bled 这种格式，我们可以导出，我们要导出一个 glb 的一个格式。好，这些 先倒到这来了，应该是有了，有了我们再倒一个 放到 party 下面。好，然后我们用使用一个加大器，这是我们的项目的这个一个名字的 d s m 七七九九， 用这个夹杂器进行一个夹杂，我们把这一块这个结合体就不要了， 你就用一个这个加大器，我们然后用这个加大器进行一个漏斗，嗯，再加上我们这个 j l b 下载后，我们把它添加到场景， 我们看一下，发现什么都没有，对吧？然后我们滚动一下，拉一下，还是没有看一下原因，嗯，加载添加造成进，我们把这个范围 看一下，这个一键线也没有，哎，我们看一下有没有加载成功。报仇应该没有报仇 看一下，看一下， 应该是有的，应该是成功了，应该是成功了。这感觉确实不在。 嗯，我们把这个这周改大一点，哎，这周改大一点，看到没有？你看，你看，是不是感觉有个东西给挡住了，说明他是有，对吧？ 你看这里，他是在这里，对吧？好，我们要加一个光源， 好，我们再加一下这个公园， 再加一把 gs 吧，然后添加到场景。 好光源啊，光源没加颜色，给他一个颜色，颜色值 看没有出来，对吧？ 我们把这个黑色背景给改一下，嗯，测试一下他的一个颜色，颜色也给他，也给他个白色吧，也给一个白色 看，对吧？这就是进了一个，把这个模型给夹到进来了，然后也可以旋转放大、缩小观看。好，我们把这个辅助线注射一下，注射错了， 你看我们把这个光源给注下，他就变成全黑了，对吧？辅助线在上面。 好，这样就实现了我们的一个模型的一个夹子进行一个展示。我们其实我们如果想要调一个角度，我们可以根据， 我们可以在这里面进行一个打印一下这个相机 可以看一下。例如假设我们要调成默认，默认进来，这个角度好看一下， 嗯，可以改成这样，二七一四， 霸气 向前一个位置，这里看一下，我们的看一下。 是个对象， 不行，吃吧，看一下味道，看一下味道 方法，嗯，方法里面 这个是可以啊， 小黑，我们之前可能是复制的是毒蛇来着。 一十四、二十七、二十四。 对，我们是这一个角度看一下，这个角度是 五十五、三十五、十五、三十五，就是这边 二十一步，三十一， 双十一是二十五吗？对，时间看到没有？你就目的就会到这个位置， 这样就实现了。我们一个主要这期视频是用的这一个模型的一个加快器， 可以通过网页进行一个展示，三 t 展示一个物体。好，今天就分享到这里。

赵哥，数字孪生能自己开法吗？嗯，可以啊，但是你为什么要自己做呢？我给你做不好吗？前两个项目都找你了，以后我们也想自己具备这方面的能力，升级呀，改需求啊，完善功能什么的更灵活嘛。 了解，我偷偷教你怎么自己做数字轮升，你听一下就行了，别点赞收藏，找不到就找不到了，更别分享给别人。好的好的，做之前呢，你要先确定自己的数字轮升系统的架构是 cs 还是 bs。 说人话， cs 架构就是电脑里的应用程序扩展名是 exe 的那种，直接双击就能打开看了。 cs 架构就不用在电脑里安装成， 直接在浏览器里看，可以上传到企业公众号里发给客户，也可以在朋友圈分享。所以可以把 cs 理解为单机游戏，优点是三 d 模型更精美，可以做非常庞大的 场景，也可以做非常精细的结构。 bs 可以理解为网页游戏，优点是更容易传播，随时随地可以看，哪怕是在饭局上，哪怕是客户在你车上，都可以随时掏出手机给对方展示，他更灵活。 骂我要学 bs 架构， ok？ bs 是基于 webgl 和 webgpu 技术的，建议你先学一下 webgpu 的 api。 api？ 那是啥？呃，要不你还是学风装好的吧，比如 three 点 g s。 呃，还要学别的吗？啊，其他的就只需要学一些三 d 建模，材质贴图，灯光渲染，地形编辑，意外设计。这里主要是 ps 和 a i 还有 html 五啊 php 加 spri 福气的搭建，比如 is 或者阿帕奇拖产。用心学习的话，三五年之后你就可以自己独立的做数字来生项目啦，三五年，我只给你三五天，必须教会我。

像这种城市级别的数字孪生模型，体量够大了吧？用 sngs 做成浏览器，能访问的项目是完全 hold 住的。不会三 d 建模你能做？快交代咋整的？ 跟你说了，有模板吗？很简单的，想做多大面积，就在平面地图上框出来，然后城市模型就出来了，就这么简单。你说我不要蓝色科技风，哎，可以换模板呢，换个黑金的， 放个鲜亮一点的，有这么多可以选呢。城市模板是好，但你这园区的定制化，你又不会三 d 建模，怎么办呢？也好办，把平面图放在地上当参考，从模型库里拿现成的模型拼一下。马路、厂房、烟囱、围栏，大部分你能用得上的东西这里都有，还都能改尺寸，改比例。 不光是室外，室内也一样。会议室、办公桌、楼梯扶手、桌椅板凳、门窗隔断，基本上你需要的东西，模型库里都有。再选个大屏模板，套在三 d 模型 外面，蓝的、绿的、科技感的、小清新的，随你喜欢。需要哪个图表咱就留哪个，不需要的换掉这边各种图表、文字、按钮、素材一应俱全，大小、颜色、数据、内容，这些东西你一看就知道怎么改，不用学都能会。 然后你就有了一个从地球到省市区、县园区某一栋建筑一级级推进下来的三 d 数字孪生系统了。如果想要监控，再把摄像头接进来，园区和交管的都可以接。你看整个过程，我们用到三 d 建模了吗？ 没有。用到编程了吗？也没有。当然，如果你会三 d 建模，会编程，那么你不止可以用模板，还可以做自己的定制化界面。但如果你是通用的需求，那么 cns 里提供的模板和素材库里的东西就足够用了。

哈喽，大家好，接下来这节课咱们用瑞 x 加 ts 加 cgs 来做一个三维机房的实战案例啊，这节课的目标呢，就是理解 sui 啊，开发实战项目的整体流程，实现啊三维机房的展示和交互。 这节课的知识点呢，有场景透视，相机基础材质，几何体， 网格对象以及渲染对象，还有相机轨道控制器。好，接下来咱们首先对项目啊做一个概述，其实按理来说呢，我们在新学这个随意 gs 的时候呢，是没有啊，一开始啊就 做实战的，但是啊，现在呢，就有这么一个三维机房的案例啊，非常适合啊，一入门就实战，因为呢，他很简单，很经典，也非常适合我们啊，去腾览全局看一下随机 s 是如何实战的。 我们最终啊所要实验的效果呢，就是啊，我这里面这个 gf 效果，我们会对啊这个三维机房啊进行三维展示和交互。等我说完这个实验案例之后啊，我们会再从基础啊慢慢来说， c v g s 对于咱们要做的这个 it 机房的概念啊，可能会有同学不太理解啊，所以呢，我这里啊先对 it 机房做一个简介，在一些安全要求 比较高的企业，就比如说电信、网通、移动等，他们啊都是有着自己的独立服务器的，而不是啊使用阿里云啊，腾云云之类的第三方服务器。 像这种啊，大企业的服务器啊，可能会很多需要装进一个 it 机柜里，一般小点企业的服务器啊，会需要二三十个机柜，而大的呢则会需要上千个机柜。 当这些 it 机会啊多了以后啊，那就需要装进一个 it 机房里了，这 it 机房呢，就是我们接下来啊要实现的， 接下来我们再解释一下，为什么要在电脑里啊再建一个三维的 it 机房。随着科 的进步和信息化进程的推进啊， it 机房的重要性是越来越高的，企业啊需要对 it 机房进行更加妥善的管理和监控，就比如说事实的监控啊，机房的温度和湿度， 现在市面上比较好的 it 机柜啊，都可以啊，讲起内部数据啊，同步到服务端，这个时候呢，虚拟现实的三维 it 机房啊，就有了用武之地。 计算机中的三维 it 机房啊，可以啊，将机房数据啊可视化，让企业啊更好的监控啊和管理 it 机房。我当前的这个三维 it 机房的项目啊，就不整太复杂了， 毕竟啊，现在还是入门阶段，以后呢，咱们再逐步深入。现在啊，咱们先说几个 it 计划啊常见的功能， 首先我要在前专业面里啊对 it 机房进行三维展示，然后呢，当鼠标划入 it 机柜的时候啊，提示当前机柜的详细信息。 接下来呢就是啊，我们可以啊，给机房一个一键显示机房中过热的 it 机柜的功能。 好关于 it 机房的介绍以及项目需求啊，咱们就说到这，接下来呢，咱们就具体的来说一下瑞艾特加 ts 以及 cgs 啊，是如何来开发这个三维 it 机房项。 在这里啊，我先简单说一下，为什么我要使用瑞艾克特加 ts 开发这个项目，而不是啊使用 voe 加 ts 啊，其实呢，我们用微友啊，用瑞艾特都是可以的，只是呢，我当前所知的大部分企业在开发范围项目的时候啊，都是使用瑞艾克特加 ts 的，所以呢，我才选择了瑞艾克特加 ts， 当然如果啊，大家擅长维优 e 的话啊，使用维优 e 也可以啊，不过在我所知的企业里面啊，这个 ts 是必须的，因此啊，大家在学习的时候啊，尽量把 ts 啊也一起学一下 这个 ts 啊，在我们面试的时候啊，还是比较重要的，因为啊，如果面试官问我们会不会 ts， 如果我们说不会的话，那就会变成减分项了啊，在咱们啊，当年这个瑞艾克特加 ts 的项目里啊，因为啊，我一直专注于图形学，对瑞艾克特的源马并没有啊太深入的研究， 所以啊，我在这啊就不再系统的给大家讲解瑞艾克特或者说一些瑞艾克特的底层原理了。 咱们这边啊，在开发项目的时候啊，就用到什么说什么了，如果大家想深入研究瑞艾克特的话啊，可以联系一下大寿啊， 大圣老师啊，在我们开课吧这边啊，做过好多优秀的课程啊，我们可以在 b 站上搜一下画 花果山，大圣啊，在他的 b 站里啊，放了很多值得学习的视频啊，如果我们啊想学瑞艾克特加 ts 的话，也可以啊，直接给他发信息， 比如大圣我要学习瑞艾格特加 ts， 一般啊，他看到后就会回复我们啊，告诉我们啊，如何去学他人很好的。 好，接下来咱们继续说这个 it 机房的模型。这个 it 机房的建模思路啊，有两点啊， 首先是简化模型，能用贴图表现的细节啊，就用贴图这样一个模型的面数少了，那虽然速度啊也就快了，接下来是将光效融入啊贴图之中，即 模型贴图之后啊便具备啊光效和体感，这样在十月中啊就无需打灯了，这样既可以啊提高项目的开发速度，也可以啊提高渲染速度。 在这里啊，先简单给大家看一下我这个三 g max 里的模型啊，在这里面最重要的呢就是 it 机柜了，就是这样的一个个机柜， 这些机柜啊命名的时候啊，都是按照特定的规则来命名的，首先呢他们第一个单词呢就是啊开不奈特就是机柜的意思，后面呢再跟上机柜的序号， 这些机柜的名称都是唯一的，这样我们之后啊就可以根据这个内幕来查询机柜的详细信息。 在这机房里面啊，除了 it 机柜啊，其他的就是一些辅助性的模型了，就比如说这个是空调，这个红色的是消火栓 啊，这个都是增加场景丰富度的，还有门以及电箱，这里面有三个 呃，这个机房的地板呢，有两种，分别是隔热地板以及机柜下面啊防静电的地板 啊。这里要简单说一下啊，我这个计房布局啊，并不算专业啊，因为我不是专业干这个的，这个布局啊仅供参考啊。接下来啊再给大家简单说一下这些模型的建模原理啊， 咱们啊先看一下这个机柜，这个机柜啊实际上就是一个盒子啊，我之后呢用一个展开 uv 贴图的工具啊，把这个盒子的 uv 展开，然后啊给他贴上了一整张图片，给大家看一下他的贴图， 他呢就使用了这么一张贴图，这部分呢是前面，这是后面，这是特面啊，这里呢是顶面， 就这几个面。至于其他的物体呢，也是类似的道理，就比如空调的也是啊，摆的盒子， 还有这里的小火山盒子加贴图啊，就是各种盒子加贴图这些模型啊，就像之前的 it 机柜一样，就是在贴图里啊，让每个面啊都有了 黑白灰的光有效果，这样看起来啊就会有一个体感。我在这个三 d max 里面啊，建完模型之后啊，就可以将其导出了，我在导出的时候啊用了一个芭比伦插件啊，就是这里这个这个插件啊是我后来装的， 因为啊三金麦克斯里面啊，他没法导出啊 gltf 的模型文件，所以呢我就需要这么一个插件啊，来做一下导出。 对于这个插件的下载地址啊，我在后面有写啊，大家可以点击这里的 gltf 文件导出插件就会打开一个给大哈伯的网页，大家可以按照这里面的安装说明啊，在三 g max 里面安装一下。我们刚才啊 说到了三 d 麦克斯啊，就简单的给大家说一下，现在啊市面上啊可以啊，三 d 剑魔的软件啊，就是现在市场上啊可以三 d 剑魔的软件啊，有很多，比如说三 d 麦克斯啊，贼人的 ccd 啊，都是可以的啊 啊，三 d max 啊，形象队而言啊，更复杂一些，当然功能也更强。我这边呢是因为大学里面啊就学的三 d max， 所以呢就用三 d max 来建模了，如果大家会其他的建模软件啊，用其他的也可以啊，只要能导出 gltf 就行。 其实啊，在具体的项目协作中啊，是有专门的建模式的，不需要我们自己建模。不过呢，我在这里啊说一些建模相关的知识啊，还是希望大家具备一些建模的能力啊，因为这 这样可以啊，防止啊被建模式给空了，因为啊，万一模型师啊给我们建的模型里啊，一个门把手啊就重建上万个面，那我们倒进来之后啊，就得卡死。 所以啊，对于建模相关的知识啊，我们还是要多少知道一点的。等咱们这个实战案例结束后啊，我就会作为扩展内容啊，在视频里啊给大家演示一下建模和导出 gltf 的过程。 接下来啊，咱们再说一下我为什么啊要使用这个 gltf 模型文件啊，这是因为啊， gltf 模型文件啊包含了整个场景的数据啊，就比如几何体材质，动画相机等。 gltf 模型啊 使用起来啊要比传统的 obg 啊模型啊方便很多，所以啊，我就使用 gltf 模型了。在我们啊导出了 gltf 模型之后呢，一般会包含以下文件， 分别是啊， gltf 模型文件， b 文件以及相应的贴图文件。在我们建模的时候呢，还得啊注意一下模型结果和命名的规范啊， 在建模软件中啊，同一类型的模型文件啊是可以放入一个数组里的，数组啊可以多层签套，这样就可以啊对模型文件进行统一的管理。 而我当前这个机房模型啊，因为比较简单啊，我就没有使用数组，在这里面 所有的麦斯对象都是啊平展开的。我这里啊，为了便于访问啊和区分模型啊，就对模型啊进行了规范命名啊， 就比如说机房中的 it 机柜啊，就是按照开宾内套零零一，开宾内套零零二，零零三这样的方法去命名的。之后啊，我在寻找 it 机柜的时候啊，就看一下其内幕里面啊是否包含开宾内套，就知道这个模型啊是不是 it 机柜了。 我这里呢，就假设 it 机柜的名称都是唯一的，这样我们啊便可以基于这个唯一的名称，从后端来获取啊相应机柜的详细信息。 好，关于模型相关的知识啊，咱们就说到这，接下来啊，我们就可以啊去代码里面构建项目导入模型了。

发现了一个比较好玩的 svgs 的开源项目，它的网址在这， 有兴趣的话大家可以看一下 他这个项目里呢包含了很多其他的啊，紫玉 g s 的势力，我感觉比较好玩的就是这个冰堆堆，我们向下滑动可以看到这有他的一个预览地址，我们点进去看一下， 看到了吗？这里面有很多的视力， 我们看一下这个 b d 墩， 是不是感觉很酷？

好，小伙伴们，大家好，最近啊很多小伙伴们在私信我，让我分享一下这个 three g s， 然后今天就给大家安排上，然后从今天开始我们进入一个系列的分享， 然后这个分享的名字我们定义成随意 gs 的入门到实战，然后这个实战的例子，我们就实现一个 vr 看房，然后今天我们是第一节分享，我们先来做一下学习前的准备， 首先我们来演示一下我们最终会实现什么效果，好，我们看一下，然后这个啊，因为他这个 vr 看房这个效果啊，我们可以用两种方式，一种是全景图， 另外一种就是我们前后左右上下相当于四个图片拼成一个立方体，那个三 d 三维的那种空间来实现， 然后这边是这个使用的全景图，因为因为那个房间的那个全景图啊不好找，所以我这里面就网上随便找了一个这种全景图来实现的，你看一下效果，然后这个图片可能不好，然后这个拼接地方就比较明显，比较突兀， 然后但是他大概能演示，就是如果这个这个全景图，如果是个房间全景图，我们也是可以很好的预览这个房间的那个他的具体的内容，对吧？ 这种方式我们就在这个分享中并没有实现，因为我们这个房间的这个全景图啊不好找，我就没有用这种方式，就说这种方式也可以实现乌鸦看房那个 那个三 d 演示，好吧，这是一种方式，但是这个方式实现后面在课程中会给大家分享， 然后主要是用第二种方式实现的。好，我们看一下这个，我们是刷新一下。好，这个是第二种方式，第二种方式就是通过上下左右前后六个面来组成一个三 d 的空间，我们来旋转一下，看一下这个房间，这个房间是我在那个链家网上 接下来的这几个图片呢，你看有图片之后，我们就可以拼成一个三 d 的效果，对吧？嗯，转一转，然后我们还发现还再转一下，好，发现这个箭头他可以进行漫游，比如说我点这个箭头，然后他就会相当于进入到这个房间，哎， 现在是吧？现在进入到这个小房间里面去了，看到这个小房，因为我这里没有鼠标，可能不好操作，是吧？这就进入到这个小房间，可以看这个小房间，这就是我们这个课程分享的最终要实现的这个效果，就是这个 这个实力。好，这个就是演示这一块。接下来我们来提供一下这个参考资料啊，就是这个课程我们会提供两个参考资料，一个是他的 api 查询，一个是代码，就是这个 cgs 他的原代码地址在这，然后他的 api 查询， 这个相当于我们 cgs 里面的 api。 我们来看一下，其实就这里就是比如说我后面我不那个，对于某一个 api 我不是很清楚，我们接着查一下，比如说 kimer， 比如说我们对相机不很清楚，然后我们 开门，好，我们查一下，哎，看这相机这个 app 怎么用，对吧？这个是相当于一个字典一样的，这个就是比比较有用，后面我们肯定会用到。然后第二个我们就说一下这个学习 方法，对于 cs， 对于 three gs 这一块我们得小伙伴们的建议，对前端小伙伴们建议最好的学习方法就是首先我们理清楚知识的主干，对于他你那个主干外的那小枝节啊，我们 对于比较常用的我们可以先了解一下，然后其他的不常用的我们尽量先去不管他，因为这个东西确实这个它里面设计东西比较多啊，你如果一开始一股脑的所有的球球权的话，就是全部想了解的话，首先他花的时间比较多， 而且你没也没有那么精力去所有了解，这样的话可能会打击你的积极性，就一下子让你一下接触大量的知识，这肯定是肯定是有点，就是吃不消，对吧？所以建议大家是先抓主干把主干的，呃，大概 主干了解清楚，然后对那些职业上常见的 api 了解一下，这样就可以了，这是学习的第一条，建议大家这样。然后第二个就是学习的过程中，我们一定要结合这个戴帽来学习， 不要去直接看，只要看你直接去眼睛去看呐。首先你看那些代码是提提不起你的兴趣的，你仅仅看一些代码有什么兴趣呢？对吧？你得像做化学实验一样的去做实验，去看他的 demo， 然后在 demo 就上去改， 这样的话才才达到事半功倍的效果。然后第三个就是如果我们在工作中时，就是在工作中可能真正的遇到了要用到 sri gs， 这个时候我们怎么搞呢？我们不要去直接去通过直接手写代码，一一行一行的写， 这样肯定也是极低的效率，而且很容易出错，这个时候建议大家就是去找类似的戴帽，然后在戴帽的技术上去改，尽量去像我们那个，就是他如果用到这个也会出设计图吗？然后我们就在原有戴帽上去改， 就是无限的去靠近这个我们要的设设计图，按这种方式可能工作中效率也比较高，好吧，这就是三条对大家的那个建议。 然后我们再看第三部分，就是课程的安排，就是这次分享我怎么安排的？首先我会整体讲一下这个 sugs， 让大家对这个 sugs 有个整体的了解，也就是抓住知识的主干，这是第一块主要讲的，也就是对的，对 知识有个提纲窃令，就是你不会迷失在这个知识中，我们主干抓住这是第一步。接着我们会对主干这一块进行稍稍的讲解，就是每个主干什么意思，反正是够用，不会讲的太深也太广，是吧？够用。 这是第二部分，就是一个个的主干去给大家分解一下，这是第二部分，分解之后我们相当于把这个知识整体有个把握，而且它里面的一些细节，常用的细节也会讲到最后一部分，就带家带着大家做一个实战的案例， 也就是我们刚看到那个乌鸦看房那个案例，带着大家直接手敲，敲完这样的话我们就对上面的知识有一个很好的巩固和更好的去理解，这就是 这个课程分享，不是课程啊，就是这个分享啊，就这次分享的安排，大家，嗯，了解一下这个课程是怎么这个分享是怎么安排的。好，这一节先到这里。