three.js学习记录（基础）

**三维图形学库Three.js学习记录（基础）**

### 前言在现代Web开发中，JavaScript是首选语言，而Three.js则是最流行的JavaScript3D库之一。它使我们能够创建复杂、动态且高性能的3D场景，并将其渲染到浏览器中。

本文将介绍Three.js的基础知识和一些实践示例，帮助你快速上手并掌握基本技能。

### 一. Three.js环境准备####1. 安装Three.js首先，我们需要在项目中安装Three.js。使用npm或yarn命令行工具：

bashnpm install three

或者：

bashyarn add three

####2. 引入Three.js库接下来，在你的JavaScript代码中引入Three.js库：

javascriptimport * as THREE from 'three';

或者使用script标签直接引入：

html<script src=" />

### 二. Three.js基本概念####1. 场景(Scene)

场景是Three.js中最顶层的对象，代表整个3D世界。我们可以在其中添加各种元素，如摄像机、光源、物体等。

javascriptconst scene = new THREE.Scene();

####2. 摄像机(Camera)

摄像机负责渲染场景中的内容并将其显示到屏幕上。Three.js提供了几种不同的摄像机类型，如PerspectiveCamera和OrthographicCamera。

javascriptconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);

####3. 渲染器(Renderer)

渲染器负责将场景中的内容绘制到屏幕上。Three.js提供了几种不同的渲染器类型，如CanvasRenderer和WebGLRenderer。

javascriptconst renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 antialias: true});

### 三. 创建基本场景####1. 添加物体我们可以使用Three.js提供的几何体类（如BoxGeometry、SphereGeometry等）创建各种形状的物体。

javascriptconst geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({ color:0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

####2. 添加光源我们可以使用Three.js提供的几种光源类型（如DirectionalLight、PointLight等）添加光源。

javascriptconst light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(5,5,5);
scene.add(light);

####3. 渲染场景最后，我们可以使用渲染器将场景渲染到屏幕上。

javascriptrenderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

### 四. 实践示例####1. 旋转摄像机我们可以通过改变摄像机的位置和方向来实现旋转效果。

javascriptfunction animate() {
 requestAnimationFrame(animate);

 camera.position.x = Math.sin(Date.now() *0.001) *5;
 camera.position.z = Math.cos(Date.now() *0.001) *5;

 renderer.render(scene, camera);
}
animate();

####2. 缩放摄像机我们可以通过改变摄像机的焦距来实现缩放效果。

javascriptfunction animate() {
 requestAnimationFrame(animate);

 camera.zoom = Math.sin(Date.now() *0.001) +1;

 renderer.render(scene, camera);
}
animate();

####3. 添加动画我们可以使用Three.js提供的几种动画类型（如TweenedAnimation等）添加动画。

javascriptconst animation = new THREE.Tween({
 duration:1000,
 easing: THREE.Easing.Linear.None})
.to({ rotation: Math.PI },500)
.start(cube.rotation);

### 五. 总结本文介绍了Three.js的基础知识和一些实践示例，帮助你快速上手并掌握基本技能。通过阅读本文，你应该能够创建简单的3D场景，并将其渲染到屏幕上。

记得继续学习和实践，以便更好地掌握Three.js的使用方法！