上一篇中我們學習了第一個Three.js場景"Hello World"。這一篇就來學習three.js的核心組件。

此圖來源（Three.js中文網）

????????three.js的核心由三大組件構成：場景(Scene)、相機(Camera)和渲染器(Renderer)。下面我將詳細介紹這三大件的作用和使用方法。

1. 場景(Scene)

場景是 Three.js 中所有 3D 對象的容器，相當于一個虛擬的 3D 世界。

基本特性：

• 是所有物體、燈光和相機的父容器

• 使用場景圖結構管理對象

• 自動處理對象間的層級關系

創建場景：

// 創建3D場景對象Scene
const scene = new THREE.Scene();

常用屬性：

/*若不為空，在渲染場景的時候將設置背景，且背景總是首先被渲染的。默認值為null*/
scene.background=...
/*設置背景的模糊度。僅影響分配給 Scene.background 的環境貼圖。有效輸入是介于 0 和 1 之間的浮點數。默認值為 0。*/
scene.backgroundBlurriness =...
/*如果不為空，它將強制場景中的每個物體使用這里的材質來渲染。默認值為null。*/
scene.overrideMaterial=...

常用方法：

scene.add(object);    // 添加對象
scene.remove(object); // 移除對象
scene.children;       // 獲取所有子對象

2. 相機(Camera)

相機決定了場景中哪些部分會被渲染，相當于觀察 3D 世界的"眼睛"。

常用相機類型：

• 透視相機(PerspectiveCamera)?- 模擬人眼視角

  const camera = new THREE.PerspectiveCamera(75,                               // 視野角度(FOV)window.innerWidth / window.innerHeight, // 寬高比0.1,                              // 近裁剪面1000                              // 遠裁剪面
  );

• 正交相機(OrthographicCamera)?- 無透視變形

  const camera = new THREE.OrthographicCamera(width / -2, width / 2,           // 左右平面height / 2, height / -2,         // 上下平面1,                                // 近裁剪面1000                              // 遠裁剪面
  );

相機位置和朝向：

camera.position.set(0, 0, 5);  // 設置相機位置
camera.lookAt(0, 0, 0);        // 設置相機看向的點

3. 渲染器(Renderer)

渲染器負責將場景和相機中的內容渲染到 HTML 頁面上。

WebGL 渲染器（最常用）：

const renderer = new THREE.WebGLRenderer({antialias: true,            // 抗鋸齒alpha: true                 // 透明背景
});
renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染尺寸
document.body.appendChild(renderer.domElement); // 添加到DOM

渲染器配置：

// 設置像素比（用于高清屏）
renderer.setPixelRatio(window.devicePixelRatio);// 開啟陰影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 設置色調映射
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;

4.三大件協同工作示例

// 1. 創建場景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);// 2. 創建相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.z = 5;// 3. 創建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 4. 創建物體并添加到場景
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
//添加
scene.add(cube);// 5. 渲染循環
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();

總結

• Scene：3D 世界的容器，管理所有對象

• Camera：決定觀察視角和可見范圍

• Renderer：將 3D 場景渲染到 2D 屏幕上

這三大件構成了 Three.js 的基礎架構，理解它們的關系和作用是學習 Three.js 的關鍵第一步。

如果文中有哪些問題，希望各位大佬輕噴。