合集-Three.js 进阶之旅
摘要：
本文将学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的动画播放进度或者相机的方位视角，从而呈现出惊艳的视觉效果。通过本文的阅读和案例页面的实现，你将学习到的知识包括：R3F 生态中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等组件和方法的基本用法、在 R3F 中加载模型并播放模型骨骼动画、通过滚动控制模型动画播放进程和相机参数、页面元素的一些 CSS 动画及页面整体丝滑滚动动画实现等。
阅读全文
本文将学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的动画播放进度或者相机的方位视角，从而呈现出惊艳的视觉效果。通过本文的阅读和案例页面的实现，你将学习到的知识包括：R3F 生态中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等组件和方法的基本用法、在 R3F 中加载模型并播放模型骨骼动画、通过滚动控制模型动画播放进程和相机参数、页面元素的一些 CSS 动画及页面整体丝滑滚动动画实现等。
阅读全文
摘要：
本文使用 React + Three.js + React Three Fiber 技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法；了解 @react-three/drei 库的基本组成，学习使用它提供的 Preload、useIntersect、ScrollControls、Scroll、及 Image 等组件和方法；用 CSS 生成简单的循环悬浮动画等。
阅读全文
本文使用 React + Three.js + React Three Fiber 技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法；了解 @react-three/drei 库的基本组成，学习使用它提供的 Preload、useIntersect、ScrollControls、Scroll、及 Image 等组件和方法；用 CSS 生成简单的循环悬浮动画等。
阅读全文
摘要：
本文使用Three.js实现一个可以应用到实际项目中的3D在线看房案例。通过阅读本文和实践案例，你将学到的知识包括：使用 Three.js 实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展示、房间标注等多种类型的交互热点等。
阅读全文
本文使用Three.js实现一个可以应用到实际项目中的3D在线看房案例。通过阅读本文和实践案例，你将学到的知识包括：使用 Three.js 实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展示、房间标注等多种类型的交互热点等。
阅读全文
