个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端
📃个人状态： 在校大学生一枚，已拿多个前端 offer（秋招）
🚀未来打算： 为中国的工业软件事业效力n年
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js 🍒Three.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享&商务合作，快加入进来吧

Three.js 系列文章目录

文章目录

• Three.js 系列文章目录
• • 一、Clock 跟踪时间处理动画
  • 二、Gsap 动画库
  • 三、根据尺寸变化实现自适应画面
  • 四、控制画布进入&退出全屏

【使用 Three.js 实现的效果】

一、Clock 跟踪时间处理动画

接上篇文章，我们创建时钟对象，用于跟踪时间

// 设置时钟（该对象用于跟踪时间）
const clock = new THREE.Clock()
// 渲染函数
function render() {// 获取自时钟启动后的秒数，同时将旧时间设置为当前时间let time = clock.getElapsedTime()let t = time % 4cube.position.x = t * 1renderer.render(scene, camera)// 请求动画帧-下一帧的时候重新渲染requestAnimationFrame(render)
}render()

二、Gsap 动画库

Gsap 动画库官方网址

终端键入如下命令，安装 gsap：

npm install gsap

我们删掉时钟的相关代码，修改如下：

import * as THREE from 'three'
import { OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import gsap from "gsap"......// 设置动画（0-4的位置5s时间）
let animate = gsap.to(cube.position, {// x 轴的位置x: 4,// 移动的时间duration: 5,// 移动方式ease: "power1.inOut",// 设置重复的次数，无限次循环 -1repeat: 2,// 往返运动yoyo: true,// 延迟两秒运动delay: 2,// 动画完成onComplete: () => {console.log("动画完成")},// 动画开始onStart: () => {console.log("动画开始");}
})// 设置旋转（5s旋转360°）
gsap.to(cube.rotation, {x: 2 * Math.PI,duration: 5,ease: "power1.inOut"
})// 双击屏幕暂停/恢复
window.addEventListener("dblclick", () => {if (animate.isActive()) {// 动画暂停animate.pause()} else {// 动画恢复animate.resume()}
})// 渲染函数
function render() {renderer.render(scene, camera)// 请求动画帧-下一帧的时候重新渲染requestAnimationFrame(render)
}render()

Gsap 控制动画属性和方法

三、根据尺寸变化实现自适应画面

添加控制器阻尼：更好的转动效果（丝滑）

根据上文，添加修改代码如下：

// 设置控制器阻尼，让控制器更有真实效果，必须在动画循环里调用.update()
controls.enableDamping = true// 渲染函数
function render() {// 在动画循环里调用.update()controls.update()renderer.render(scene, camera)// 请求动画帧-下一帧的时候重新渲染requestAnimationFrame(render)
}render()

监听画面的变化，更新渲染画面（尺寸变化，自动更新）

在上文基础上，添加如下代码：

window.addEventListener('resize', () => {console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight// 更新摄像机的投影矩阵camera.updateProjectionMatrix()// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight)// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})

阻尼+自适应画面

四、控制画布进入&退出全屏

进入全屏：renderer.domElement.requestFullscreen()，退出全屏：document.exitFullscreen()

注：去掉原先的动画和旋转的双击效果，修改代码如下：

// 双击屏幕进入/退出全屏
window.addEventListener("dblclick", () => {// 获取全屏（非全屏输出为null，全屏输出为画布）const fullScreenElement = document.fullscreenElementif (!fullScreenElement) {// 双击控制屏幕进入全屏renderer.domElement.requestFullscreen()} else {// 退出全屏document.exitFullscreen()}
})