1.three.js是什么
开发Web 3D 应用的js封装类
2.three.js需要怎么上手
2.1引入
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
2.2三要数（场景，照相机，渲染器）
首先，场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有场景，Three.js 就无法渲染任何物体。其次，摄相机决定了能够在场景中看到什么，即屏幕上哪些东西需要渲染。最后，渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子，然后调用底层 API 执行真正的场景绘制工作。
THREE.Scene?来表示。它是所有不同对象的容器，可以用来保存所有图形场景的必要信息。也就是说，?THREE.Scene?保存了所有对象、光源和渲染所需的其他对象。例如，你想要显示一个橙子，就需要将橙子这个对象加入到场景中。WebGLRenderer()?渲染器，一般会经历如下三个过程：
render(scene, camera)；还有一些开发过程中会用到的概念如下：
几何体、材质、贴图、颜色这些概念属于网络模型（ Mesh ）的范畴中。Three.js 中几何体基本上是三维空间中的点（顶点）集和将这些点连接起来的面。例如，一个立方体有 8 个角，每个角都可以用 x,y 和 z 坐标点来定义，所以每个立方体在三维空间中都有 8 个顶点。其次，一个立方体有 6 个面，每个角有一个顶点。在 Three.js 中，每个面都是包含 3 个顶点的三角形。所以，立方体的每个面都是由两个三角形面组成的。当你使用几何体时，不需要自己定义几何体的所有顶点和面。例如，定义立方体只需要定义长、宽、高。 Three.js 会基于这些信息在正确的位置创建一个拥有 8 个顶点和 12 个三角形面的立方体。材质 （ Material ）。材质就像物体的皮肤，决定了几何体的外表。例如，材质可以定义一个几何体看起来是否像金属，是否是透明的等等。在 Three.js 中，材质对象有一些共同的属性，例如：常用的基础属性（控制物体的透明度、可见性、引用），融合属性（决定物体如何与背景融合）以及高级属性（控制底层 WebGL 上下文对象渲染物体的方式）。
Three.js 中的光源可以分为两种类型。
其中，基础光源是最常见的，所有这些光源都是基于?THREE.Light?对象扩展的。对于这些光源，我们需要知道的是：
THREE.AmbientLight?光源的颜色可以附加到场景中的每一种颜色上，通常用来柔化生硬的颜色和阴影。THREE.PointLight?光源会朝所有方向发射光线，不能被用来阴影。THREE.SpotLight?光源类似手电筒，它有一个锥形的光束，可以配置它随着距离的增大而逐渐变弱，并且可以生成阴影。THREE.Directional?光源相当于远光的效果，比如太阳光。它的光线呈平行，其光强并不会随着与目标对象距离的增大而减弱。THREE.HemisphereLight?光源，该光源考虑了天空和地面的反射，可以具备更加自然的户外效果。THREE.AreaLight?不从单个点发射光线，而是从一个很大的区域发射光线。day01代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>20-使用 Three.js 绘制正方体</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
65,
window.innerWidth / window.innerHeight,
0.1,
1000
); //使用 透视摄像机,第一个参数：视野角度，第二个参数是长宽比值，第三个参数是近面，第四个参数是远面
const renderer = new THREE.WebGLRenderer(); // 定义 渲染器
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); // 设置一个渲染器的大小尺寸,如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，给updateStyle（第三个参数）传入false
document.body.appendChild(renderer.domElement); //将renderer（渲染器）这个元素添加到我们的HTML文档中
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 10, 0); //从位置(-10,10,0)开始照射场景
spotLight.castShadow = true; // 启用阴影功能
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024); //控制阴影的精细程度
spotLight.shadow.camera.far = 100;
spotLight.shadow.camera.near = 0.1;
scene.add(spotLight);
const geometry = new THREE.BoxGeometry(2, 2, 2); // 定义一个 立方体 对象，这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
const material = new THREE.MeshLambertMaterial({ color: 0xffffff }); // 定义材质，设置材质的颜色属性，值是一个十六进制
const cube = new THREE.Mesh(geometry, material); // 定义一个网格，它是包含有一个几何体以及应用在此几何体上的材质的对象
cube.castShadow = true;
scene.add(cube); // 添加到场景中
camera.position.z = 5; // 移动摄像机的 z 轴位置
function renderScene() {
// 渲染
requestAnimationFrame(renderScene); //在每次屏幕刷新时对场景进行绘制
renderer.render(scene, camera); // 渲染
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
renderScene();
</script>
</body>
</html>day02代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>实战：魔方</title>
<style>
div#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="main()">
<div id="canvas"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
<!-- 对 app.js 进行版本控制，处理浏览器缓存，如果你在开发中频繁改动 app.js 内容，请修改app.js 的版本号 v 的值 -->
<script src="./app.js?v=1.0"></script>
</body>
</html>?