用JavaScript写一个3D图形

可以使用 JavaScript 来创建 3D 图形。有许多方法可以实现这一目标，其中一种方法是使用 WebGL。

WebGL（Web Graphics Library）是一种浏览器中的 3D 绘图技术，可以在浏览器中渲染 3D 图形。

下面是一个简单的例子，展示了如何使用 WebGL 在浏览器中创建一个 3D 立方体。

首先，需要在 HTML 页面中添加一个 canvas 元素，用于显示 3D 图形：

<canvas id="canvas"></canvas>

然后，在 JavaScript 中设置 WebGL 上下文，并设置 canvas 元素的尺寸：

// 获取 canvas 元素
const canvas = document.getElementById('canvas');

// 设置 canvas 元素的尺寸
canvas.width = 500;
canvas.height = 500;

// 获取 WebGL 上下文
const gl = canvas.getContext('webgl');

接下来，可以定义立方体的顶点数据和颜色数据：

// 定义立方体的顶点数据
const vertices = [
   // 前面
   -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,
    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,

   // 底