个人简介

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

Three.js 系列文章目录

Three.js 专栏	参考链接
Three.js 入门案例	程序人生——与足球共舞的火柴人
Three.js 入门（一）	创建第一个场景和物体（轨道控制器、坐标轴辅助器…）

---

---

一、Clock 跟踪时间处理动画

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

// 设置时钟（该对象用于跟踪时间）
const clock = new THREE.Clock()
// 渲染函数
function render() {
    // 获取自时钟启动后的秒数，同时将旧时间设置为当前时间
    let time = clock.getElapsedTime()

    let t = time % 4
    cube.position.x = t * 1

    renderer.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",
    // 设置重复的次数，无限次循环 -1
    repeat: 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()

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

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

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

// 设置控制器阻尼，让控制器更有真实效果，必须在动画循环里调用.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.fullscreenElement
    if (!fullScreenElement) {
    	// 双击控制屏幕进入全屏
        renderer.domElement.requestFullscreen()
    } else {
        // 退出全屏
        document.exitFullscreen()
    }
})

---