Three.js简介；Three.js使用与作品生成
一、Three.js简介
1、简介：
three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。
运行环境：
Three.js 是一款运行在浏览器中的3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。
官网：1. threejs文件包下载和目录简介 | Three.js中文网
包下载地址：Releases · mrdoob/three.js · GitHub
开发环境当中使用：npm instell three --save（下载）
import * as Three from 'three'（引入）
2、生成three.js必备：
Scene-场景，可以理解成一个3D的虚拟场景，用来模拟三维世界的
Camera-相机|摄像机，可以理解成一个3D场景的观测点
Renderer-渲染器
3、将一个物体放入3D场景中遵循以下几个步骤：
1. 创建场景
2.创建几何体
3.为几何体挑选网格材质
4.将物体mesh添加到场景
5.设置一个相机，可以通过相机的位置，表示观测点以及设置观测点的最近和最远距离，观测的角度等信息
6.设置一个渲染器：
7.将照片（渲染结果）插入到页面节点
二、生成一个three.js作品
1、html文件需要引入下载好的three.js包，并做好相关配置
2、test.js文件写法
a）引入主文件
import * as THREE from 'three';//主文件b）创建3d场景
const scene=new THREE.Scene();c）在场景中添加物体
//1.在场景中添加物体
const geometry = new THREE.BoxGeometry(100, 100, 100);//矩形
//2.物体外观材质
const material = new THREE.MeshBasicMaterial({
color:0xFF0000,//红色
})
//3.创建一个网格模型（将长方体和材质整合在一起）
const mesh = new THREE.Mesh(geometry, material);
//4.设置网格模型mesh的位置
mesh.position.set(0,0,0);//如果不设置，默认是原点的位置 0 0 0位置
//5.将物体mesh 添加到场景
scene.add(mesh);d） 添加三维坐标系（有助于观看物体的x、y、z轴；不是必选项）
//添加三维坐标系
const axesHelper = new THREE.AxesHelper(200);//值必须必物体值更大（避免观察不到）
//把坐标系应用到场景
scene.add(axesHelper);e）相机的相关设置
//7.设置一个相机，通过相机来观测mesh的位置
//参数说明：1.摄像机角度 2.宽高比 3.最近观测距离 4.最远观测距离
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
//设置相机位置
camera.position.set(200, 200, 200);
//设置相机观察目标点的位置
camera.lookAt(0,0,0);f）设置一个渲染器，让物体能展示在页面上
//8.设置一个渲染器（咔）
const renderer=new THREE.WebGLRenderer();
//设置canvas画布的宽高
renderer.setSize(window.innerWidth,window.innerHeight);
//渲染成像，生成一张照片
renderer.render(scene,camera);
//9.将照片插入到页面节点
document.body.appendChild(renderer.domElement);通过上面的操作就可以生成第一个3d模型作品啦~~~，使用下面的操作可以让您的3d作品变得更加美观哟~~~
三、物体的光源设置
1、添加点光源
//添加点光源 //参数：1.光源的颜色 2.光源的亮度 3.光源照射的范围 4.衰减度
const Light = new THREE.PointLight(0xccccc, 1);
Light.position.set(100, 150, 0); scene.add( Light );
//参数 1.需要被可视化的光源 2.点光源大小
// 光源辅助观察（能够看到官员的照射位置）
const pointLightHelper = new THREE.PointLightHelper(Light, 10); scene.add(pointLightHelper);2、为物体添加平行光
//平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(80, 100, 50)
directionalLight.target = mesh; scene.add( directionalLight );
//可视化平行光 （能够看到光源的照射位置）
const directionalLightHelper=new THREE.DirectionalLightHelper(directionalLight,5);
scene.add( directionalLightHelper );3、为物体添加环境光
//添加环境光
const ambient = new THREE.AmbientLight(0x404040);
scene.add(ambient)四、让物体旋转起来
原理：相机位置改变导致物体旋转
1、引入控件
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'2、设置相机使其拖动改变位置
//摄像机控件
//创建摄像机控件的参数（1.改变的相机 2.监控的区域范围）
const controls=new OrbitControls(camera,renderer.domElement);
//拖动物体的时候需要设置相机的位置，让它随着鼠标拖动而变换方位
controls.addEventListener("change",()=>{
renderer.render(scene,camera)
})
controls.target.set(0,0,0)//控件的位置和相机的位置设置成一直，鼠标拖动的时候就不会跳
controls.update();//更新控件，不然可能会出现控件无法识别到设置被更新过的情况五、设置动画，让图形自动旋转
function render(){
// const spt=clock.getDelta()*1000;//*1000表示将秒换算成毫秒
// console.log("两帧之间间隔的毫秒："+spt)
mesh.rotateY(0.01);//0.01弧度，不是度
renderer.render(scene,camera);//调用一次render就咔一张照片
requestAnimationFrame(render)//浏览器自带方法
}
render()更多详情设置请参考官网1. threejs文件包下载和目录简介 | Three.js中文网