Category: Threejs

three.js的物体是通过canvas渲染的，在不同的屏幕尺寸上我们通常需要改变canvas的大小来让场景显示完整。 回忆一下我们在配置相机时的代码 这里的aspect就是画布的宽高比，因此我们也需要动态调整这个aspect的值，才能让物体在屏幕拉伸时保持原来的形状 另外的一个问题是物体出现了块状化，即物体边缘出现锯齿。 这是因为canvas其实有两个尺寸，一个是显示尺寸，一个是分辨率尺寸。 我们改变了显示尺寸而分辨率尺寸并没有相应的跟随改变。 在three.js中我们有renderer.setSize来帮助改变canvas的分辨率尺寸(drawing buffer)

mesh由两部分组成，geometry几何体和material材质 Geometry 我们知道几何体都是有点构成的，在三维场景中，点的坐标由x,y,z三个值组成，所以要绘制一个点，需要提供一个有三个数值组成的坐标{x, y, z}，以此类推，三角形则需要三组坐标{x1, y1, z1, x2, y2, z2, x3, y3, z3}，正方形需要四组…. threejs为我们封装好了基本的几何图形，如BoxGeometry, CircleGeometry, PlaneGeometry, SphereGeometry等常用图形，我们只需要提供组成图形的基本信息如长、宽、高、半径等等就可构建出图形 另外threejs也提供了一个可供我们自己创建图形的BufferGeometry，我们可以提供点的坐标来自由组合图形 以上的六个点可以组成一个自定义图形 Material 接下来轮到材质了，材质控制的是物体的外观，常见的材质包括 物体的移动 控制物体的移动，我们通常用到四个属性 移动物体示例： 动画效果 这里需要用到的是tween这个利器了，实现方法

之所以用这个题目是觉得threejs无论学了多久永远都是学了忘，忘了再学，在项目中没有实践永远都是隔岸观火，没办法深入进去，这次再挣扎一下，做个学习笔记吧，希望能加深些印象。 本系列笔记是跟随Bruno Simons大佬边学习边做的笔记 入门开始，先来些枯燥的原理做开胃菜吧😈 说起threejs，是web领域最负盛名的3d引擎框架，和其他的如babylon.js不同，他们主打的是做游戏，因此有非常丰富的游戏常用接口，而threejs则更加底层，实现的是帮助我们打通和webGL连接的通道，毕竟webgl实在太难搞了，写一个小三角行都要好几十行代码。 threejs实际上就是封装好了接口，让我们可以直接调用接口实现画图。 提到webgl就不得不说到最新的webgpu概念了，据业界大佬传闻webgpu标准很快就会确定了，那时我们web3d很可能也有大展拳脚的机会了，哈哈哈哈哈….. 话不多说，回归正题。 在threejs中，创建一个3d的场景需要以下几大要素： 除此之外还有一些非必要的元素，control — 控制器， light — 光源 等等可以给场景添加额外的功能