HTML3D代碼及解釋
<!DOCTYPE html>
<html>
<head>
<title>HTML3D Code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var camera, scene, renderer, controls;
var geometry, material, mesh;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z = 500;
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.rotateSpeed = 1;
geometry = new THREE.BoxGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>在這段HTML3D代碼中，我們使用了Three.js庫，它讓我們可以將3D圖形展現(xiàn)在Web頁面上。
代碼中的init函數(shù)初始化了一個場景、相機(jī)、渲染器以及一個立方體的網(wǎng)格。相機(jī)的位置被設(shè)定為z軸上500，renderer被設(shè)置為透明。使用OrbitControls可以讓用戶通過鼠標(biāo)控制場景的旋轉(zhuǎn)和縮放，但我們禁用了縮放和平移，并將旋轉(zhuǎn)速度設(shè)為1。
animate函數(shù)實(shí)現(xiàn)了場景中立方體的運(yùn)動，呈現(xiàn)出一種動態(tài)的效果。使用requestAnimationFrame函數(shù)可以讓動畫效果更加流暢。
在頁面中添加渲染器的domElement，立方體的網(wǎng)格被添加到了場景中并在animate函數(shù)中被旋轉(zhuǎn)。整個3D場景就這樣呈現(xiàn)在Web頁面上。