用网页画一个3D图
时间: 2023-10-23 09:08:26 浏览: 34
要在网页中绘制 3D 图形,可以使用 WebGL 技术。以下是一个简单的 WebGL 代码示例,可以绘制一个旋转的立方体:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebGL 绘制立方体</title>
<style>
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
var vertexShaderSource = `
attribute vec3 aPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}
`;
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var positionAttributeLocation = gl.getAttribLocation(program, "aPosition");
var modelViewMatrixUniformLocation = gl.getUniformLocation(program, "uModelViewMatrix");
var projectionMatrixUniformLocation = gl.getUniformLocation(program, "uProjectionMatrix");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
-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,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
var modelViewMatrix = mat4.create();
var projectionMatrix = mat4.create();
function drawScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.identity(modelViewMatrix);
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
mat4.rotateY(modelViewMatrix, modelViewMatrix, Date.now() / 1000);
mat4.rotateX(modelViewMatrix, modelViewMatrix, Date.now() / 1500);
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);
gl.useProgram(program);
gl.uniformMatrix4fv(modelViewMatrixUniformLocation, false, modelViewMatrix);
gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrix);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 8);
requestAnimationFrame(drawScene);
}
drawScene();
</script>
</body>
</html>
```
该代码使用了 WebGL 技术,通过 JavaScript 中的 WebGL API 绘制 3D 图形。在代码中,定义了一个顶点着色器和一个片元着色器,用于计算顶点和颜色信息。同时,定义了一个绘制函数 `drawScene()`,用于在 Canvas 中绘制立方体。在该函数中,使用 `perspective()` 方法定义透视投影矩阵,使用 `rotateX()` 和 `rotateY()` 方法定义旋转矩阵,最后使用 `drawArrays()` 方法绘制立方体。
你可以将该代码复制到 HTML 文件中,然后在浏览器中打开该文件,即可看到绘制出来的旋转立方体。注意,该代码需要在支持 WebGL 技术的现代浏览器中运行。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)