Three.js学习（一）初识three.js

文章目录

1.基本配置
2.基本概念
3.Api
4.实现一个旋转动画

1.基本配置

（1）安装

npm install three

（2）引入

import * as THREE from 'three'

2.基本概念

Three.js是基于原生WebGL封装运行的三维引擎。

（1）一个简单的小实例

<script setup>
import * as THREE from 'three'

/**
 * 创建场景对象
 */
const scene = new THREE.Scene();

/**
 * 创建网格模型
 */
// const geometry = new THREE.SphereGeometry(60,40,40); 创建一个球体几何对象 
const geometry = new THREE.BoxGeometry(100,100,100); // 创建一个立方体几何对象
const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); // 材质对象material
const mesh = new THREE.Mesh(geometry,material); // 网格模型对象Mesh
scene.add(mesh);

/**
 * 光源设置
 */
// 点光源
const point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300); // 点光源位置
scene.add(point); // 将点光源添加到场景中
// 环境光
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

/**
 * 相机设置
 */
let width = window.innerWidth; // 窗口宽度
let height = window.innerHeight; // 窗口高度
let k = width/height; // 窗口宽高比
let s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
const camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 相机位置设置
camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

/**
 * 创建渲染器对象
 */
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(width,height); // 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff,1); // 设置背景颜色
document.body.appendChild(renderer.domElement); // body元素中插入canvas对象
// 执行渲染操作，指定场景和摄像机
renderer.render(scene,camera); 

</script>

<template>
  
</template>

<style scoped>
 
</style>

运行项目之后，可以在浏览器中看到一个立体正方体的效果。

3.Api

（1）几何体GeoMetry

// 创建一个几何对象GeoMetry
const geometry = new THREE.BoxGeometry(100,100,100); // 可以创建出一个正方体

当然可以以将第一个参数改为50，然后会显示一个长方体的形状。

// 创建一个几何对象GeoMetry
const geometry = new THREE.BoxGeometry(50,100,100); // 可以创建出一个长方体

又或者改为new THREE.SphereGeometry(60,40,40)，则会渲染成一个球体形状。

// 创建一个几何对象GeoMetry
const geometry = new THREE.SphereGeometry(60,40,40); // 创建一个球体

（2）材质Material

const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); // 材质对象material

设置用于几何体的材质对象，通常包含颜色、透明度等属性。

（3）光源Light

const point = new THREE.PointLight(0xffffff);

其中，参数0xffffff是光照强度

（4）相机Camera

const camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 相机位置设置
camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

创建了一个正射投影的摄像机。

4.实现一个旋转动画

这里主要用到了mesh的rotateY()方法，这个方法可以使模型对象沿Y轴旋转。然后动画依托setInterva实现每20ms执行一次渲染，也就是1秒钟进行50次渲染，最后可以获得一个平滑的旋转效果。

const render = () => {
  // 执行渲染操作，指定场景和摄像机
  renderer.render(scene,camera); 
  mesh.rotateY(0.01);
}

setInterval(render,20);

（1）渲染频率

使用.render()方法进行渲染，渲染的频率不能太低，否则会感觉到明显的卡顿，比如setInterval(render,200)，动画会有不流畅的感觉；也不能设置的太高，否则硬件设备的性能会跟不上。通常设置为30~60的频率，可以兼顾性能和视觉体验。

（2）使用requestAnimationFrame()函数实现动画

除了使用setInterval实现动画之外，还可以使用requestAnimationFrame()函数，它同样是window对象的方法。requestAnimationFrame()不会立即调用函数而是向浏览器发起一个执行某函数的请求，什么时候执行由浏览器决定，一般默认会保持60FPS的频率，大约每16.7ms调用一次。

const render = () => {
  // 执行渲染操作，指定场景和摄像机
  renderer.render(scene,camera); 
  mesh.rotateY(0.01);
  requestAnimationFrame(render);//请求再次执行渲染函数render
}

（3）均匀旋转

在实际运行的时候，requestAnimationFrame()可能并不会按照我们实际期望的60FPS执行，两次执行渲染函数的时间也不一定相同，如果执行旋转命令的时间间隔不同，旋转运动就会不均匀。因此需要记录上一次的执行时间，来进行调整。

let t0 = new Date();
const render = ()=> {
  const t1 = new Date();
  const t = t1 - t0;
  t0 = t1;
  requestAnimationFrame(render);//请求再次执行渲染函数render
  // 执行渲染操作，指定场景和摄像机
  renderer.render(scene,camera); 
  mesh.rotateY(0.001);
}

render();