three.js学习（基础）

**三维图形学库Three.js学习基础**

### 前言在web开发中，三维图形学库Three.js是一个非常强大的工具，可以帮助我们创建出色且高性能的3D场景。作为一名web开发者，如果你想掌握这项技能，那么本文将为你提供一个基础的学习指南。

### 一、安装和配置首先，我们需要在项目中安装Three.js库。可以使用npm或yarn命令来安装：

bashnpm install three

或者：

bashyarn add three

接下来，我们需要在HTML文件中引入Three.js库的脚本：

html<script src=" />

### 二、场景和相机在Three.js中，场景(Scene)是3D世界中的一个容器，它包含了所有的物体。相机(Camera)则是用来观察场景的工具。

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

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

// 将相机添加到场景中scene.add(camera);

### 三、渲染器渲染器(Renderer)是Three.js中的一个核心组件，它负责将场景渲染成图像。

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

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

### 四、物体在Three.js中，物体(Object)是场景中的一个基本组成部分。我们可以使用各种方法来创建不同的物体。

javascript// 创建一个新的立方体var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({ color:0x00ff00 });
var cube = new THREE.Mesh(geometry, material);

// 将立方体添加到场景中scene.add(cube);

### 五、动画在Three.js中，我们可以使用动画来使物体移动或变化。

javascript// 创建一个新的动画function animate() {
 requestAnimationFrame(animate);

 // 更新相机位置 camera.position.x +=0.01;
 camera.position.y +=0.01;

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

// 开始动画animate();

### 六、事件监听在Three.js中，我们可以使用事件监听来响应用户的交互。

javascript// 添加鼠标点击事件监听器document.addEventListener('click', function(event) {
 // 获取鼠标位置 var mousePosition = new THREE.Vector2(event.clientX, event.clientY);

 // 将鼠标位置添加到场景中 var geometry = new THREE.SphereGeometry(0.1,32,32);
 var material = new THREE.MeshBasicMaterial({ color:0xff0000 });
 var sphere = new THREE.Mesh(geometry, material);
 sphere.position.copy(mousePosition);
 scene.add(sphere);
});

### 七、总结在本文中，我们学习了Three.js的基本概念和API。我们创建了一个新的场景，相机和渲染器，并添加了一些物体和动画。最后，我们使用事件监听来响应用户的交互。

通过阅读本文，你应该能够掌握Three.js的基础知识，并开始创建自己的3D场景。