HTML5是現代網頁設計的基礎，并且擁有大量強大的功能。其中最受歡迎的功能之一就是創建3D場景。這種技術現在已經被廣泛應用于游戲開發和虛擬現實等領域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D場景</title>
<style>
#myCanvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("myCanvas"), antialias: true});
renderer.setClearColor("#000000");
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: "#ffffff"});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>上面是一個簡單的3D場景代碼，它使用了Three.js，這是一個流行的3D庫。首先，我們創建了一個場景、相機和渲染器。然后，我們創建了一個立方體，添加到場景中，并設置了其位置和顏色等屬性。最后，我們使用requestAnimationFrame函數來循環渲染場景，并為立方體添加旋轉動畫。