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

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

场景初始化

js 复制代码

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

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

main.js 复制代码

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标签，这个就是渲染器，因为此刻场景内是没有任何物体的。所以什么都看不到。接下来可以创建一个物体，吧物体加入到场景内

物体创建

main.js 复制代码

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空间

main.js 复制代码

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内置有性能监视工具。可以实时看到当前的渲染帧率刷新频率,一秒渲染次数。

main.js 复制代码

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))是一款开发辅助工具，可以进行位置的调节颜色的调节，选项的调节首先进行依赖下载 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) 是一个比较强大的动画库，可以用来做一些物体的动画过度，使得物体的运动更加丝滑流畅首先进行下载安装依赖 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内还有很多的属性和配置项具体可以查看文档根据需求来进行配置，现在只是认识并且知道这个东西

本文大致就讲解这些，只是粗略的进行框盖一下，后面会进行详细的小点进行拆分（也是当作自己的复习），例如；不同的相机，不同的物体，不同的材质，模型的加载，物体分组，阴影计算，不同灯光的处理等。后面会进行每一种详细小点的拆分讲解，本文没有核心知识，主要就是后期主要用到的东西先进行大致的了解

Three.js入门学习

场景初始化

物体创建

性能监视

dat.gui

gsap