近年來，隨著3D技術的普及，3D效果也逐漸應用到各個領域中。在Web前端開發領域中，也有一些免費的HTML3D效果代碼可供使用。下面將為大家介紹一些具有代表性的HTML3D效果代碼。 第一款是Curtains.js，這是一個基于WebGL的庫，它提供了許多3D效果，例如折疊，滑動，幻燈片等。使用它，你可以通過JavaScript編寫簡潔易懂的3D動畫，而無需關心底層的WebGL代碼。下面是一個利用Curtains.js實現的簡單的圓球旋轉動畫。

// HTML代碼
<div class="container">
<canvas id="canvas"></canvas>
</div>
// JS代碼
const curtains = new Curtains({
container: "canvas"
});
const spherePlane = new Plane(curtains, {
vertexShaderID: "sphere-vs",
fragmentShaderID: "sphere-fs",
widthSegments: 30,
heightSegments: 30,
uniforms: {
uTexture: {
value: new Texture(curtains.renderer, {
image: "https://picsum.photos/id/388/1024/1024"
})
},
uTime: {
value: 0
}
}
});
spherePlane.onRender(() =>{
spherePlane.uniforms.uTime.value++;
});
spherePlane.onAfterResize(() =>{
spherePlane.segments.set(spherePlane.uniforms.resolution.value.x * 2 - 5, spherePlane.uniforms.resolution.value.y * 2 - 5);
});

第二款是Three.js，它是目前最流行的3D引擎之一，它可以幫助用戶在WebGL基礎之上更快速地構建3D場景。使用它，用戶可以編寫JavaScript代碼制作具有真實感的3D模型，并能實現許多復雜的交互效果。下面是一個示例，使用Three.js和其他庫制作的3D渲染的星空。

// HTML代碼
<div class="container">
<canvas id="canvas"></canvas>
</div>
// JS代碼
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#canvas")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () =>{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
const starGeometry = new THREE.Geometry();
for (let i = 0; i < 6000; i++) {
const star = new THREE.Vector3(
THREE.MathUtils.randFloatSpread(200),
THREE.MathUtils.randFloatSpread(200),
THREE.MathUtils.randFloatSpread(200)
);
starGeometry.vertices.push(star);
}
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff
});
const starField = new THREE.Points(starGeometry, starMaterial);
scene.add(starField);
function animate() {
requestAnimationFrame(animate);
starField.rotation.y += 0.002;
renderer.render(scene, camera);
}
animate();

以上是兩款具有代表性的免費HTML 3D效果代碼，構建出各種炫酷的3D效果供開發者在前端開發中使用。