yong_su的博客

Three.js是用JavaScript编写的一个第三方库，用于实现很多的3D功能，它是基于WebGL进行封装的。而WebGL又是由OpenGL ES2.0+Javascript进行封装的，而OpenGLES 2.0又是OpenGL 三维图形 API 的一个子集，而OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。

长方体尺寸参数，一般比你要渲染的范围稍微大一些即可，过小阴影不显示或显示不完整，过大很多可能阴影偏模糊，你可以比较下面两个参数的阴影渲染差异。比如光线是从斜上方照射下来，模型y方向高度100左右，这时候y可以设置为100左右，xz也可以根据渲染范围先给个大概尺寸。其实平行光阴影范围的设置，你可以类比以前正投影机位置、长方体可视化空间的设置。渲染范围可以都先给个几百量级的值，不用精准，先设置，在微调。你可以比较测试两个不同的光源位置，对应阴影渲染效果。的位置，所以要根据渲染范围调整光源的位置。

上一节学习了物体的包围盒与包围球，这一节在此基础上学习多个物体的包围盒，及两个新的几何体，api较多，学习时需仔细认真。

描述一个长方体包围盒需要通过xyz坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围[Zmin,Zmax],会是这样的，就相当于基于整个模型,本地和世界的关系类似于css种绝对定位和相对定位基于的父元素不一样，得到的包围盒也就不一样。对比图一图二我们可以发现一个包围球基于了模型的包围盒，另一个基于了模型中心。获取的世界坐标，是模型相对世界坐标系的坐标，也就是该对象及其父对象所有。为什么要获取几何体中心这和包围球有什么关系？一个模型对象的世界矩阵属性。

先来理解一下数学上的法线概念，比如一个平面，法线的就是该平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。Three.js中法线是通过顶点定义，默认情况下，每个顶点都有一个法线数据，就像每一个顶点都有一个位置数据。Three.js中法线和数学中法线概念相似，只是定义的时候更灵活，会根据需要进行调整。顶点法线(法向量)数据。

UV映射是一种将二维纹理映射到三维模型表面的技术。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U, VU和V分别表示纹理坐标的水平和垂直方向。这些坐标用于将纹理图像上的像素与模型表面上的点进行对应。通过UV映射，我们可以在模型上精确地控制纹理的位置和方向。学习自定义顶点UV坐标之前，首先保证你对BufferGeometry的顶点数据、纹理贴图都有一定的理解。可回顾基础入门（四）。顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。

TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。

返回的所有结果都比 far 更近。远不能 低于 NEAR。默认值为 Infinity。— 返回的所有结果都比 near 更远。光线投射用于鼠标拾取（确定鼠标在 3D 空间中的哪些对象上）等。— 光线投射的原点向量。

GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。会返回一个gltf对象，作为参数2函数的参数，改gltf对象可以包含模型、动画等信息，本节课你只需要先了解gltf的场景属性。就可以实例化一个gltf的加载器对象。就可以加载外部的gltf模型。

scene.fog = new THREE.Fog(‘#dddddd’, 0.5, 50) //颜色，浓度，距离多少米。此类包含定义指数平方雾的参数，该雾在摄像机附近提供清晰的视图，并在远离摄像机的地方提供比指数增密更快的雾。scene.fog = new THREE.FogExp2(‘#dddddd’, 0.1)//颜色，指数。此类包含定义线性雾的参数，即，线性雾随距离的增加而线性增加。

不过你不设置任何光源，只设置环境贴图，物体表面也能看到。虽然环境贴图不是光源，但是会模拟物体周围环境的反射光。一般三维场景需要添加环境光，来整体调节三维场景的明暗，环境光强度可以通过参数2，或光照强度属性。如果你不设置任何光源和环境贴图，gltf模型默认PBR材质不会正常显示，一片漆黑。通过设置纹理贴图各个参数来实现控制以上效果，往下继续学习吧。实际开发，可以先给一个大概的值，然后通过gui交互界面微调。对应添加至材质的属性即可（这里需要文件的可以私我）的值可以通过gui交互界面调节。

三维坐标系辅助坐标系物体位移父子元素物体的缩放全屏控制本文使用Three.js基于Vue3+vite开发调试。

是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助。像下面这样，可以进行分组，点击、单选、拖拽选取值、颜色调整。可以快速创建控制三维场景的UI交互界面。

类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义。几何体三角形数量或者说顶点数量直接影响Three.js的渲染性能，在不影响渲染效果的情况下，一般尽量越少越好。参数2、3分别代表宽、高度两个方向上的细分数，默认32,16，具体多少以你所用版本为准。对于一个曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量却越多。把一个矩形分为2份，每个矩形2个三角形，总共就是4个三角形。相关的参数，这里以矩形平面几何体。