📅 最后修改于: 2023-12-03 14:41:47.270000 🧑 作者: Mango
HTML与WebGL都是我们日常开发中经常用到的技术，但它们在功能和应用上有很大不同。本文将为你介绍HTML和WebGL的概念、应用场景和使用方法，帮助你更好地理解和运用它们。
HTML（Hypertext Markup Language）是一种用于创建网页和其他 web 应用程序的标准标记语言。HTML文件通常由许多HTML标签、属性和值组成，这些标签可以使用文本、图像、音频、视频和其他类型的媒体来渲染网站。以下是HTML的一些基础标签示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
其中<!DOCTYPE html>是声明此文件是HTML5类型的文件，<html>标签是整个 HTML 页面的根元素，在<head>中的<title>标签是网页的标题，<body>标签是网页的主要内容，<h1>和<p>标签是HTML中常用的标题和段落标签。
WebGL（Web Graphics Library）是一种基于 OpenGL ES 2.0 的JavaScript API，允许在网页上渲染3D和2D图形。WebGL可以用来创建有趣的游戏、交互式数据可视化、科学模拟和其他复杂的图形应用。以下是WebGL的基础代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebGL Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
这个示例直接在HTML页面中嵌入了WebGL代码，它使用Three.js来创建场景、相机、渲染器、几何体、材质和网格，最后通过requestAnimationFrame来实现帧动画。你可以通过改变该代码示例中的参数来创建更复杂的WebGL应用。
HTML和WebGL可以相互结合来创建更强大的应用。下面是一个使用HTML和WebGL创建交互式立体画廊的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebGL Gallery</title>
<style>
canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<canvas></canvas>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
for ( var i = 0; i < 100; i ++ ) {
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 2 - 1;
mesh.position.y = Math.random() * 2 - 1;
mesh.position.z = Math.random() * 2 - 1;
mesh.rotation.x = Math.random() * 2 * Math.PI;
mesh.rotation.y = Math.random() * 2 * Math.PI;
mesh.rotation.z = Math.random() * 2 * Math.PI;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 0.5 + 0.5;
scene.add( mesh );
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>
这个示例使用Three.js创建随机位置、旋转和缩放的立方体网格，并通过每个网格的不同值为场景增加了层次和维度感，这个2D和3D结合的画廊应用提供了更加丰富的视觉效果和交互体验。
HTML和WebGL是不同的技术，它们分别用于创建2D web页面和3D图形应用。HTML是标准标记语言，使用标签和属性来表示文本、图像、音频、视频和其他媒体。WebGL是JavaScript API，使用OpenGL ES 2.0以编程方式渲染三维图形。合并HTML和WebGL可以创建更加丰富的页面和应用。