three.js是一個基于WebGL的輕量級、易于使用的3D庫。它極大地簡化了WebGL的復雜細節，降低了學習成本，同時提高了性能。
three.js的三大核心元素：
-
場景（Scene）
- 場景是一個三維空間，是所有物品的容器。可以將其想象成一個空房間，里面可以放置要呈現的物體、相機、光源等。
- 使用方法：通過
new THREE.Scene()來創建一個新的場景。
/**1. 創建場景 -- 放置物體對象的環境*/
const scene = new THREE.Scene();
- 相機（Camera）
相機用來確定觀察位置、方向、角度。相機看到的內容，就是最終在屏幕上看到的內容。
three.js中常用的相機類型包括：
透視投影相機（PerspectiveCamera）：模擬人眼看到的效果，近大遠小。通過指定視野（Field of View，FOV）、長寬比、近端渲染距離和遠端距離來創建。
例如：new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
/** 2.創建相機(這里是 透視攝像機--用來模擬人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 視野角度window.innerWidth / window.innerHeight, // 長寬比0.1, // 進截面1000 // 遠截面
);
// 設置相機位置
camera.position.set(0, 0, 10);
scene.add(camera); // 將相機添加到場景中
- 使用THREE.PerspectiveCamera構造函數創建一個新的透視相機實例。
- 75：視野角度（Field of View，簡稱FOV），表示相機“看到”的角度范圍。這里設置為75度。
- window.innerWidth / window.innerHeight：相機的縱橫比（Aspect Ratio），通常設置為窗口的寬度與高度的比值，以確保渲染的圖像不會拉伸或壓縮。
- 0.1：近裁剪面（Near Clipping Plane），表示相機能夠“看到”的最近距離。小于這個距離的物體將不會被渲染。
- 1000：遠裁剪面（Far Clipping Plane），表示相機能夠“看到”的最遠距離。大于這個距離的物體將不會被渲染。
- 使用camera.position.set()方法設置相機的位置。這里的坐標是(0, 0, 10)，意味著相機位于世界坐標的原點上方10個單位的位置（在Z軸上）。在3D空間中，這通常意味著相機是“俯視”場景的。
正交投影相機（OrthographicCamera）：遠近都是一樣的大小，三維空間中平行的線，投影到二維空間也一定是平行的。
在程序運行過程中，可以調整相機的位置、方向、角度。
// 假設你已經有一個場景（scene）對象 // 創建正交相機
const camera = new THREE.OrthographicCamera( left, // 相機左平面 right, // 相機右平面 top, // 相機上平面 bottom, // 相機下平面 near, // 近裁剪面 far // 遠裁剪面
); // 設定相機位置（對于正交相機來說，這不是必需的，但通常你需要設置它以獲得期望的視角）
camera.position.set(0, 0, 10); // 將相機添加到場景中（注意：相機通常不直接添加到場景中，而是由渲染器使用）
// 但在這里，如果你只是為了存儲它或做其他操作，你可以這樣做
// scene.add(camera); // （這通常是不必要的）
為了設置正交相機的參數，你需要定義六個值：
- left：相機左平面與視圖的左邊界的距離。
- right：相機右平面與視圖的右邊界的距離。
- top：相機上平面與視圖的上邊界的距離。
- bottom：相機下平面與視圖的下邊界的距離。
- near：近裁剪面，相機能夠“看到”的最近距離。
- far：遠裁剪面，相機能夠“看到”的最遠距離。
在實際使用中，你可能需要根據你的場景大小和所需的視圖范圍來計算這些值。例如，如果你想要一個與窗口寬度和高度匹配的正交視圖，你可以這樣設置：
const aspectRatio = window.innerWidth / window.innerHeight;
const width = 10; // 假設你想要的視圖寬度為10個單位
const height = width / aspectRatio; // 計算視圖高度以保持相同的寬高比 const camera = new THREE.OrthographicCamera( -width / 2, // left width / 2, // right height / 2, // top -height / 2, // bottom 1, // near 1000 // far
);
-
渲染器（Renderer）
- 渲染器是用來通過相機把畫面渲染到屏幕上的組件。
- 使用方法：創建一個WebGL渲染器實例，設置渲染的尺寸大小，然后將渲染器的canvas內容添加到HTML文檔的body中。
- 例如：使用
new THREE.WebGLRenderer()來創建一個WebGL渲染器，并通過renderer.setSize(width, height)設置渲染尺寸，最后使用document.body.appendChild(renderer.domElement)將渲染的canvas添加到頁面中。
以下是如何創建一個THREE.WebGLRenderer并將其添加到HTML文檔中的基本步驟：
1.創建渲染器實例：
使用new THREE.WebGLRenderer()來創建一個新的WebGL渲染器實例。
2.設置渲染器尺寸：
使用renderer.setSize(width, height)方法來設置渲染器的寬度和高度。這通常與HTML元素的尺寸相匹配，例如元素。
3.將渲染器的DOM元素添加到HTML文檔中：
渲染器會創建一個canvas元素，你可以通過renderer.domElement訪問它。將這個canvas元素添加到HTML文檔的某個位置，通常是body元素內。
4.渲染場景：
使用renderer.render(scene, camera)方法來渲染場景。這個方法需要兩個參數：場景（Scene）和相機（Camera）。它會將相機視角下的場景內容渲染到渲染器的canvas元素上。
下面是一個簡單的示例代碼：
// 假設你已經有了場景（scene）和相機（camera）// 1. 創建渲染器實例
const renderer = new THREE.WebGLRenderer();// 2. 設置渲染器尺寸（通常與canvas元素或窗口大小匹配）
renderer.setSize(window.innerWidth, window.innerHeight);// 3. 將渲染器的DOM元素添加到HTML文檔中
document.body.appendChild(renderer.domElement);// 4. 渲染場景
renderer.render(scene, camera);// 注意：你可能還需要一個動畫循環來持續更新和渲染場景
function animate() {requestAnimationFrame(animate); // 請求下一個動畫幀// 更新場景中的物體（如果需要）// ...// 渲染場景renderer.render(scene, camera);
}
animate();// 另外，你可能還需要處理窗口大小變化事件來更新渲染器尺寸
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相機縱橫比（如果需要）camera.updateProjectionMatrix(); // 更新投影矩陣renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器尺寸
}在這個示例中，animate函數使用requestAnimationFrame來創建一個動畫循環，該循環在每個動畫幀中更新場景并渲染它。同時，還添加了一個事件監聽器來處理窗口大小變化事件，以確保渲染器的尺寸與窗口尺寸保持一致。
)
)
