Three.JS是基于WebGL的Javascript开源框架，一模一样的效果我也有用webGL做过，链接是这个https://segmentfault.com/a/11...
html部分还是很简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demoThree</title>
</head>
<body>
<canvas id="demo-three"></canvas>
</body>
<script type="text/javascript" src="./three.js"></script>
<script type="text/javascript" src="./demo_three.js"></script>
</html>下面是js部分，每行代码都有比较详细的注释解释
// 定义宽高
const width = 400;
const height = 400;
const canvas = document.getElementById('demo-three');
// WebGLRenderer如果不传参数不会把dom元素和最终渲染出来的屏幕上的html上的dom元素相关联,那种情况就需要把domElement,append到body上，才能有相关画布出现
let renderer = new THREE.WebGLRenderer({
canvas
});
// 绘制场景，在scene中维护在场景中渲染的物体
let scene = new THREE.Scene();
// 使用正交相机（没有透视效果，适合我们这次的平面三角形）,正交相机需要定义上下左右前后的坐标情况，从而规定正交相机所能截取到的相关的平面空间中，物体的情况（视角空间的截取）
let camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, -1000, 1000)
// 黑色背景，透明度1.0
renderer.setClearColor(new THREE.Color(0x000000), 1.0);
// renderer大小
renderer.setSize(400, 400);
// 在three.js官网可查看，有很多预定义的geometry，但是没有三角形，我们可以通过shapeGeometry来绘制
let triangleShape = new THREE.Shape();
// 将绘制起始点移动到（const0， 100）这个位置
triangleShape.moveTo(0, 100);
// 开始划线
triangleShape.lineTo(-100, -100);
triangleShape.lineTo(100, -100);
triangleShape.lineTo(0, 100);
// 定义几何体
const geometry = new THREE.ShapeGeometry(triangleShape);
// 定义材质，三角形只是基本图形，不需要光照
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
// 默认是一面的(只渲染法向量所对应那一面)，定义为DoubleSide，将正反面都渲染出来
side: THREE.DoubleSide
});
// 第一个参数geometry，是我们之前定义的几何体的坐标情况，就很像之前的webGl中顶点着色器传入的顶点序列，不涉及颜色信息，只是定义几何体形状
// 第二个参数material, 很像webGl中片段着色器中的，给顶点序列上色
let mesh = new THREE.Mesh(geometry, material);
// 设置mesh在scene中的位置
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 1;
scene.add(mesh);
// 相机沿着z轴负方向望进去，所以把相机设置在了原点
// 设置位置直接通过position，要比原生webGl去修改往顶点着色器传的数据要方便很多
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;
// camera从（0, 0, 0）的位置望向（0，0，1）
camera.lookAt(new THREE.Vector3(0, 0, 1));
let currentAngle = 0;
let lastTimestamp = Date.now();
function animate() {
// 记下时间，拿到现在的时间戳，因为每次requestAnimationFrame间隔时间是不知道的
const now = Date.now();
// 减去老的时间戳
const duration = now - lastTimestamp;
lastTimestamp = now;
// 想要requestAnimationFrame间隔时间内转180度
currentAngle = currentAngle + duration / 1000 * Math.PI;
}
function render() {
animate();
// mesh绕y轴旋转currentAngle角度
mesh.rotation.set(0, currentAngle, 0);
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();效果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。