Three.js 学习(2): 滚动效果+数据展示

最新推荐文章于 2025-07-22 17:03:40 发布

泛泛之素

最新推荐文章于 2025-07-22 17:03:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react threejs

本文链接：https://blog.csdn.net/tonydz0523/article/details/108473536

本文介绍如何利用Three.js和react-three-fiber创建一个数据展示应用，包括滚动效果、添加HTML元素、使用lerp函数平滑过渡、Suspense异步加载、左右切换功能、选择不同可视化图形及构建数据列表。示例中图表部分采用了plotly库，并提供了代码演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到了react-three-fiber作者展示的作品https://codesandbox.io/embed/r3f-moksha-f1ixt，心声敬佩，大呼卧草，就想能不能用这个套子做一个数据展示的东
西，于是搞起。

先看一下效果，虽然写的跟大佬的比就是shi，但是还是记录一下知识点：

图表部分使用的是plotly

1. 滚动实现

通过滚动栏控制position的y
通过offset和factor来控制各个block的位置，以及位置变更方向

function Block({
   
    children, offset, factor, ...props }) {
   
   
    const {
   
    offset: parentOffset, sectionHeight } = useBlock();
    const ref = useRef();
    offset = offset !== undefined ? offset : parentOffset;
    useFrame(() => {
   
   
        const curY = ref.current.position.y;
        const curTop = state.top.current;
        ref.current.position.y = lerp(curY, (curTop / state.zoom) * factor, 0.1)
    });
    return (
        <offsetContext.Provider value=