中文官网：www.webgl3d.cn/
所有版本：Releases · mrdoob/three.js (github.com)
官网：threejs.org/
官网中文文档地址：three.js docs (threejs.org)
一、创建vue3项目：
npm create vite
二、添加three
npm i three -S
三、上代码
Three的三大元素：场景，摄像机，渲染器
1、 创建场景
import * as THREE from "three";
//1、场景
const scene = new THREE.Scene();
2、 创建摄像机
//四个参数，摄像机锥体角度，摄像机锥体看到的宽高比（设置成宽口的宽高比就可以了），摄像机锥体看到物体的最近和最远的距离
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
//相机的位置
camera.position.set(200, 200, 200);
//相机的视线，观察目标点的坐标
//camera.lookAt(0, 200, 0);
camera.lookAt(cube.position);//指向网格模型
3、 创建渲染器
const render = new THREE.WebGLRenderer({
//抗锯齿
antialias: true,
});
//设置渲染的画面宽高
render.setSize(window.innerWidth, window.innerHeight);
//将生成的canvas添加页面dom中
document.getElementById("app").appendChild(render.domElement);
4、 创建立方体，最终添加到场景中才可以在页面上显示
//创建立方体
const box = new THREE.BoxGeometry();
//创建材质-皮肤
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
//设置线性呈现
wireframe: true,
});
//将材质渲染到立方体上,最终得到有材质的立方体
const cube = new THREE.Mesh(box, material);
//在场景中添加立方体
scene.add(cube);
//-----设置外部皮肤,也叫纹理贴图
import bg from './assets/bg.png'
//创建材质-皮肤
const material = new THREE.MeshBasicMaterial({
color: '#fff',
//设置线性呈现
// wireframe: true,
//皮肤
map:texture
});
//花纹 const texture = new THREE.TextureLoader().load(bg);
5、 设置camera的距离，否则摄像机在原点（0，0，0）的位置。
camera.position.z = 10;
camera.position.x = 4;
camera.position.y = 10;
6、 添加轨道控制器，控制摄像机的位置，不影响在页面上的位置。
const controls = new OrbitControls(camera, render.domElement);
//是否开起控制器阻尼系数（理解为对旋转的阻力，系数越小阻力越小）
//请注意，如果该值被启用，必须在动画循环中调用.update()
controls.enableDamping = true;
// controls.target = new THREE.Vector3(0, 0, 0);//设置控制器目的坐标
// controls.maxPolarAngle = (Math.PI / 4) * 3 //控制器垂直方向最大旋转角度（理解为逆时针旋转角度）
// controls.minPolarAngle = Math.PI / 4//控制器垂直方向最大小旋转角度（理解为顺时针旋转角度）
// controls.minDistance = 95; //限制视线最近距离
// controls.maxDistance = 130;//限制视线多远距离
// controls.dampingFactor = 0.6;//设置阻尼系数（如果设置阻尼系数，这涉及到了模型的动态渲染所以在渲染器中需要一直调用.update()。调用update()的前提是需要建立一个时钟 如下）
// var clock = new THREE.Clock();
7、 添加辅助坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper)
8、 添加辅助网格
//辅助网格，一个参数是格子的大小，第二个参数是一行有几个格子
const gridHelper = new THREE.GridHelper(20, 10);
scene.add(gridHelper)
9、 在页面渲染场景和相机
////在页面渲染场景和相机
//render.render(scene, camera);
//旋转和放大功能
function init() {
controls.update();
//在页面渲染场景和相机
render.render(scene, camera);
//requestAnimationFrame浏览器的方法
requestAnimationFrame(init);
}
init();
9、 页面自适应
window.addEventListener("resize", () => {
//更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像头的投影矩阵
camera.updateProjectionMatrix();
//更新渲染器
render.setSize(window.innerWidth, window.innerHeight);
//设置渲染器的像素比
render.setPixelRatio(window.devicePixelRatio)
});
10、 位移
//设置位移
cube.position.y += 0.01;
注：如果想要循环增加位移，在init方法（自定义的循环函数）中添加
//设置位移
cube.position.y += 0.01;
//当y到达3，还原到0
if(cube.position.y > 3){
cube.position.y = 0;
}
//或者通过公式，其中time是requestAnimationFrame函数的执行时间
//位移= 速度*时间
let v = 1;
let t = (time / 1000) % 5;
cube.position.y = v * t;
///可以直接使用gsap动画库
tips:动画可使用动画库
10.1 gsap动画库
官网：Installation | GSAP | Docs & Learning
10.1.1 安装gsap
npm install gsap
10.1.2 示例
import gsap from 'gsap';
gsap.to(cube.position, {duration:2,ease:"elastic.out(1,0.3)", y:5});
10.2 tween动画库
官网：tween.js 用户指南 | tween.js (tweenjs.github.io)
10.2.1 安装tween
10.2.2 示例
const tween = new TWEEN.Tween(coords, false) // Create a new tween that modifies 'coords'.
.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
.easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
.onUpdate((that) => {
cube.position.x = that.x;
cube.position.y = that.y;
})
.start() // Start the tween immediately.
//在init方法（自定义的循环函数）中添加
tween.update(time)
11、缩放
//设置缩放
// cube.scale.x = 3;
cube.scale.set(2, 1,1);//同时对多个方向进行缩放，1是原始大小
12、旋转
//设置旋转
// cube.rotation.x = 45;
cube.rotation.set(45, 0, 0);//同时对多个方向进行旋转,0为初始值
注：如果想要循环旋转，在init方法（自定义的循环函数）中添加
cube.rotation.x += 0.01;
//当x到达45度角，还原到0
if (cube.rotation.x > 45) {
cube.rotation.x = 0;
}
