Three js笔记

纹理

在three js中，所有的纹理色彩空间都是线性空间，这个对于法线、粗造度以及金属
纹理没问题，但对于基本的纹理（map)则需要调整为srgb色彩空间。如下：

textureInstance.colorSpace = THREE.SRGBColorSpace

更改前默认的效果

设置后效果

2D平面邻近点法重新计算法线

通常用于在着色器中变换后需要获得最新的法线场景

 // 邻近点法重新计算点法线
    // 偏移量
    float shift = 0.0001;
    vec3 positionA = csm_Position + vec3(shift, 0.0, 0.0);
    vec3 positionB = csm_Position + vec3(0.0, 0.0, -shift);
    
 // elevation
    float elevation = 变换;

    // 变换邻近点
    positionA.y = 变换;
    positionB.y = 变换;
    
    // 计算变换后的新法线
    vec3 toA = normalize(positionA - csm_Position);
    vec3 toB = normalize(positionB - csm_Position);
    
    normal = cross(toA, toB);

曲面邻近点法重新计算法线的计算与2D的类似，需要提前计算好顶点的切线向量

// tangent为在cpu计算好的切线，以attribute形式传入
vec3 biTangent = cross(normal, tangent.xyz);
    float shift = 0.01;

    vec3 positionA = csm_Position + tangent + shift;
    vec3 positionB = csm_Position + biTangent + shift; 

    float wobble = 变换;
    // 使用噪声更新位置
    csm_Position += wobble ;

    positionA += 变换 ;
    positionB += 变换 ;

    // 计算两个点向量距离
    vec3 toA = normalize(positionA - csm_Position);
    vec3 toB = normalize(positionB - csm_Position);

    // 计算两向量的叉积，以获得垂直于此两向量构成的平面向量
    vec3 computeredNormal = cross(toA, toB);
    csm_Normal = computeredNormal;

粒子变形效果

从一个形状慢慢变形为另一个形状的效果，实现过程如下
1：从bleander中制作一个模块，并在此模型中创建多个独立的几何对象。
2：导入到thress中。
3：将导入的模型中所有几何对像的顶点数组提取并暂存。

const positions = gltf.sene.children.map(child=>child.geometry.attributes.position

4：找到最大顶数组的长度，建立新的顶点数据，长度都 为最大，并将模型中的顶点数据对应的填充到各自的新数组中。不够的随机从对应的模型顶点数据取一个，注意步进为3（一个顶点由3个数据组成，xyz)。


}

5：创建缓存几何对象，并显示第一个。

6：将新顶点数据的第二个（或想要变形的）以atrribute的形式设置到threejs中（webgl中的attribute)，然后在顶点着色器中(vertext.glsl）设置相应的attribute属性来接收。

7：在顶点着色器中定义一个混合因子，用于混合两个顶点，可以理解为从当前显示的几何对像向新显示的几何对象的过形状过渡因子。然后再用混合函数混合两个顶点。
8：通过控制混合因子的大小（1到1）来显示过渡效果，0为原几何对象，1为新几何对象（如果混合时是将原几何对象放参数1,新几何对象放参数2）。