現在，3D 圓球已經成為網頁設計中不可或缺的元素之一。相較于傳統的平面設計，3D 圓球可以更好的呈現出空間感和立體感，極大的提高了用戶體驗。那么，如何在 HTML 頁面上實現 3D 圓球呢？接下來將通過 pre 標簽展示實現該效果的 HTML 代碼。 首先，我們需要在 HTML 頁面中創建一個 canvas 元素，用來繪制 3D 圓球。在 canvas 元素中，我們可以指定使用的寬度、高度等參數來確定圓球的大小以及其他參數。代碼如下：

<canvas id="myCanvas" width="500" height="500">
</canvas>

接下來，我們需要使用 JavaScript 來繪制 3D 圓球。在繪制前，我們需要引入 Three.js 庫，這是一款專為 JavaScript 設計的 3D 圖形庫。使用這個庫，我們可以更方便的創建 3D 場景、燈光等效果。

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js">
</script>
<script>
//在這里添加繪制 3D 圓球的 JS 代碼
</script>

在編寫繪制 3D 圓球的 JavaScript 代碼時，需要使用 Three.js 庫中的球體（Sphere）對象。這個對象有多種屬性可以設置，例如半徑、顏色、材質等。下面是一個簡單的例子，展示如何創建一個紅色的半徑為 50 的圓球：

//獲取 canvas 元素
const canvas = document.querySelector('#myCanvas');
//創建渲染器
const renderer = new THREE.WebGLRenderer({canvas});
//創建場景
const scene = new THREE.Scene();
//創建相機
const camera = new THREE.PerspectiveCamera(
75,                                    //視角角度
canvas.width / canvas.height,           //寬高比
0.1,                                   //近截面
1000                                   //遠截面
);
camera.position.z = 100;
//創建燈光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0,0,1);
scene.add(light);
//創建一個紅色的圓球
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(50, 32, 32),
new THREE.MeshPhongMaterial({color: 'red'})
);
scene.add(sphere);
//渲染場景
renderer.render(scene, camera);

最終的效果如下圖所示：  以上就是使用 HTML 和 Three.js 庫繪制 3D 圓球的詳細步驟和代碼示例。當然，這只是一個入門級別的例子，如果想要展示更復雜的 3D 場景，就需要更加深入的學習 Three.js 庫的使用。