Three.js 进阶之旅：滚动控制模型动画和相机动画 🦢
Posted dragonir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js 进阶之旅：滚动控制模型动画和相机动画 🦢相关的知识，希望对你有一定的参考价值。
本文将学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的动画播放进度或者相机的方位视角，从而呈现出惊艳的视觉效果。通过本文的阅读和案例页面的实现，你将学习到的知识包括：R3F 生态中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等组件和方法的基本用法、在 R3F 中加载模型并播放模型骨骼动画、通过滚动控制模型动画播放进程和相机参数、页面元素的一些 CSS 动画及页面整体丝滑滚动动画实现等。
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
专栏上篇文章《Three.js 进阶之旅：页面*滑滚动-王国之泪》 讲解并实现了如何使用 R3F 进行页面图片*滑滚动，本文内容在上节的基础上，学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的动画播放进度或者相机的方位视角，从而呈现出惊艳的视觉效果。这种有趣的效果大家在*时浏览一些网页的时候应该经常见到，如一些 3D产品 介绍页向下滑动鼠标滚轮时产品同时旋转并根据产品的不同视角加载不同文案、或者 3D数字地球 根据滚轮的移动距离转到某个国家或地区、还有一些 个人简历 页面或时间轴页面也经常用到这种效果。通过本文的阅读和案例页面的实现，你将学习到的知识包括：R3F 生态中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等组件和方法的基本用法、在 R3F 中加载模型并播放模型骨骼动画、通过滚动控制模型动画播放进程和相机参数、页面元素的一些 CSS 动画及页面整体丝滑滚动动画实现等。
效果
本文案例的实现效果如下图所示，页面主体元素由一个三维模型 Three.js 进阶之旅：全景漫游-初阶移动相机版
Three.js 进阶之旅：全景漫游-初阶移动相机版
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
3D 全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的，当然了目前已经有很多相关内容的文章，我之前就写过一篇《Three.js 实现3D全景侦探小游戏》。因此本文内容及此专栏下一篇文章讨论的重点不是如何实现 3D 全景图功能，而是如何一步步优雅实现在多个3D全景中穿梭漫游，达到如在真实世界中前进后退的视觉效果。
全景漫游系列文章将分为上下两篇，本篇内容我们先介绍如何通过移动相机的方法来达到场景切换的目的。通过本文的学习，你将学到的知识点包括：在 Three.js 中创建全景图的几种方式、在 3D 全景图中添加交互热点、利用 Tween.js 实现相机切换动画、多个全景图之间的切换等。
效果
本文最终将实现如下的效果，左右控制鼠标旋转屏幕可以预览室内三维全景图，同时全景图内有多个交互热点，它们标识着三维场景内的一些物体，比如沙发 以上是关于Three.js 进阶之旅：滚动控制模型动画和相机动画 🦢的主要内容，如果未能解决你的问题，请参考以下文章