three.js学习2（基础）

**三维图形学库Three.js学习笔记之二**

在上一篇文章中，我们已经简单地了解了Three.js的基本概念和API。今天我们将继续深入探讨Three.js的基础知识，包括场景、相机、物体、光源等。

### 场景(Scene)

场景是Three.js中的一个核心概念，它代表了整个图形世界。在Three.js中，每个场景都有自己的属性和方法。下面是一个简单的例子：

javascript// 创建一个新的场景var scene = new THREE.Scene();

// 添加一些基本的属性scene.background = new THREE.Color(0x000000); // 背景颜色

### 相机(Camera)

相机是Three.js中用来观察场景的工具。它可以移动、旋转和缩放，以便观察不同的角度。在Three.js中，相机有以下几种类型：

* **PerspectiveCamera**：透视相机，它模拟人的视觉效果。
* **OrthographicCamera**：正交相机，它将场景渲染为平面图像。

下面是一个简单的例子：

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

// 将相机移动到指定位置camera.position.set(0,5,10);

### 物体(Object)

物体是Three.js中最基本的图形元素。它可以是简单的几何体，也可以是复杂的模型。在Three.js中，物体有以下几种类型：

* **BoxGeometry**：盒子几何体。
* **SphereGeometry**：球体几何体。
* **PlaneGeometry**：平面几何体。

下面是一个简单的例子：

javascript// 创建一个新的盒子几何体var geometry = new THREE.BoxGeometry(1,1,1);

// 创建一个新的材质var material = new THREE.MeshBasicMaterial({ color:0xff0000 });

// 创建一个新的盒子物体var box = new THREE.Mesh(geometry, material);

### 光源(Light)

光源是Three.js中用来照亮场景的工具。它可以移动、旋转和缩放，以便照亮不同的区域。在Three.js中，光源有以下几种类型：

* **AmbientLight**：环境光。
* **DirectionalLight**：方向光。
* **PointLight**：点光源。

下面是一个简单的例子：

javascript// 创建一个新的环境光var ambient = new THREE.AmbientLight(0xffffff,1);

// 将环境光添加到场景中scene.add(ambient);

### 渲染(Render)

渲染是Three.js中用来绘制图形的过程。在Three.js中，渲染有以下几种类型：

* **CanvasRenderer**：canvas渲染器。
* **WebGLRenderer**：webgl渲染器。

下面是一个简单的例子：

javascript// 创建一个新的webgl渲染器var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 antialias: true,
});

// 将渲染器添加到场景中renderer.setSize(window.innerWidth, window.innerHeight);

### 动画(Animation)

动画是Three.js中用来控制物体运动的工具。在Three.js中，动画有以下几种类型：

* **Tween**：缓动。
* **Timeline**：时间线。

下面是一个简单的例子：

javascript// 创建一个新的缓动var tween = new TWEEN.Tween(camera.position)
 .to({ x:0, y:5, z:10 },1000)
 .easing(TWEEN.Easing.Linear.None)
 .start();

### 总结在本文中，我们已经简单地了解了Three.js的基础知识，包括场景、相机、物体、光源等。我们还学习了如何使用这些基本概念来创建一个简单的图形世界。在下一篇文章中，我们将继续深入探讨Three.js的高级知识，包括动画、物理和交互等。

### 参考* [Three.js官方文档]( />* [Three.js中文文档]( />
###代码示例

javascript// 创建一个新的场景var scene = new THREE.Scene();

// 添加一些基本的属性scene.background = new THREE.Color(0x000000); // 背景颜色// 创建一个新的透视相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);

// 将相机移动到指定位置camera.position.set(0,5,10);

// 创建一个新的盒子几何体var geometry = new THREE.BoxGeometry(1,1,1);

// 创建一个新的材质var material = new THREE.MeshBasicMaterial({ color:0xff0000 });

// 创建一个新的盒子物体var box = new THREE.Mesh(geometry, material);

// 将盒子添加到场景中scene.add(box);

// 创建一个新的环境光var ambient = new THREE.AmbientLight(0xffffff,1);

// 将环境光添加到场景中scene.add(ambient);

// 创建一个新的webgl渲染器var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 antialias: true,
});

// 将渲染器添加到场景中renderer.setSize(window.innerWidth, window.innerHeight);

// 将场景、相机和渲染器添加到页面中document.body.appendChild(renderer.domElement);

###代码注释* `var scene = new THREE.Scene();`：创建一个新的场景。
* `scene.background = new THREE.Color(0x000000);`：设置背景颜色为黑色。
* `var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);`：创建一个新的透视相机。
* `camera.position.set(0,5,10);`：将相机移动到指定位置。
* `var geometry = new THREE.BoxGeometry(1,1,1);`：创建一个新的盒子几何体。
* `var material = new THREE.MeshBasicMaterial({ color:0xff0000 });`：创建一个新的材质。
* `var box = new THREE.Mesh(geometry, material);`：创建一个新的盒子物体。
* `scene.add(box);`：将盒子添加到场景中。
* `var ambient = new THREE.AmbientLight(0xffffff,1);`：创建一个新的环境光。
* `scene.add(ambient);`：将环境光添加到场景中。
* `var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });`：创建一个新的webgl渲染器。
* `renderer.setSize(window.innerWidth, window.innerHeight);`：设置渲染器大小。
* `document.body.appendChild(renderer.domElement);`：将场景、相机和渲染器添加到页面中。