js如何调用3d模型

在这个视频我简要讲解了下如何使用 three j s 在网页上展示三 d 模型。这个视频将进一步设置灯光和阴影。首先推荐使用 m， p， m 以及构建工具来安装 three j s。 由于我这里需要在在线编辑平台展示，所以使用 cdn 的方式。除了使用 three j s 的核心功能， 还有其他很多有用的组件，比如控制器，加载器以及后期处理效果等等。是 examples j， s， n 目录的一部分，它们被称为视力。由于对接 s 一二与 s module， 因此任何引用它的 square 标签必须选用 type 等于 module。 另外，视力需要被单独的导入， 比如今天这个视频需要使用到的轨道控制器和 gltf 加载器。首先声明几个重要的变量，初始化函数中创建场景并设置背景颜色。实力化 webgl 渲染器对 下渲染区域的尺寸设置为视窗的宽高。通过 dom element 属性可以获得深层的 canvas 画布插入到 html 中。然后使用透视相机来模拟人眼所看到的景象。透视投影是三 d 场景的渲染中使用最普遍的投影模式。设置摄像机视锥体垂直视野，角度为六十度， 长宽比为视窗的宽高比。近端面以及远端面参数的具体介绍可以回看这期教程。然后通过 position 设置摄像机的位置。 启用轨道控制器可以使得相机围绕目标进行轨道运动。简单来说，可以通过鼠标对场景进行操作，比如旋转、移动和缩放场景等等。 修饰款完毕后，开始进入渲染循环动画。利用 render 方法用相机渲染场景。使用 request animation friend 在每一帧毁掉执行这个函数。接下来开始加载三 d 模型，我们使用 ltf 加载器调用 log 方法并传入模型的路径。第二个参数是加载完成时执行的毁掉函数，通过 send q 种获取对象，添加到场景中。现在可以看到模型了，再根据实际情况调整一下缩放比例和位置。 七七的是因为还没有设置灯光。 three js 提供了多种类型的光源，可以根据需要选择合适的光源类型。我们这里首先创建一个半球光光源，直接放置于场景之上。光照颜色从天空光线颜色渐变到地面光线颜色。 我们使用白色作为天空色，灰色作为地面色，强度为零点五。现在可以看到模型了，但需要注意的是，如果是某些版本的对 j s， 比如一五一会存在颜色的饱和度太高的问题。可以设置 tom map 属性，用于在普通计算机显示器 或者移动设备屏幕等低动态范围介质上模拟逼近高动态范围效果。但是现在没有阴影，这是因为只有来自特定方向的光才会产生阴影，所以接下来添加聚光灯代表主要的光源，注意需要设置 cast shadow with two。 除此之外，还要使用 traversity 规辨率所有模型节点 is my 属性判断是否是网格模型。设置 cast shadow 和 receive shadow with true， 代表动用投射以及被投射阴影。最后开启阴影效果，需要渲染器支持通过设置 shadow map enable 的来开启。现在可以看到阴影了， 但还需要进一步优化。首先针对阴影投射中的锯齿状或漂浮阴影的问题，可以设置八 s 为很小的值。其次，被投射产生的阴影也是有纹理的，如果看到阴影块状的问题，这意味着阴影纹理太小了。可以设置 mapsite 的宽高来调整阴影 的纹理分辨率，通常设置为二的次方值。现在阴影初步设置成功了，那感觉有点生硬。第一种用化方式是设置 shadow map time， 我这里选择 pcf soft shadow map， 使用软阴影技术生成阴影，通过多次采样和模糊处理来产生更柔和的阴影效果。 第二种优化方法是直接设置阴影半径，模糊，弱化阴影边缘，减少锯齿。最后，我们的光源和阴影都是固定的，可以在循环动画中更新聚光灯的位置为摄像机的位置， 这是模拟现实世界动态光源的小技巧。今天给大家介绍的对 js 中设置灯光和阴影的方法和优化技巧，希望对大家有帮助，我们下期再见。

大家好，我是新技术 x， 我们的零代码产品的负责人，我叫罗云钗，然后呢今天会给大家 介绍的呢，是我们的一个零代码的工具，他在我们的生工厂里面，他的位置在哪呢？进行一个标记，是我们整个生工厂里面，大家去通过零代码的方式交付一个复杂的帧数 数字原声应用的这样的一个工具啊，大家可以看一下我们的基本能力。刚才呢，我们的王二国同学通过我们的深园区实现了一个三 d 园区的搭建，他包含了室内室外以及相关的一系列的模型，但是呢这个时候他的应用还有一些距距离， 我们看他可以怎么做啊？他首先可以在我们的深园区里面把刚才已经搭建的场景进行一个导出，然后在我们的深工厂里面找到 零代码，点击新建一个新技术 x 的环境，在环境中创建一个应用场景，比如说叫做恒东商务员，在这个商务员中呢，我们可以把刚才导出的模型文件进行上传，然后传到我们的场景里。之后呢， 他可可以做相关的一系列的配置，比如说原生体集合，比如说图层啊，比如说业务一系列的配置。之后呢，他就可以最终交付这样的一个应用的产品。大家会看到这个过程是很简单的啊，在模型的基础上呢，我们可以去做一些智能会议室 停车的管理啊，进出园区的倒闸的监控啊等等一系列的应用啊，在整个过程中都是零代码真孪生的方式来 实现的啊，我们还可以去对园区中的灯进行远程的开关啊等激烈的控制啊，这是一个我们的最基本的能力。然后新记载 x 是什么样的一个定位呢？ 首先呢，我们是说他的最大特点，刚已经介绍的是零代码，也就是说我们的呃，使用我们星系 xx 这个零代码产品的人的要求非常低的，我们希望打造的是一个入门级的数字孪生教育平台 啊，大家可以更低成本的，更高效率的去交付项目。那能力包含什么呢？除了我们刚才看到的一个智慧园区的 基础搭建啊，我们可以做园区建筑楼层、房间设备的数字孪生的应用。然后我们也可以去做城市级别啊，就是在呃，三围城市三围地图上 去进一步的进行功能的扩展啊，所以应用范围是很广的。然后我们 来讲一下这个产品的基本的能力啊，首先呢他是在我的这个场景里面呢，我们会有一个软身体的管理，我们可以看到的是在这个三维场景里面的每一个对象，呃，跟在园区搭建里面不一样的是，在林黛玛里面呢，我们会是有 一个，呃，有一个软身体啊，我们每一个对象都是数据化的。然后在每一个软身体面板里面呢，我们都可以去创建相关的属性，可以去叠加视频监控啊，甚至可以去做相关的反向控制。 然后呢，我们实现了对某个软身体的管理。之后呢，我们还可以以图层的方式啊，首先创建软体集合，然后以图层的 方式来选择对一系列的啊，比如说符合某个条件的，比如说一批自动路灯啊，一批垃圾桶啊，来进行一个统一的配置管理，然后通过图层来控制显示和激活。 然后呢我们还可以添加一个业务视角，把一些统计数据还有大家比较关心的业务信息来进行一个叠加，然后来实现一个真数值孪生的应用。 呃，零代码的驾驶是什么呢？我们首先说使用我们的新记载 x 零代码平台，他只需要是一个应届毕业生熟练使用电脑，就可以在 两周时间学会来三周来完成一个标准的项目的焦作啊，整个过程是效率是非常高的，那我们可以做一个比较啊，因为我们知道很多。呃呃。市场上呢，有很多人会去采用游戏引擎 去搭搭建数字量身应用。呃，我们的两款产品，一个是低代码，一个是领代码的平台，在学习时间上 啊是有非常明显的提升的啊。以我们这个零代码星期四 x 来举例，我们一到三周就可以完成一个交付人员的培训，然后他可以掌握一个完整的系统应用和产品应用的所有的技巧。然后在 一个半个月啊，也就两周到一个月之间呢，会交付一个完整的项目，在学习成本和交付成本的提升上，我们都可以降低到百分之九十五。 我们可以看一下，因为我们的产品在十月十八号就已经完成了产品的发布，在这两三个月的时间内，我们积累了一些合作伙伴，我们来简单的看一下各个合作伙伴的案例。呃，这是一个我们的智能工厂啊，就是 smt 车间，然后我们可以在这个车间里呢，可以看到 有极限的移动，然后可以看到我们的生产线的运行情况，可以看到他实时的生产的数据啊，以及对工厂的状态进行一个监控，我们可以看到两侧会有实施的视频，有相关的指标啊，这个是我们的一个工业的合作伙伴叫做项目，他叫威远卓创 啊，然后这是一个园区级或者是工厂级的应用，那我们在这个计算还能做什么呢？这我们看下一个合作伙伴叫做斯兰，他交付了一个什么项目呢？他是在一个地图维度把，呃做了一个应急管理局的一个需求啊，比如 比如说对一些五类人员的监控，对监控区域的管理，以及相关的一些重点需要订放的区域啊，都可以去做相关的。呃应用的搭建，左边是一个以图文或者视频形式的组织结构的介绍，然后呢右边会 可以去搭载一些图表和应用功能，比如说他希望在地图维度去搜索某一个对象啊，这个人叫做啊，输入他的名字，然后定位他的位置， 然后切换到一个三 d 的维度，我们进行一个定位，然后定位之后呢可以查看这个人员的详细的信息啊，点击他的品牌 啊，这是一个简单的一个地图应用，然后我们可以去看我们还有一个合作伙伴的产品呢，叫做 呃，有个合作伙伴叫安洛云啊，他这个功能呢就会是刚才我们的两个场景的一个叠加，他首先会做一个智慧城市，智慧社区的区域的划分，然后可以看到一些相关的养老机构的分布，然后看到一些配套设施，然后呢点击某个人员定位的时候也可以显示 信息啊。啊，那更进一步的是什么呢？他可以在城市维度再把园区进行一个叠加，我们可以进入到某个具体区域，然后在区域里面一点击，哎，我们进到园区里，我们可以进到楼层，可以看这个养老设施的配套情况，这其实就是一个地图加园区的叠加情况， 这是一个我们比较综合的应用场景啊，这也是合作伙伴交付的，我们看下一个啊，这是我们的一个叫做百姓园的合作伙伴，他作为一个很神奇的项目叫做幼儿园 啊，我们一直不知道啊，在原来幼儿园也能用数字转身来管理啊，是做一些，呃，比如说校园的安防，一些食品安全，大家比较关注的一些 幼儿园，大家比较关注的一些场景啊，做的一些复杂的应用啊，这个也是很有意思的啊，这个我们在没我们自己在做之前没有想到啊，原来幼儿园也 也可以用数字蓝色来进行管理啊，这是一个，然后我们再往后看啊，还有一个合作伙伴叫欧卵啊，他做了一个光伏智能工厂 啊，然后在园区级别呢，可以把一些配套设施进行管理，他很明显能够看到一个光伏工厂的特征，然后呢室内也可以去做这种生产线的管理，然后在这个项目里面呢，他们揭露了这个擦车的实施的运动和实施的轨迹， 好来可以对这个工厂做一个实时的经济化的管理，大家可以看到这个叉车是会跟真实的世界是保持一致的啊，会进行移动。 好，然后最后说一下啊，我们在招募合作伙伴啊，我们的新技师啊，我们的申工厂啊、新技师啊，都在找大家对数学生感兴趣的合作伙伴，我们一起来拓展这个业务的蓝海。好，我的内容就结束了。

有网友要我让 gpt 做一个三维动画安排，提出要求后，很快 gpt 就把代码写好了，这速度是不是比程序员快呢？然后他告诉我，在三维模型库上操作 复制代码，打开三维模型库，新建 htln， 把代码粘贴进去， 运行到浏览器，怎么样，是不是非常效率呢？关注我，了解更多拆 ppt 有趣知识和应用！

足以检验是框架开发的三 d 模型项目完成了用第一视角在三 d 模型中自由穿行，左右手来控制方向，整体流畅度还不错。有没有一种感觉像是在玩王者荣耀啊？

这是一个使用 sirijs 开发的三 d 看车项目，他的车身呢属于一种光亮的材质，可以反射周边的一些背景，同时他支持车身、轮毂、玻璃三个位置的色值修改。 哈喽大家好，我是桑地，最近啊有个会员问我说，哎，桑地老师，我们公司最近要用 three g s 写一个三 d 的项目，这个 three g s 怎么用的呀？你能不能给我们弄个 demo？ 既然大家有要求，那这个事必须得搞呀，所以说我专门搞了一个 three gs 项目， 当当当，就是它，同时呢我把整个项目的开发过程都录制成了视频，以供各位小伙伴学习。那么 let's go， 咱们一块去看看这个项目都有些什么样的功能。这是一个使用 three g s 开发的三 d 看车项目，它的车身呢属于一种光亮的材质，可以反射周边的一些背景，同时它支持车身、轮毂、玻璃三个位置的色值修改。 那么比如说我们可以选中车身，然后在这里呢随便去选中自己想要的颜色，那么当颜色发生变化的时候，大家可以发现他的这个色质的改变啊，是同步进行的。 那么除了车身之外啊，对于轮毂也是一样的，我们可以随意选中我们轮毂想要的颜色，玻璃随意选中想要的玻璃颜色， 那么这些内容都是可以进行修改的。如果说我们可以把它改成一个黑武士，大家来看一看，是不是还是蛮帅的呀，对不对？ 然后我们来看一下他的代码，整个项码是基于 view 进行开发的，一共呢有不到三百行的代码内容，其中每一行代码我都给他详细的去写上了对应的注释，是不是相当的贴心了，要不给个三连支持一下呗。 那么想要获取代码的同学啊，可以点赞视频关注我后台私信，那么就可以领取代码了哟！

哈喽，小伙伴们好，接下来我们做一个平滑三 d 的倾斜效果，哎，是不是非常的炫酷呀，哎，只需要几句代码就可以完成这种效果喽。首先呢，我给小伙伴分析一下 结构是什么样子，放到一边，打开我们的代码，我们知道页面中有四个这样的盒子，所以说我有一个 cut， 里面包含着四个 div， 其中每个 div 上面有一张图片在这显示，还有一个 h 四是我们的标题，还有一个段落 p， 那是下面的文字好，结构非常清晰了，里面设置了相关的样式，通过法拉斯布局啊， 一个排版，想让它实现这种三 d 倾斜的效果，我们就可以通过一个 g s 库来实现。这个 g s 库呢，它的官方地址啊，是这个地址 vanilla tilt。 那到底怎么去使用呢？首先我们说先要引入一下我们 g s 这个库啊，然后里面已经写好了相关的我们的元素啊 div， 我们可以这么去做，哎， vanilla tilt， 然后把这个呢 ctrl 加 c， 然后呢到我们这里面去，这个啊， gs 文件我已经在这里面准备好了，我们引入进来，然后 ctrl 加 v， 哎，把这个代码呢拿过来， you adamant， 就是你的这个选择器，你想让哪一个盒子来进行倾斜就选哪一个，我们这个盒子呢叫做 cat item， 所以我们 ctrl c 复制一份啊，然后把它呢给它拿过来， ctrl 加 v， 好， ctrl 加字，保存一下，我们来看效果吧，然后我们鼠标一放上去，哎，这 旋转效果是不是立马就出来了，看起来非常简单啊。好了，那在这里它里面有两个选项，其中第一个选项叫 max， 这呢是呃，鼠标经过的时候，它可以旋转到角度， 默认是二十五度，你可以大一点，比如说我改成一个五十，这样的话，你看我鼠标带一经过，它的度数啊，就会更大一些。 speed 也说鼠标经过时，它旋转的速度让它稍微慢一点，设置为三千。现在呢，我们鼠标一经过，哎，它的速度就会变慢了一些。好了，那这个呢， 是我们设置的是不倾斜了。那只不过我们想让他有一个立体的感觉，像三 d 那种效果。来看一下我们的官方文档，我想创建一种视察的效果，是这个白色的盒子可以突出效果。在这里我需要去添加几句 css， 有一个 transform 里面的， 我复制一份，把它添加到你倾斜的元素身上，我们找到我们倾斜的元素是 cut item， 然后呢，我们 ctrl 加 v 给它拿过来。好，除了这个之外呢，它里面还有说明，可以在给他添加一种透视效果。 ctrl 加 vok， 这样添加了透视效果。我们再来看看我们的效果，是不是把一放上去， 哎，看起来还不是那么的明显。别忘了要想加透视还需要去加我们的 translate 啊。 z 轴是不是有一个更好看的这种立体效果呀？那这个呢，是添加到我们的内部元素，就是紫元素身上，我们 ctr 加 c 也复制一份。那我们想让里面的这些图片哎，或者是 h 四标题啊，更立体一些，所以 我们可以加在图片还是四线上。那图片呢？我卡上加 v， 让他传次力的 c 主变得更大一些。那默然是二十啊，我这稍微大一点，改成个三十像素，奇迹发生了，说明已经过我们这个图片是不是突出的感觉出来了？ 好了，那我们想让标题更加突出一些呢，找到 h 四再加上穿刺类的 c 就 ok 喽。好，这个呢，我们高一点改成个四十，比上面还要高一点。我们的页面如何添加这个效果？ 炫酷到爆呀。那只不过，哎，这样只是一个效果啊，我后面这些是不成效的哎。官方文档里面都做了个说明， 如果你想让我们所有啊，所有的这些元素啊都生效，那我们就不用 query select 了。 query select al 呢？可以设置所有的，所以我们只需要找到 c s s， 把 query select 改成一个 al 就可以了。 a l， 看看我们的效果。咦，哎，是不是就出来了呀，有点意思吧。

哈喽，大家好，又有几天没有更新这个视频了，今天就来这样一期三 d logo 这样一期视频。 这个呢主要就是通过这个 blender 去给它建模，然后通过这个 three gs 去把它导入到这个呃，场景里面，然后去使用添加一些材质、灯光什么的，就可以做出这样一个效果，加上一个鼠标，我去鼠标 滑动的时候，就是鼠标去移动的时候，场景会跟着这个鼠标移动来旋转，然后上下左右这样一个移动。呃，实际上不是场景啊，是这个相机在上下左右去移动。 好，话不多说，我们一步一步来看这个代码部分，嗯， h t m l 这边的话会引一个 c s 的文件，然后会引这个两个 g s 部分。这个 g s 部分呢，它上面这个实际上是让它去 input， 就是去去 设置它的一个引入 three g s 库文件的一些相关的东西，就相当于去把它当做一个，这样可以就是可以后面去 input 的一些东西，去把它的基础链接放这儿，然后下面就是我们写的这个 g s 文件。 呃，先不看这个 g s， 先看 c s s， c s 一上来的话就是简单的出手画，对吧？然后去让他这个 canvas 跟这个 body 去把它保持窗口的整体的宽高， 就相当于是占满整个窗口显示的位置，然后让他去背景颜色是黑的，然后就是免得穿帮，好吧，然后就 overflow， 就让他去超出的部分去隐藏掉 cs， 就这么简单。接下来就是这个 gs 部分， gs 一上来的话，会先引入这个 three gs 的一些酷的东西，就比如说这个它的 three gs 的本体， 然后加上它的一个控制器，然后它的一个模型的一个加载器，这些都是需要通过单独去引入才能使用的，好吧？就是通这个 input 去导入， 然后再往下一上来，我先记录了一下他的这个显示器的宽高，这个一半就方便等会去这个鼠标去上下左右移动的时候去计算他的一些宽高，就是这个 x 跟 y 的一个值，好吧？再往下的话就是这个三 d 场景了，先初始化三 d 场景， 就是这个先初始化一个有这么一个三 d 场景，然后他的一个场景的位置，我是让他稍微往下偏移一点的，就是这个底座往下一点，对吧？ 然后就是这个初始化相机部分，实际上就是有了这个相机我们才能看到整个场景的变化，就是这个三 d 的一些东西。呃，如果比较难理解的话，其实 通过这个 blender 去给大家讲一讲，其实就很容易理解了，主要就是这个整个的场景会有一个黑色的包裹，就是相当于是在渲染之后，它是一个黑色的一个场景，好吧？ 然后中间是一个带底座的一个呃， logo 部分，这个底座然后在下面是一个暗色的，对吧？然后会有一个光环，然后中间就是我这个葱的 logo， 然后再往后的话，就是这个会有一个相机的部分，就是左边我们屏幕看到的这个区域，就是通过相机去把它拍出来的，对吧？ 然后在这个场景的左边和右边分别有两盏灯光，这个灯光的话就是打亮这个场景的一些区域，加上这个这个 blender 里面我是加了两个平面光在顶 上跟后面的，当然在这个 g s 部分我是没有添加，我只添加了左边跟右边的两盏灯光，好回到这个 g s 部分。呃，初始化相机，刚才讲过了，就是初始化一个让我们能看到场景里面东西的一个相机， 当然这个相机这些东西就是这个所有 gs 的一些设置，比如说他的相机的宽高，然后去他的显示的距离之类的，然后他的显示角度，显示角度之类的，好吧？然后还有就是他的位置，相机的位置实际上就是在这个，呃，我们 在现在看到的这个位置，再往下就是这个相机更新的相机些东西，对吧？他的狂高比例之类的，然后再往下就是这个初始化渲染器，这个渲染器呢主要就是去渲染整个场景，就是把这个什么模型啊、灯光啊，杂七杂八东西渲染出来，就这么一个东西 一上来，他的默认我给他设置了一个抗锯齿，如果不开这个抗锯齿的话，他会有一些锯齿感，这个很难看。再往下就是这个渲染器的大小，就是同样是这个显示器的宽高，好吧？ 然后设置了他的一些允许的东西，比如说他允许这个阴影，然后允许他是一个物理光状，然后他的一些色彩的反应，色彩映射，对吧？然后再往下就是这个设置的像素比例，这个像素比例的话，就是这个 也相当于，就是相当于把他的这个抗计时给他调的合适这个显示器本身的这个像素比率， 然后最后去把它的这样一个 render， 就是这样一个渲染器，整体的这个渲染器它的一个动物元素直接扔到这个玻璃上，最后扔到玻璃上我们 f 十二就能看到，扔到玻璃上的 的话，它实际上就是渲染出一个开放式这样一个画布，对吧？然后通我们刚才在 cs 的这边的话，就通过这个开放式把它设置了一个宽高比例，所以在这他是直接就显示在整体的这个中间了。 再往下，呃，由于这个屏幕实际上是会有一个宽高的缩放的，对吧？就我们不同屏幕之间的比例是不一样的， 所以我就通过这个去监听他的一个屏幕比例的变换，去把他的一些相机的宽高啊，然后他的渲染器的宽高啊，都给他设置一个更新， 就是每次屏幕变换了之后，宽高变换了之后，他都去把这些更新一遍，当然去更新这个屏幕的宽高，这个二分之一的宽高，这个也是在这了。再往下 我去单独定义了两个材质部分，因为需要他亮起来，或者需要他一些反光什么的，是需要给这个模型定义一个材质的，这个材质也是 suvgs 的一个，就是物理材质，好吧？ 然后他有一个基础色啊，然后金属度啊，粗糙度啊，清漆啊，然后清漆，清漆实际上就是这个反光的一些东西，好吧？ 然后就是这么一个东西，这是一个底座的材质，然后这是一个光环材质，他也是一个物理的材质，然后他也基础色就是白色，然后发光也是白色，然后他的发光强度就是十，然后如果你想让他亮一点的话，实际上是可以调亮的，好吧？再往下就是这个加载模型的部分， 加载模型我们刚才在顶上实际上是引入了这样一个模型加载器的，当然这也是这个 three g s 的一些特定的一些加载 系工具，好吧？再往下的话就接着看，我们以初始化这个加载器 loader 这部分，然后去引入了一个模型文件，这个模型文件在这我放了两个这个位置关系，一个是本地的，一个是线上的，在线的，好吧？ 这个无所谓，你需要哪个就调哪个，本地的话就是用下面这个，然后如果是要放到网站上面的话，就用上面这个，好吧， 当然这是我的，不是别人的，好吧。再往下就是这个加载部分了，我们这定义了这个地址了之后，加载部分通过这个漏的去把它加载出来，然后就会得到这样一个模型，我们可以给他打印出来， 然后我们去便利这个模型里面就能拿到每一个就是这个大模型里面的每一个不同的小模型。每一个部分我们给光 环和底座分别设置杠上面定义的两个这样一个材质，然后再把整体的模型添加到场景当中，就相当于这样了。 好，再往下就是这个添加灯光的部分，我们刚才从这个 blender 这边就能看到左边会有一个大点的光，然后右边会有一个小点的光，实际上就是这个主光跟辅光部分。 左左边这样就添加了一个灯光，是五百的亮度，然后在这个位置在左边，然后给他添加到场景里面，右边的这个呢就是一百的亮度，然后在右边一点，然后同样把它添加到场景里面，就这样一个左边跟右边加上一个主光辅光，这样一个效果好。 再往下的话，实际上这个是开发的时候用的，就比如说这个它会添加一个这样一个坐标系的 标线，这样就方便我们看他的一个 xyz 的这样一个变换。好吧？这是一个开发的时候需要用的东西，还有上面的控制器，刚才其实引入了控制器，我们都没用这个控制器呢，实际上就是我们先把这个鼠标监听鼠标在这个东西把它先注视掉， 来看这个控制器的效果，好吧？控制器的话就是鼠标我在点住拖动的时候，他会有一个视角的切换，就能就是像内饰在开发的时候就能很明确的看到这个场景的变化，光影变化什么的，就可以切换不同的位置去查看，包括这个缩放，然后移动 可以看到这样一个效果，实际上跟我这个 blender 里面的效果实际上是差不多的，对吧？好，就这个就是在开发的时候用的一个控制器， 我们把这个控制器再给他注掉，然后把鼠标的部分给他放回来， 好，接着往下看。下面的话就是这个鼠标移动的事件，就是鼠标移动的时候视角会跟着切换这么一个东西，然后我们先记录它的一些鼠标的 x y 的值啊，然后它的一个 speed， 就是呃，移动的速度之类的，对吧？ 然后通过去监听他窗口的这样一个鼠标移动的事件去执行这样一个相当于是方法函数，好吧？ 接着往下总体的话就是通过这个 render， 就是通过这个整体的渲染，我们定义他一个渲染函数去渲染整个的画面，并把它显示出来，并持续的渲染。好吧？就这么一个东西，我们让他随时的都要记录这样一个相机的位置，实际上就是鼠标移动的时候，他 会有一个位置关系，随时都要去把它记录上，然后这个控制器更新呢？实际上是跟到上面这个控制器这的，然后我们不用的话就把它注点。再往下就是这个渲染器 render， 就是他初始上面不是初始化了一个渲染器吗？ 就像那就是在这个浏览器他的每一帧动画都要去运行一下这个 render 函数，然后像那就是他每一帧都去重新渲染一个画面出来，然后放到这个 canvas 里面去，对吧？ 当然这个画面刚开始的时候是需要手动的去调一下的，他才能去到这来，好吧？好。整体的话就这么一个东西， 嗯，说简单他也不简单，说难他其实也不难，他只是简单的导入了一个模型，然后加了一些灯光什么的，然后加了一个鼠标，就这么简单的一个三 d logo。 好，需要代码的话就可以在这个视频简介里面找一下，当然这个视频简介里面也会有我的像一个预览的一个链接，就这么个东西，拜拜。

最近一段时间，淄博烧烤爆红网络，人民网评都说烧烤到处有，淄博为啥火？这或许就是我们要学习的地方。固然有网友打卡助力，最关键的还是在于精耕细作的魄力吧，若琳也一直在朝着这个方向努力着，只为那一份精耕细作的魄力。 你的点赞加关注也是若琳前行的动力。今天若琳给大家带来的是 three two 中三 d 模型的导入， 三 d 模型的导入，用户可通过 web 端随心查看三 d 模型，双击关注不迷路。

分享一个 three 式例子，这个例子是把三 d 模型显示为点云效果，一个粉丝让我给他做一个类似的功能， 我说我要先调研写一个例子，发了我一个类似的功能，问我说多少钱，我看了一下，预计要一天时间完成，就收了两千，他说能不能便宜点，一千八百，他说成交。当我把这个例子做出来后，他 他说这个例子仅仅是证明我可以接这个项目，他要拿着这个项目跟客户谈，客户也是一个前端客户又找他的老板谈，等了两天没有下文了，例子原码我放在了我的博客，进入博客后直接搜索 three 就可以看到，你们说我是不是上当了？评论区加粉丝群领原码。

哈喽，大家好，我是老陈，有很多小伙伴说他们在买房的时候，或者是在租房的时候，他们可以看那个贝壳啊，贝壳的话是可以看到，就是说在手机上啊，或者是在网页上可以全景的看房，那 像这样子的一个效果，我们前端是如何去实现的呢？那好，那这一节的话我们就来说一说啊，这一个呃实现的一个方式啊，那在这里的话我们啊给做了一个案例啊，给大家 这个案例呢，就是一个就是三百六十度全景展示的一个效果，那大家可以看到，对吧？啊？那当然这里的话是一个外部的一个风景啊，当然的话如果你把它就是说啊，就是 图片转就变成这个室内的话，那么他就变成什么室内的一个展示了，那他的一个呃形式呢？是一样的， ok 啊，当然的话你可以什么全景看房吗？对吧？ 你看就像这样子， ok 啊，那把浏览器啊，进行一个全屏就可以展现这样子的一个效果了。好，那像这样子的一个实线的话，我们来看一下是怎么实现的？首先的话我们在这里面的话会使用到了我们的呃，飞行啊，前端非常 好玩的一个库啊，并且非常实用的一库，就是所以 js 这个 js 呢，他可以什么实现三维立体的一个呃效果啊，去呈现出来，那么在这里的话他有很多的这个案例啊， 啊，比如说啊，你可以看到，哎，你看，你看你网页上你可以什么实现这样子的一个随风摆动的这样子的一个什么？呃效果，对不对啊？非常的酷炫啊， ok， 除此之外呢啊，他有这个房子，对吧？啊，你可以看到，哎，这里有什么？这个， 呃，火车，对吧？从这里面出来，然后你还可以什么这个翻转看得到这个效果，对不对？ ok， 那么我们可以看到他在动啊，然后你也可以什么 把整个视图啊，这样子进行一个什么翻转了效果来看，所以的话呢，像我们啊看到的这个，比如说贝壳啊，他的这样一个效果，那实际上就是嘛，就是用 cs 啊去完成啊。 好，那我们现在话来看一下啊，这个是怎么是实线的？ ok， 那在 这里的话，那当然的话，我们首先的话是需要先把我们的就是，呃，所以 mini 点 js 以及啊我们通过 css 渲染啊，这个三 d 啊的这样子的这两个库啊，给他什么导入进来，这两个库呢？都是，呃，所以 js 的这个自带的啊，就是 说你可以直接从他官网上可以下载的下的到啊，那在这里的话，我就直接把什么下下来了，好吧， ok， 那下载下来之后呢，那么我还准备了这个 这几张图啊，就是说其实我们看到的一个全景的效果，实际上本质上就是由啊这六个图啊实现的，呃，其实他的一个整体的一个思路呢，就是 在我们的这个浏览器上啊，就是，呃做出一个什么正方形，对吧？一个立体的空间啊，那在这立体的空间里面呢，放上啊这六张图片，对吧？好，你就在中间啊，去看这六张图片啊 形成的一个什么效果，然后呢，你可以让什么让这个视野啊进行一个转动啊，那么就可以实现我们全景看房啊，看环境的 的一个效果，好吧？ ok， 好，那么我们啊知道了这样子的一个思路的话，那么我们就知道啊，怎么去实现他了。 ok， 那在这里的话，那么我们就什么就是把这两个啊， cs、 三 d、 rond 和这个 summit gs 给二维码引入进来， 那接着的话，那么我们啊就开始去写我们的这个 gs 吗？当然的话，我们的这个整体的这个结构啊，就刚刚我们说了我们要有六个面，所以的话，我们在这里的话，我们就什么写出了六个面啊？第一个面， 第二个面，第三个面，第四个面，第五个面，第六个面，对吧？然后每一个面的话，他的这个背景图片啊，就把我们刚刚的那那几张背景图片按照这个，呃，什么这个面啊，是在哪一面给他什么放上去啊？就 把这些资源啊放上去就可以了。好，所以的话就是一个 div 啊，放上一张图片啊，形成一个面 吧。啊，那这样的话，我们就可以等会就组成一个什么立方体，对不对？啊？是这样子的。好，那现在的话，我们这样子的一个结构我们已经知道了，好吧？然后呢，我们就，然后也把这两个库我们引入进来，那接下来的话我们就来写什么，我们的这个 cs 的不是这个 gs 啊，这个 gs。 好，那 js 的话，我们来看一下是怎么写的啊？那首先的话，我们啊就是，呃，首先啊，就是大家要知道，那 他这里的话，他就是说啊会有一个场景，那这个场景的话，当然就是由我们这个什么六个面所组成的一个什么正方形，他是一个什么场景啊？就所形成的一个空间 啊，一个场景， ok 啊，那这个场景的话，那也就说那我一个人啊去看一个立体的东西，那么 那我们在哪个地方看啊？那么我们就叫做摄像头啊，摄像头，那比如说我们在这中间，对吧？这个房子的中间或者正方形的中间，那 去看，那么所以的话，我们就需要什么把这个摄像头的位置摆放在这个中间，对吧？然后呢朝着哪个方向去什么拍照，对吧？那么我们就可以什么看到哪一面的一个效果啊？所以的话，这就是啊，我们啊 等会要什么要弄出一个摄像头来，然后弄出一个角度出来去什么拍照，对吧？然后呢啊，这是我们的这个用这个 cjs 去什么创造出我们的这个什么场景啊？然后呢这个什么渲染啊？就是通过哎，渲染出 我们所看到的这样子的一个效果，好吧？好， ok， 那首先的话，我们第一啊就是要通过我们的这个 啊，所以 gs 啊，去创造一个三维的一个项链啊，那这个三维项链的话就可以帮助我们，你看啊，就是我们的摄像头啊，就是什么摄像哪一个位置，对不对啊？摄像哪一个位置， 所以的话我们需要用这个创建一个什么三维的一个项链，那接着的话， 那么啊，我们在这里的话，那我们那这是一个单这个三维项链，我们是没有做任何操作的，就是一个啊，简单的三维项链啊，就初始化，然后呢我们就要什么？就是要设置角度吗？对不对？那比如说啊，我们那就是看正前方，或者是看这个左边右边， 对不对啊？那么我们啊就可以什么？就是，哎，你的一个角度啊？那这句话，哎，比如说我旋转九十度去看啊，那我就什么设置九十度，然后呢？这里的话，哎，我这个是什么水平去看啊？就是啊，比如说我们的这个眼光，对吧？那我们 原先我们是这样子的啊，这样一个人，对吧？我们比如说看在这个位置，对吧？啊？那这样子的话他就水平，那么我们就什么设置成零度，对吧？好，然后的话，那么我们在什么？我们在。呃，比如说我们选啊，这个 往上看，往下看，那么这样的话他也形成一个什么角度，对不对？ ok， 好，然后呢我们啊就是在旋转啊，旋转他也是一个角度，对吧？那所以的话我们就用这这这几个啊来去设置他，然后呢？呃，这个是我们的一个度数，然后呢 如果我们要改成弧度痣的话，那么啊你就是要把它对应起来啊？ ok， 好，那所以的话我们在这里的话，那么，呃，这个是角度啊？就是，哎，我说设置是多少角度？然后另外一个是什么是弧度啊？ ok， 好，那接着的话，那么我们就可以什么？就是初始画我们的这样子的一个操作，然后呢啊， 通过我们这个爱丽爱丽美啊去完成这个啊，动画啊，好，那首先的话第一就是初始化啊，他要做什么事情啊？第一件事情呢？就是把我们的这个摄像机啊给他什么干出来，对吧？ 的话呢？他是一个摄像机，那摄像机其实是什么？就是模仿一个人眼的一个投影的模式，那这里的话他就什么， 这里要传递这几个参数啊，第一个参数呢就是，呃，一个人的一个事业的一个角度啊，一个事业的角度，比如说 我们啊，比如说从一个相机啊，那我要看他的这样子的一个什么角度的话，那他这个角度是多少？也就是人脸的一个视野啊，就是说相当于是什么呢？相当于就是比如说我们现在这里是一个点，对吧？那么我们，哎， 眼睛他什么，他是打开来看的吗？对不对？那所以的话他的这样子的啊，所形成的一个视野的一个夹角啊，那么就是这个啊，度数啊。 ok， 那这一会我们就设置什么是七十五，对吧？ ok， 那接下来的话他就是设置我们的一个这个 s 背 啊，这个背的话他是一个什么呢？他是一个宽高比啊，就是说，哎，我们屏幕的宽高比是什么？那这个屏幕宽高比的话，那很简单，就是什么？当前你浏览器的一个宽高比，你所展现的一个东西吗？对不对？ ok， 那我们就什么把这个宽高比给他什么设置出来？ ok， 就是当前的这个宽度比上他当前的高度，那么这样的话就可以形成我们的一个什么视野吗？对不对？那就相当于是这样子， 对吧？哎，对吧？啊，那这样的话就形成了一个这样子的一个四方形的一个什么视野啊？那这样的话这个视野呢？他宽高比是多少？那就是这样子去显示，明白了吧？好， 那接着的话，那么我们啊，下一个啊，这个参数是什么呢？这个是啊，最近的一个焦距啊，一个是最远的一个焦距，也是说，呃， 哎，我们比如说看最前面啊，一像素是多少，对吧？然后看最外面啊，一千像素是多少，那这是一个焦距啊，就是能够调节的一个焦距。 ok， 好，那么我们就直接设置成一到一千就可以了。好，然后这里的话，我们是吗初始画一个，所以 啊，所以的这样子的一个 gs 的一个场景，对吧？啊？赛，好，这就是场景，那场景的话就根据什么我们刚才的这个，呃， 说到啊搞一个正方形，对吧？那在这一会我们就什么要搞一个正方形来完成这个场景。 ok， 接着的话这个就是什么他的一个呃，位置啊，就是说我们的六个面啊所设置的位置，那么就通过这个来进行操作。那，那因为咱们可以看到，就是说啊，比如说我们 以某一个为中心，对吧？以圆点啊，假设我们在这里面画一个，比如说这个是一个中心圆点，对吧？那假设我的这个整个屏幕，呃，就是他的一个大小是什么幺零二四，对吧？好，那这一画，那么我们比如上面就是什么五幺二，对吧？ 下面就是往负的五幺二啊，那么前面也是一样的，然后他这一块有什么 xy 轴吗？那所以的话我们就什么分别进行相对应的一个设置就可以了。然后呢你的这个面啊，再进什么相对应的一个旋转啊，那这里可以看到他什么旋转的话，也是有 什么三个轴啊，比如说 s 轴的旋转， y 轴的旋转，还有什么 j 轴的旋转啊，根据这个去设置就可以了。好，那通过这里面的这个什么设置，我们就把什么六个面啊，他的一个位置和旋转的一个方式改什么进行了一个设置 好，那形成了一个什么数组，对吧？ ok， 那么我们通过对这个数组啊，然后去什么去把我们啊， 这个啊，对象啊，就说我们这个图片的这个对象的这个具体的位置给他什么？去深圳出来，好，那这句话就是什么啊？ cs 而不再，然后呢？去创建一个元素，对吧？ ok， 好， 在哪里创建呢？在这个艾乐门这个元素上创建，对吧？然后的话这个，呃对象他的什么具体位置，就可以 去根据这个赛的 perfcison 他的位置来进行操作，对吧？啊？也就是说我们当前的这个来进行操作。 好，然后呢？他旋转的角度啊，也是通过这个 ruckyon 来进行旋转。好，然后呢？把那什么添，把这个什么我们的这个所创建出来的这个场景，对吧？啊？添，就把这个对象啊添加到我们的场景当中， 好，那这样的话做好了之后呢？我们在什么去创建一个什么啊？我们的这个所以 js 这个框架的这个渲染啊，对象啊，那渲染对象的话他可以什么？就是，哎，你要渲染的这个宽高 是是多少，对吧？那我们创建一下，好，然后呢我们就什么，我们就在这里面追，把这个渲染的这个艾伦本对象啊，给什么创建到我们的波底上，好，然后呢？ 我们在整体的去监听一下我们鼠标的滚动，还有我们鼠标的这个移动，那完成我们的什么这个拖动啊，比如说拖动上啊，拖动下，这样子的一个效果，对吧？啊？ ok， 啊，那像这样子拖动上拖动下啊，这样去完成， ok， 然后在这里的话，我们啊，就是，呃， 既然做好了这一个啊，初始化做好了，对吧？啊？你看我，我这个场景做好了啊，初始化做好了啊，我们这个事件也监听了，那是不是开始要渲染了，对不对啊？那就是，哎，你妹的啊，那 这个 adm 的话，他就是，呃通过请求动画针啊，就是一针一针的去来进行渲染，那这个一针一针到底要渲染成什么，就要根据什么我们的这个角度，对吧？啊？将这个是我们的这个角 度啊，将角度转成我们的弧度啊，转成弧度，好啊，这个的话也是一样的，将角度啊，就是在这里啊，就是将角度，通过这个方法将角度转化成弧度， ok， 因为我们的这个啊，摄像机啊，他是什么？他是看弧度的，所以的话，呃，他是看弧度制啊，所以的话他通过这个啊，这两个我们所设置的，然后去什么去转换成 他的一个弧度，然后呢？再把它转换成我们的 x、 y、 e、 z 啊，也就说我们前面这里面 定义的，对吧？这个三维的一个项链啊，他到底是啊，切换到哪一个轴，对吧？切换到哪一个轴啊，就是哪一个项链，他到底是往哪个方向去看的，对不对啊？就像这样子，哎，我从这里啊，对啊，这是一个项链，对吧？ 那我就什么，我从我的摄像机就什么往这个方向去看吗？对不对？ ok， 那那么我这个项链是由什么决定的呢？那当然是由什么？空，这个什么，我们这个是圆点吗？零零零零，对吧？然后另外一个什么 x、 y 一键他的一个坐标，对吧？那通过这两点，那我就什么通过变成一个什么项链，然后这就是什么一条轴，然后呢这个什么摄像机就按这个什么方向去拍摄去照啊，就可以了。好，那在这里的话，那么我就什么把这个摄像机啊，这个啊 x、 y、 z 啊计算出来，计算出来之后呢？那么我们什么调用这个下相机看这个方向，对吧？啊？看这个项链啊，他给。好，那这样的话啊，我们看了这个，那么我们往这个方向去看了，那我就知道我要渲染什么了， 对吧？那 ok， 那么调用这个 red 的这个函，这个对象啊的 red 函数，把这个场景以及摄像机啊他所要拍照的位置给他什么渲染出来就可以了。 好，那 ok， 那就是这么去操作的，然后这里面的话他就有，比如说我们啊，就是当这个窗口调整的时候，那么他也可以什么调整整个的这个视野的宽高啊？ 就通过这一个方法，然后呢当我们鼠标按下去的时候，那么我们要什么获取他什么？就是说，哎，鼠标按下去，然后移动的话，那么我就要获取他的什么 x 和 y 轴，那么啊去计算出我的这个啊角度啊，我转转 转了多少角度，然后呢我这个上下移了多少角度，那么通过这个方式去计算出来，然后呢当我鼠标弹起来时候，要把什么这个事件啊要给他取消掉，就是不让他什么再改变我 这个什么角度了，对吧？ ok， 那滚轮也是一样的啊，滚轮也是一样的，也是一个视野的一个角度啊。 ok， 好，那这样的话，我们就可以什么实现这样子的一个三维立体的一个效果啊？通过这个方式。 好，那这样的话，那么我们也可以就是说啊。呃，学习了这个可以什么？再好好的看一下这个，所以 gs 的一些案例和一些文档啊，去帮助我们去深化的去了解所以 gs 的相关的一些功能啊，非常的好玩，对吧？啊？好的，那么我们这节课就讲解到这里，拜拜。

现在有越来越多的人想去学习网站的三维效果，三维场景的开发，但是不知道该学什么，该怎么学。那接下来呢，几期的视频，我就来分享一下我自己关于三维网站开发方面的学习经验。 那在我看来，三维网站开发的学习呢，可以大致分为三个阶段，基础、进阶、高级。 这期视频呢，我们就先来聊聊基础阶段。那这个阶段呢，主要就是要掌握在网站上加入一些三维的场景啊，三维的元素，同时让这些场景或者说元素啊，他具有一些可以交互的效果。 这些交互的效果呢，在基础阶段的话，主要就是局限在三维元素的旋转啊，位移啊，缩放啊等等基础的变化。那有些同学可能听到这里会觉得很不可思议啊，可能会忍不住会有一个疑问，你说的这些真 真的是基础阶段的吗？那其实这个所谓的基础阶段，你不要被我这个基础这两个字给骗了，那这个阶段的内容呢，只是相对于整个啊，整个三维开发的知识内容来说的，是相对基础的，也是相对容易掌握的。注意啊，这两个相对， 但是只要你用的好啊，也是能做出很多非常出彩的网站效果的，那要掌握这样的开发能力呢？那么前端必学的三门语言， 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 的基本使用，然后还有就是学会如何导出适合网页端使用的三维模型。好， 那这期的视频内容呢就到这里了，那下一期呢，我们再来聊一聊三维网站开发的这个进阶阶段啊，我们要学些什么啊？怎么学？