three.js学习

**三维图形学与Web开发**

在现代Web开发中，三维图形学（3D）已经成为一个重要的组成部分。通过使用JavaScript库如Three.js，我们可以轻松地创建交互式、动态的3D场景，并将其嵌入到网页中。

**什么是Three.js**

Three.js是一个用于Web开发的开源JavaScript库，用于创建和渲染3D图形。它提供了一个强大的API，使得开发者能够轻松地创建复杂的3D场景、模型、灯光等，并将其呈现到网页中。

**Three.js的特点**

1. **跨浏览器兼容性**: Three.js支持所有主流浏览器，包括Chrome、Firefox、Safari和Edge。
2. **高性能**: Three.js使用WebGL（Web Graphics Library）来渲染3D图形，这使得它能够在现代设备上运行非常快。
3. **易用性**: Three.js提供了一个简单的API，使得开发者能够轻松地创建复杂的3D场景。

**基本概念**

1. **场景(Scene)**: 场景是Three.js中最顶层的对象，它包含了所有的图形、灯光和摄像机。
2. **物体(Object)**: 物体是Three.js中的一种基本对象，它可以是3D模型、平面等。
3. **灯光(Light)**: 灯光是用来照亮场景的对象，三维图形学中有多种类型的灯光。
4. **摄像机(Camera)**: 摄像机是用来观察场景的对象，它可以移动、旋转等。

**基本操作**

1. **创建场景**: `var scene = new THREE.Scene();`
2. **添加物体**: `scene.add(object);`
3. **设置灯光**: `var light = new THREE.DirectionalLight(0xffffff,1);`
4. **设置摄像机**: `camera.position.z =5;`

**示例代码**

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

// 添加物体var geometry = new THREE.BoxGeometry(2,2,2);
var material = new THREE.MeshBasicMaterial({ color:0xff0000 });
var object = new THREE.Mesh(geometry, material);
scene.add(object);

// 设置灯光var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(5,5,5);
scene.add(light);

// 设置摄像机camera.position.z =5;

// 渲染场景renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
}
animate();