EtherCoding-优快云博客

原创 threeJs学习笔记（八）

注意片段着色器是针对每个片段（像素）去计算的，也可以理解为有多少个顶点就会执行多少次片段着色器代码。所以，可以直接利用这个值来实现渐变，在顶点着色器中通过。之前在片段着色器里通过下面的代码给平面上了红色。所以只要想办法给每个顶点设置不同的。那如果需要一个黑到白的渐变色呢？值，就可以实现简单的渐变颜色了。属性，这个属性记录的是几何体的。要实现这个效果，就要先知道。，所以创建时可以使用。

2024-10-22 21:06:54 923

比如要将场景渲染到1920 * 1080的画面上，开启抗锯齿后就是先将场景渲染到3840 * 2160的画面上后再缩放至1920 * 1080，这样子的抗锯齿效果显著，但是性能开销显然就非常大了。，多重采样抗锯齿，原理是在每个像素周围进行多次采样来减少锯齿现象，实现上相对简单，但是因为只在像素中心附近进行采样，所以无法完全消除所有锯齿。2X SSAA，就代表渲染到2倍于原始分辨率的场景，每一个像素相当于放大了 2 x 2 = 4倍，渲染的像素总数就是原来的4倍。

2024-10-11 20:48:43 1315

原创 threeJs学习笔记（六）

格式的模型正在逐渐成为标准，它内部使用的材质通常为PBR材质(Physically Based Realistic)，PBR材质也会逐渐成为标准的使用材质。文件，其中包含了一个模型的所有信息，它是二进制的，体积相对更小；压缩是一种用于3D图形的数据压缩算法，主要用于3D模型的传输和存储，它由google开发而来，开源。格式，它可以存储更多的数据，比如一整个场景的对象、对象嵌套、骨骼、动画等。模型默认是PBR材质的，要让他显示需要外部光源，点击顶栏的。现在我们要导入的是鸭子的模型，但是这个模型的位置在。

2024-10-10 15:11:09 1928

原创 threejs学习笔记（五）

在当前案例中，几何体之间的间距是固定的，在页面上的体现约等于视口的高度，所以要判断屏幕滚动到了第几个几何体，可以通过对。所以为了便于用户理解，要么对X轴取反，要么对Y轴取反，但是对Y轴取反才更符合人对于视角的认知。的效果实现了，但是快与慢的区别还不够明显，所以这里可以再调整一下变化的幅度，通过乘上一个。注意在Y轴方向的取负数操作，因为我们移动的是摄像机，所以相对于原点而言，水平方向。的效果，甚至会因为惯性的存在，让摄像机移动后有一点滞后性的效果。初始时，摄像机在Y轴的位置为0，页面滚动的值是从。

2024-09-18 17:01:09 899

原创 threeJs学习笔记（四）

但是这样简单地设置还不够，可能会出现一些问题，比如下面这张图里，有的粒子图片的边缘还存在，会遮挡后面的粒子，有的粒子是正常的。渲染器会在渲染每个像素（物体就是若干个像素绘制出来的）时，计算已经绘制出来的像素与当前要绘制的像素的深度关系。，则物体不会更新深度缓冲区，这意味着之后渲染的对象可能会忽略这个物体的存在，并可能被错误地渲染在其之上。时，物体将会更新深度缓冲区，使得后来渲染的对象可以根据新的深度值进行深度测试。可以看到，粒子的颜色正确地使用上了，现在粒子重叠时是遮挡+覆盖的效果，可以配置。

2024-09-11 14:23:19 1263

原创 threeJs学习笔记（三）

所以，当来到性能优化层面时，灯光的实现可以考虑在一开始进行3D建模时就给纹理附加上灯光，而不是使用。里的光源实现，不过这样的问题是做不到实时的灯光移动，对于需要动态变化的场景可能就略有欠缺。平行光是从单一方向照射而来的光，默认平行光来源为正上方：（0，1，0）的位置。对应的是光的衰减值，通常情况下使用的默认的就行，默认值是2，2已经是。注意看，半球光在光交界处的颜色是渐变的，即两种光深浅的交融。这个场景内的几何体，都是使用原本就有灯光效果的纹理实现的。，光的默认位置也是（0，1，0）

2024-09-07 14:41:28 893

原创 threejs学习笔记（二）

拿灯光举例，之所以能看到几何体的某个面，是因为那个面的法线恰好指向我们自己或光源的方向，而其他非正面的方向就有不同程度的阴影或看不到（背面），这就是。是一种GPU的计算策略，内部会将一张纹理图不断地拆解成若干个小单元，最后叠加起来构成纹理，同时这样也使得渲染性能得以提升。看左上角的图，一个4x4的正方形可以由4个2x2的正方形构成，一个2x2的正方形可以由4个1x1的正方形构成。的像素为止，所以，使用纹理图时，要确保纹理图的宽高为2的幂次方，如256、512、1024等，否则在。

2024-08-30 09:21:40 731

原创 threeJS学习笔记（一）

我们人的眼睛就是一台摄像机，我们在正前方画一条垂直于地面直线，那么必定存在两个点使得点到人眼形成的角度之和为75度，以这个75度角发散出去能看到的范围就是。位置，所以此时相当于我们处于立方体的内部，那么从立方体内部往外看，自然什么都看不到，这时候我们需要把摄像机向后移或者把物体往前移动（也就是在Z轴上移动）即可。第二个参数是宽高比，从上图可以看到，看出去的视角范围实际上是一个视锥，底部都是矩形的视觉区域，而每个矩形的宽高比必定为指定的宽高比。此外，threeJS内部也提供了解决方案，使用内置的。

2024-07-28 23:28:20 2185 1

原创 umi环境相关配置踩坑

配置注释掉重跑，即本地访问时让他使用本地的。项目跑起来后，可以看到页面是注入了。本地运行公司项目时，控制台报错，所以最终的解决办法也是把上面的。公司项目用的技术栈是。

2024-07-17 17:34:11 389

原创 react学习笔记

不是响应式，所以他不会监听直接对对象、数组的修改，通常都需要整个替换来实现，官方建议使用。中的含义是“记忆”，或可以理解为“状态”，但是不是。时会触发组件重新渲染，即组件内部的表达式会重新计算。树结构没有发生变化，相同的位置还是渲染了相同的组件。想硬要他们保留的话，那可以给他们设置一个相同的。并不是响应式的，在下面的例子中，如果不调用。但是当我这么一改，他就不会清空那个位置的。渲染两个计数器，第二个计数器的。没有变化，那么这个组件内部的。渲染出来的东西，一般被称作。它的原理是，直接修改。

2024-07-10 20:19:34 1359

原创 vue2关键源码学习笔记

如果有render，就不会进行模板解析（因为render方法执行就可以获取到VNode了）而对于数组中的数据，则是通过一次遍历，来对数组中的数据进行遍历实现深层拦截，核心方法是。而数组是用函数拦截的方式去实现的，直接在数组数据的原型上挂载自己拦截的。内的对象进行深度劫持（shallow默认是false的）中，主要是对对象按key进行遍历，逐个属性进行数据拦截。属性，获取到对应要挂载的节点，然后使用。，跳了比较多的层，但核心是。进行解析的核心方法，其中的。进行初始化时，会调用。时，获取到的实际上是。

2024-06-29 23:02:43 1594

weixin_43024757的博客