three Mesh Points / 网格 点

在 Three.js 中，Points 是一种使用点（Points）而不是表面渲染几何体的方式。通过 THREE.Points 类，你可以创建一个由几何体顶点组成的点云（Point Cloud），每个顶点被渲染为一个点。与传统的网格（THREE.Mesh）不同，THREE.Points 不会渲染几何体的面，而是仅渲染其顶点。
在 Three.js 中，THREE.Mesh 是一个用于渲染几何体表面的基础类。与 THREE.Points 只渲染几何体的顶点不同，THREE.Mesh 会渲染几何体的完整表面（由顶点和面的集合构成）。Mesh 通常由几何体（Geometry 或 BufferGeometry）和材质（Material）组成。

在使用变形时需要注意，变形只相对于同一个几何体类型的属性的变化，对于不同几何体的变形需要使用动画功能实现

Mesh 有五个属性三个方法

Mesh( geometry : BufferGeometry, material : Material ) geometry —— （可选）BufferGeometry的实例，默认值是一个新的BufferGeometry。material —— （可选）一个Material，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial。

    // 创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);  // 立方体
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  // 绿色材质
    // 创建网格对象
    const mesh = new THREE.Mesh(geometry, material);
    // 将网格添加到场景中
    scene.add(mesh);

属性

• geometry : BufferGeometry BufferGeometry 的实例或者派生类，定义了物体的结构。
• isMesh : Boolean 判断是网格
• material : Material 由Material基类或者一个包含材质的数组派生而来的材质实例，定义了物体的外观。默认值是一个MeshBasicMaterial。
• morphTargetInfluences : Array 一个包含有权重（值一般在0-1范围内）的数组，指定应用了多少变形。 默认情况下是未定义的，但是会被updateMorphTargets重置为一个空数组。

    // 渲染场景
    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const sphereGeometry = new THREE.BoxGeometry(20, 2, 10);
    const coneGeometry = new THREE.BoxGeometry(2, 20, 10);
    // 将不同的形变目标添加到立方体几何体中
    cubeGeometry.morphAttributes.position = [
        new THREE.Float32BufferAttribute(sphereGeometry.attributes.position.array, 3),
        new THREE.Float32BufferAttribute(coneGeometry.attributes.position.array, 3)
    ];
    // 创建形变目标字典
    cubeGeometry.morphTargetDictionary = {
        'sphere': 0,
        'cone': 1
    };
    // 创建网格材质，支持形变
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, morphTargets: true });
    // 创建网格对象
    const mesh = new THREE.Mesh(cubeGeometry, material);
    const controls = new OrbitControls(camera, renderer.domElement);
    // 添加网格到场景
    scene.add(mesh);
    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        // 动态切换形变目标
        const time = Date.now() * 0.001;
        mesh.morphTargetInfluences[cubeGeometry.morphTargetDictionary['sphere']] = (Math.sin(time) + 1) / 2;
        mesh.morphTargetInfluences[cubeGeometry.morphTargetDictionary['cone']] = (Math.cos(time) + 1) / 2;
        renderer.render(scene, camera);
    }
    animate();

• morphTargetDictionary : Object 基于morphTarget.name属性的morphTargets字典。 默认情况下是未定义的，但是会被updateMorphTargets重建。

方法 共有方法请参见其基类Object3D。

• getVertexPosition ( index : Integer, target : Vector3 ) : Vector3 获取给定索引处顶点的局部空间位置，同时考虑变形目标和蒙皮的当前动画状态。

    // 创建立方体几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 创建一个目标向量
    const target = new THREE.Vector3();
    const vertexIndex = 0; // 选择第一个顶点
    // 使用 getVertexPosition 方法获取顶点位置
    const vertexPosition = cube.getVertexPosition(vertexIndex, target);
    console.log(`Vertex Position: ${vertexPosition.x}, ${vertexPosition.y}, ${vertexPosition.z}`); // Vertex Position: 0.5, 0.5, 0.5

• raycast ( raycaster : Raycaster, intersects : Array ) : undefined 在一条投射出去的Ray（射线）和这个网格之间产生交互。 Raycaster.intersectObject将会调用这个方法。使用方法
• updateMorphTargets () : undefined 更新morphTargets，使其不对对象产生影响，重置morphTargetInfluences and morphTargetDictionary属性。

Points 有五个属性两个方法

Points( geometry : BufferGeometry, material : Material ) geometry —— （可选）是一个BufferGeometry的实例，默认值是一个新的BufferGeometry。 material —— （可选） 是一个对象，默认值是一个PointsMaterial。

    // 创建粒子的位置
    const particleCount = 1000;
    const positions = new Float32Array(particleCount * 3);
    for (let i = 0; i < particleCount * 3; i++) {
        positions[i] = (Math.random() - 0.5) * 10; // 生成随机位置
    }
    // 创建 BufferGeometry
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    // 创建点材质
    const material = new THREE.PointsMaterial({ color: 0xff0000, size: 0.1 });
    // 创建 Points 对象
    const points = new THREE.Points(geometry, material);
    scene.add(points);

属性 共有属性请参见其基类Object3D。

• geometry : BufferGeometry 一个BufferGeometry的实例（或者派生类），定义了物体的结构。
• isPoints : Boolean 查看是 Points 类
• material : Material Material的实例。定义了物体的外观。默认值是一个的PointsMaterial。
• morphTargetInfluences : Array 一个包含有权重（值一般在0-1范围内）的数组，指定应用了多少变形。 默认情况下是未定义的，但是会被updateMorphTargets重置为一个空数组。
• morphTargetDictionary : Object 基于morphTarget.name属性的morphTargets字典。 默认情况下是未定义的，但是会被updateMorphTargets重建。

方法 共有方法请参见其基类Object3D。

• raycast ( raycaster : Raycaster, intersects : Array ) : undefined 在一条投射出去的Ray（射线）和点之间产生交互。 Raycaster.intersectObject将会调用这个方法。
• updateMorphTargets () : undefined 更新morphTargets，使其不对对象产生影响，重置morphTargetInfluences 和 morphTargetDictionary属性。