Three.js实战：绘制随机三角形及窗口自适应方案

// 共有50个三角形
for (let i = 0; i < 50; i++) {
    // 每一个三角形，需要三个顶点，每个顶点需要3个值
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(9);
    for (let j = 0; j < 9; j++) {
        // 顶点的位置在 -5 ~ 5 之间
        vertices[j] = Math.random() * 10 - 5;
    }

    geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

    const color = new THREE.Color(Math.random(), Math.random(), Math.random());

    const material = new THREE.MeshBasicMaterial({
        color,
    });

    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
}

const material = new THREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 0.5,
});

// 监听画面变化，更新渲染渲染画面
window.addEventListener("resize", () => {
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
})

// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵，在任何参数被改变以后必须被调用。
camera.updateProjectionMatrix();