顶点UV坐标、纹理贴图

创建纹理贴图

const geometry = new THREE.PlaneGeometry(200, 100); 
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./earth.jpg');
const material = new THREE.MeshLambertMaterial({
    // 设置纹理贴图：Texture对象作为材质map属性的属性值
    map: texture,//map表示材质的颜色贴图属性
});

纹理贴图UV坐标范围，uv坐标作用

自定义顶点UVgeometry.attributes.uv

/**纹理坐标0~1之间随意定义*/
const uvs = new Float32Array([
    0, 0, //图片左下角
    1, 0, //图片右下角
    1, 1, //图片右上角
    0, 1, //图片左上角
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标
// UA坐标作用
//UV坐标的范围通常是从(0,0)到(1,1)，其中(0,0)对应纹理的左下角，(1,1)对应纹理的右上角。这些坐在
//渲染过程中起到了桥梁的作用，将2D的纹理图像准确地应用到3D模型表面。UV坐标是用于映射2D纹理到3D模型的坐标系统
### 获取纹理贴图四分之一
const uvs = new Float32Array([
    0, 0, 
    0.5, 0, 
    0.5, 0.5, 
    0, 0.5, 
]);