JavaScript三維圖形是指使用JavaScript語言在網頁上創建立體的圖形和視覺效果。與傳統的二維圖形不同，三維圖形能夠為用戶帶來更完整、更真實的視覺體驗。JavaScript三維圖形在網頁游戲、虛擬現實、交互式展示等場景中廣泛使用。

要創建JavaScript三維圖形，第一步是選擇合適的三維圖形庫。有很多優秀的三維圖形庫可以使用，如Three.js、Babylon.js、Cannon.js等。接下來，我們將使用Three.js作為例子演示如何創建一個簡單的三維圖形。首先，我們需要在HTML文檔中引入Three.js庫：

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></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(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 使立方體旋轉
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();

上述代碼創建了一個場景、相機、渲染器和一個立方體。其中，PerspectiveCamera是指使用透視投影方式渲染相機，BoxGeometry表示創建一個正方體模型，MeshBasicMaterial是指定渲染材質。

除了基本的三維形狀，我們還可以在圖形中加入光源，用于照明和陰影效果的制作。下面是添加光源的示例代碼：

// 添加平行光源
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);
// 添加環境光源
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

上述代碼添加了平行光和環境光，在場景中創造了更真實的光照效果。

除了基礎的三維形狀和光照，Three.js庫還提供了豐富的渲染效果，如紋理、高光、反射和陰影等。下面是一個使用紋理貼圖的示例代碼：

// 使用貼圖
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg');
var material = new THREE.MeshStandardMaterial({map: texture});
var cube = new THREE.Mesh(geometry, material);

使用紋理貼圖，我們可以將一張圖片賦給模型表面，為模型增加逼真的效果。

總之，JavaScript三維圖形是一種引人入勝的技術，在互聯網的多個領域有著廣泛的應用。本文介紹了一些基本的創建三維圖形的方法，希望能為讀者提供參考。