three.js学习(一)

three.js官网文档
这里是使用vite创建的项目，所以可以直接使用import引入

1、安装three.js

npm i three

2、引入three

import * as THREE from 'three'

3、three使用时的逻辑

three是通过canvas这个标签调用webgl的一些方法
使用three.js时要知道场景、灯光、骨架、材质、摄像头
场景中包含灯光和物体
物体由骨架和材质组成
灯光决定了物体在场景中表现的形式（比如投影方向之类的）
摄像头就相当于观察场景的眼睛，不然光有场景没眼看的话不就啥都看不到么

4、最简洁的three.js程序

import * as THREE from 'three'
// 获取页面内容的大小
let w = window.innerWidth
let h = window.innerHeight
// 创建场景
const scene = new THREE.Scene()
// 创建骨架
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建基础材质
const material = new THREE.MeshBasicMaterial()
// 创建一个立方体
const cube = new THREE.Mesh(geometry, material)
// 把立方体添加到场景中
scene.add(cube)
// 创建一个环境光，因为材质问题所以这个也可以不写
const light = new THREE.AmbientLight()
// 把环境光放到环境里
scene.add(light)
// 创建一个摄像头 参数分别是摄像头可以观察到的斜角、摄像头镜头的宽高比例、最近可以看到的距离、最远可以看到的距离
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 10)
// 设置摄像头的位置
camera.position.set(5,5,5);
// 设置摄像头朝向哪里
camera.lookAt(0,0,0)
// 创建一个webgl的编辑器
const renderer = new THREE.WebGL1Renderer()
// 设置canvas的大小
renderer.setSize(w,h)
renderer.render(scene,camera)
document.body.append(renderer.domElement)

5、添加坐标系

添加用作参考的X,Y,Z坐标系
可以给创建添加也可以给物体和组添加

.....
const scene = new THREE.Scene()
const axes = new THREE.AxesHelper(5,5,5)
scene.add(axes)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial()
const cube = new THREE.Mesh(geometry, material)
cube.rotation.z = 0.6
// clone是拷贝方法，这里如果不使用的话场景的坐标系就没了，对象不能直接重复使用
cube.add(axes.clone())
....

6、旋转、定位、缩放

旋转（rotation）
定位（position）
缩放（scale）
继续使用上面创建的那个立方体

....
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial()
const cube = new THREE.Mesh(geometry, material)
cube.rotation.x = 0.6
cube.rotation.y = 0.6
cube.rotation.z = 0.6
// cube.rotation.set(0.6,0.6,0.6)
cube.position.x = 1
cube.position.y = 1
cube.position.z = 0.6
// cube.position.set(1,1,0.6)
cube.scale.x = 1
cube.scale.y = 1
cube.scale.z = 2
// cube.scale.set(1,1,2)
....

7、requestAnimationFrame

一般浏览器页面的刷新频率时60HZ(1/60s)
每次页面帧刷新时都会调用requestAnimationFrame

.....
document.body.append(renderer.domElement)

const clock = new THREE.Clock()
function cubeAnmiation(){
    
    
	// 是一个页面每次帧数刷新是都会增加的一个数组
	// 如果刷新频率是60HZ的话每次就会增加1/60左右
    var currentTime = clock.getElapsedTime()
    // -5到5之间的一个数值
    cube.position.x = currentTime % 10 - 5
    renderer.render(scene,camera)
    requestAnimationFrame(cubeAnmiation)
}
cubeAnmiation()

下图是运动中的某个运动帧

7、添加帧数监听

用来监听帧数波动的

....
import Stat from "three/examples/jsm/libs/stats.module"
....
document.body.append(renderer.domElement)
// 把要展示的东西放到body中
document.body.append(stat.domElement)
const clock = new THREE.Clock()
function cubeAnmiation(){
    
    
    var currentTime = clock.getElapsedTime()
    cube.position.x = currentTime % 10 - 5
    renderer.render(scene,camera)
    // 更新fps数据
    stat.update()
    requestAnimationFrame(cubeAnmiation)
}
cubeAnmiation()