Three.js入门学习

近段时间刷到了很多关于Three.js的文章博客，感觉很有意思，而且感觉以后3D可视化方面估计也是发展的一个方向，毕竟前端越来越卷了。也就在往上看文档加刷视频学了一些基础的东西。自己记录一下。

three.js的主要核心就是三块，场景，摄像机，渲染器。场景简单来说就是你所看到的东西，摄像机可以想象为你的眼睛，渲染器就是负责把你创建的场景进行渲染。接下来初始化一个场景来感受一下

场景初始化

npm create vite@latest //创建一个基础架子
npm install --save three //下载three

下载好依赖以后就可以进行初始化的创建了，这里就从三要素开始

import * as THREE from 'three'
// 声明三要素 场景  相机  渲染器
let scene, camera, renderer
function init() {
  // 创建场景
  scene = new THREE.Scene()
  // 创建相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  // 设置相机的位置
  camera.position.set(0, 0, 5)
  // 创建渲染器
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 将渲染器添加到 app 标签中
  document.body.appendChild(renderer.domElement)
}
// 进行渲染
function renderLoop() {
  // 使用渲染器渲染场景和相机
  renderer.render(scene, camera)
  requestAnimationFrame(renderLoop)
}
init()
renderLoop()

camera的四个参数分别为，摄像机视锥体垂直视野角度，摄像机视锥体长宽比，摄像机视锥体近端面，摄像机视锥体远端面。在截面和角度形成的视椎体外物体无法被绘制。

现在运行项目打开以后看到是纯黑的背景，这证明渲染器已经在body内了，可以是否有一个canvas标签，这个就是渲染器，因为此刻场景内是没有任何物体的。所以什么都看不到。接下来可以创建一个物体，吧物体加入到场景内

物体创建

function created() {
  // 创建一个长宽高都为1的几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  // 创建一个材质
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)
}

这样就创建一个长宽高都为1个单位的几何体，此刻你就可以看到一个绿色的几何体了，但是无法进行转动，也就是感觉不到3D的感觉，这个需要加入轨道控制器，才能进行转动查看，而且可以加入一个辅助线，使得更好的感觉3d空间

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
function createdHelp() {
  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
}
// 加入轨道控制器
function createdControls() {
  controls = new OrbitControls(camera, renderer.domElement)
}

轨道控制器是需要做单独引入的，映入之后创建传入相机和渲染器dom就可以进行控制轨道的旋转了，AxesHelper是创建x,y,z三条辅助线，传入辅助线的长短，加入长场景内。现在可以看到辅助线和3D的效果了。

性能监视

Three内置有性能监视工具。可以实时看到当前的渲染帧率 刷新频率,一秒渲染次数 。

import Stats from 'three/addons/libs/stats.module.js'
function createdStats() {
  stats = new Stats()
  document.body.appendChild(stats.domElement)
}

Stats需要做单独的映入，Stats其实就是一个div，加入到body内显示在做上角，默认显示的是fps。可以点击面板进行切换，也可也 stats.setMode(0) 传入面板id（0: fps, 1: ms, 2: mb）做不同的默认显示。

dat.gui

dat.gui\]([dat.gui - npm (npmjs.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fdat.gui "https://www.npmjs.com/package/dat.gui"))是一款开发辅助工具，可以进行位置的调节 颜色的调节，选项的调节 首先进行依赖下载 ` npm i dat.gui` ```main.js import * as dat from 'dat.gui' const gui = new dat.GUI() function guiMover(materialobj) { gui.add(materialobj.position, 'x', -5, 5, 0.01).name('位移x') gui.add(materialobj.position, 'y', -5, 5, 0.01).name('位移y') gui.add(materialobj.position, 'z', -5, 5, 0.01).name('位移z') gui.add(materialobj.rotation, 'x', 0, 2 * Math.PI, 0.01).name('旋转x') gui.add(materialobj.rotation, 'y', 0, 2 * Math.PI, 0.01).name('旋转y') gui.add(materialobj.rotation, 'z', 0, 2 * Math.PI, 0.01).name('旋转z') gui.add(materialobj.rotation, 'z', 0, 2 * Math.PI, 0.01).name('旋转z') gui.add(materialobj, 'visible').name('是否显示') const guIfooter = gui.addFolder('颜色') const colorobj = { clolr: `#${materialobj.material.color.getHexString()}`, } guIfooter .addColor(colorobj, 'clolr') .name('物体颜色') .onChange((e) => { materialobj.material.color = new THREE.Color(e) }) } ``` 这个也是用来进行辅助开发调剂的，可以只需要放进入对象的属性，就可以进行调节变化，并且有change事件，可以接收到对应的值，可以在change内进行一些处理，或者是触发其它一些函数 # gsap \[gsap\]([Homepage \| GSAP](https://link.juejin.cn?target=https%3A%2F%2Fgsap.com%2F "https://gsap.com/")) 是一个比较强大的动画库，可以用来做一些物体的动画过度，使得物体的运动更加丝滑流畅 首先进行下载安装依赖 `npm i gsap` ```main.js import gsap from 'gsap' function animation(materialobj, number) { gsap.to(materialobj.position, { x: number, duration: '1', //持续事件， delay: 2, //延迟多少秒 repeat: 1, //动画重复次数 ease: 'power1.inOut', //运动轨迹 }) } ``` gsap内还有很多的属性和配置项 具体可以查看文档根据需求来进行配置，现在只是认识并且知道这个东西 本文大致就讲解这些，只是粗略的进行框盖一下，后面会进行详细的小点进行拆分（也是当作自己的复习），例如；不同的相机，不同的物体，不同的材质，模型的加载，物体分组，阴影计算，不同灯光的处理等。后面会进行每一种详细小点的拆分讲解，本文没有核心知识，主要就是后期主要用到的东西先进行大致的了解