4.three.js的几何体、纹理、光源、材质、uv属性 讲义

1.如何手动创建几何体？

/**
 * step1.新建空几何体 BufferGeometry：
 *    1.Three.js 底层几何体容器，直接对应 WebGL 顶点缓冲区；
 *    2.刚创建时是空的，没有顶点、UV、法线等任何数据，需要手动挂载顶点属性；
 **/
const geometry = new THREE.BufferGeometry();

/**
 * step2.生成浮点顶点数组 Float32Array：
 *   1.32位浮点型数组，WebGL标准顶点数据格式，GPU只能读取这种二进制数组，不能用普通[]数组；
 **/
const vertices = new Float32Array([
   -1.0, -1.0, 1.0, 
    1.0, -1.0, 1.0, 
    1.0, 1.0, 1.0, 
    
    1.0, 1.0, 1.0, 
   -1.0, 1.0, 1.0,
   -1.0, -1.0, 1.0,
]);

/**
 * step3.将顶点数据挂载到几何体的 position 属性：
 *   1.setAttribute：给几何体绑定顶点属性，GPU渲染时读取对应属性；
 *   2.position：固定关键字，代表顶点坐标属性，着色器内置识别；
 *   3.THREE.BufferAttribute(数组, 每个顶点占用3个浮点数)；
 **/
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

2.随机生成50个三角形

for (let i = 0; i < 50; i++) {
    // step1.每一个三角形，需要3个顶点，每个顶点需要3个值
    const geometry = new THREE.BufferGeometry();
    const positionArray = new Float32Array(9);
    for (let j = 0; j < 9; j++) {
        positionArray[j] = Math.random() * 10 - 5;
    }
    geometry.setAttribute(
        "position",
        new THREE.BufferAttribute(positionArray, 3)
    );
    
    // step2.生成随机颜色
    let color = new THREE.Color(Math.random(), Math.random(), Math.random());
    const material = new THREE.MeshBasicMaterial({
        color: color,
        transparent: true,
        opacity: 0.5,
    });
    
    // step3.根据几何体和材质创建物体
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

3.基础材质如何添加纹理？

/**
 * step1.导入纹理
 *     TextureLoader：纹理加载器，专用图片加载工具，加载图片生成 纹理对象Texture；
 *     .load(图片路径)：异步加载本地图片，加载完成后返回 纹理对象；
 *
 **/
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

// step2.添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);

// step3.材质
/**
 *  重要点：
 *      MeshBasicMaterial：基础材质，不受光照影响，永远亮；
 *      MeshLambert/MeshStandard：需要光源，否则模型全黑；
 **/
const basicMaterial = new THREE.MeshBasicMaterial({
   // 基础色是黄色：如果门把手是透明的，门把手就是黄色的门把手
   color: "#ffff00",
   // 纹理贴图通道，图片会贴在模型表面
   map: doorColorTexture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);