Three.Js学习笔记一：场景与相机

## 场景

Three.Js中的场景对象是一个用于保存所有物体的容器。它定义了物体在三维空间中的位置和方向。场景对象可以包含多个物体，也可以嵌套其他场景对象。

// 创建一个场景对象
const scene = new THREE.Scene();

## 相机

Three.Js中的相机对象用于定义观察者的位置和方向。它可以是透视相机或正交相机。透视相机模拟了人眼的视觉效果，具有透视投影功能。正交相机则不具有透视投影功能，所有物体的大小与距离相机的位置无关。

// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机的初始位置和方向
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);

## 灯光

Three.Js中的灯光对象用于为场景中的物体提供照明。灯光对象可以是环境光、平行光、点光源或聚光灯。环境光会均匀地照亮场景中的所有物体，平行光会从一个方向照亮场景中的所有物体，点光源会从一个点照亮场景中的所有物体，聚光灯会从一个锥形区域照亮场景中的所有物体。

// 创建一个环境光对象
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

// 创建一个平行光对象
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);

// 设置平行光对象的位置和方向
directionalLight.position.set(10, 10, 10);
directionalLight.lookAt(0, 0, 0);

// 创建一个点光源对象
const pointLight = new THREE.PointLight(0xffffff, 0.5);

// 设置点光源对象的位置
pointLight.position.set(0, 10, 0);

// 创建一个聚光灯对象
const spotLight = new THREE.SpotLight(0xffffff, 0.5);

// 设置聚光灯对象的位置和方向
spotLight.position.set(10, 10, 10);
spotLight.target.position.set(0, 0, 0);

## 渲染

Three.Js中的渲染器对象用于将场景中的物体渲染到画布上。渲染器对象可以使用WebGL或CanvasAPI进行渲染。

// 创建一个渲染器对象
const renderer = new THREE.WebGLRenderer();

// 设置渲染器对象的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器对象添加到文档中
document.body.appendChild(renderer.domElement);

// 渲染场景
renderer.render(scene, camera);

## 总结

本文介绍了Three.Js中的场景、相机、灯光和渲染的基本概念和用法。这些知识是Three.Js的基础，掌握了这些知识，就可以开始创建自己的Three.Js应用程序了。