threejs 场景

### 创建和配置 Three.js 场景

#### 初始化场景
为了初始化一个Three.js场景，需实例化`THREE.Scene`类来创建一个新的场景对象。这一步骤是构建任何Three.js应用的基础。

const scene = new THREE.Scene();

此代码片段定义了一个名为 `scene` 的变量，并将其设置为新的 `THREE.Scene()` 实例[^1]。

#### 设置相机
接着，要创建透视投影相机（Perspective Camera），它模拟人类视觉效果，提供更真实的观看体验。为此，使用`THREE.PerspectiveCamera`构造函数并传入视场角度(FOV)，宽高比(aspect ratio)，近裁剪面(near clipping plane)以及远裁剪面(far clipping plane)作为参数。

const camera = new THREE.PerspectiveCamera(
  75, // FOV (Field of View)
  window.innerWidth / window.innerHeight, // Aspect Ratio
  0.1, // Near Clipping Plane
  1000 // Far Clipping Plane
);

上述代码设置了视角为75度，基于窗口尺寸计算的纵横比，最近绘制距离设为0.1单位长度，最远则设定为1000单位长度[^2]。

#### 构建渲染器
最后，创建WebGLRenderer用于实际绘图操作。该渲染器负责将三维图形转换成二维图像展示给用户查看。同时，调整其大小匹配浏览器窗口宽度高度，并最终附加到DOM树中的指定容器内以便显示出来。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

这段脚本首先建立了WebGL渲染环境，随后调用了`setSize`方法使画布适应当前页面布局；紧接着把渲染后的HTMLCanvasElement元素加入文档流中以供呈现。

#### 添加物体至场景
为了让场景不为空白，在这里可以向其中添加一些基本几何体比如立方体或其他形状的对象。下面的例子展示了如何引入一个简单的BoxGeometry盒子模型及其材质属性：

// 定义几何结构——正方体
const geometry = new THREE.BoxGeometry();

// 应用表面材料——基础网格材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 组合形成可渲染实体
const cube = new THREE.Mesh(geometry, material);

// 将新建立好的物件放置于场景之中
scene.add(cube);

以上部分实现了从无到有地制造出一个绿色实心的小方块，并把它置于虚拟世界里等待被观察者发现。

#### 渲染循环
为了让程序持续更新画面而不是仅静态一次性的输出结果，通常会采用动画帧请求机制(requestAnimationFrame)配合render()函数实现连续重绘的效果。

function animate() {
  requestAnimationFrame(animate); // 请求下一帧执行相同动作
  
  // 更新cube位置或者其他状态变化逻辑...
  
  renderer.render(scene, camera); // 执行本次迭代的画面刷新工作
}

animate(); // 启动无限循环过程

这个匿名内部函数不断自我调用直到停止条件满足为止，期间每经历一轮都会重新评估整个场景的状态并通过渲染引擎展现最新情况。