Threejs' BufferGeometry realizes cool triangles

import * as THREE from "three";
// 导入轨道控制器
import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui 操作变量界面库
import * as dat from "dat.gui"; // https://www.npmjs.com/package/dat.gui
import webglGlobalOptions from "./config/webgl";
// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机的位置 0, 0, 10: x y z
camera.position.set(0, 0, 10);

// 将相机添加到场景
scene.add(camera);

// 循环50个三角形
for (let index = 0; index < 50; index++) {
    
    
    // 创建几何体
    const geometry = new THREE.BufferGeometry();
    // 每个三角形面需要三个点  9个坐标
    // Float32Array 保存的是BufferGeometry 缓冲区点位信息  所以需要设置Float32Array长度
    const positionArray = new Float32Array(9);
    for (let coordinate = 0; coordinate < 9; coordinate++) {
    
    
        positionArray[coordinate] = Math.random() * 10 - 5    // -5 ~ 5        
    }
    // 3  每3个点为一个坐标
    geometry.setAttribute("position", new THREE.BufferAttribute(positionArray, 3));
    // 设置几何体材质
    let color = new THREE.Color(Math.random(),Math.random(),Math.random())
    const material = new THREE.MeshBasicMaterial({
    
    
        color,
        transparent: true,
        opacity: 0.5
    });
    // 根据几何体和材质  创建物体
    const mesh = new THREE.Mesh(geometry, material)

    // 添加物体到场景
    scene.add(mesh)
}



// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);   // 只是渲染了一次

// 上面的是平面物体  需要看立体的   则需要创建轨道控制器

//物体添加轨道控制器(让物体可以随着鼠标360旋转)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器具有惯性
controls.enableDamping = true; // 设置完后，必须在动画循环里调用update()
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(
  webglGlobalOptions.WEBGL_COORDINATE_AXIS_LENGTH
);
scene.add(axesHelper);
function render() {
    
    
  controls.update();
  renderer.render(scene, camera);
  // requestAnimationFrame 浏览器自带函数： 浏览器每加载一帧执行一次render函数
  requestAnimationFrame(render);
}
// 首次渲染
render();