react-three-fiber 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
react-three-fiber 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
react-three-fiber 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
react-three-fiber 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
react-three-fiber 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 Windows
软件类型 开源软件
开源组织
地区 不详
提 交 者 御坂弟弟
适用人群 未知
收录时间 2021-01-19

软件简介

react-three-fiber 是针对 Web 和 react-native 上的 threejs 的 React 渲染器。

特点

  • 使用可重用的组件以声明方式构建动态场景图,使 Threejs 的处理变得更加轻松,并使代码库更加整洁。这些组件对状态变化做出反应,具有开箱即用的交互性。

  • 在 threejs 中工作的所有内容都将在这里工作。它不针对特定的 Threejs 版本,也不需要更新以修改,添加或删除上游功能。

  • 渲染性能与 threejs 和 GPU 相仿。组件参与 React 之外的 renderloop 时,没有任何额外开销。

使用示例

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => {
    mesh.current.rotation.x = mesh.current.rotation.y += 0.01
  })

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/06/22 18:46

react-fiber 解析

react 运行时存在 3 种实例。 DOM 真实 DOM 节点 Instance React 维护的 vDOM Element 描述 UI 长什么样子 (type,props) 在首次渲染过程中构建出 vDOM tree,后续需要更新时 (setState()),diff vDOM tree 得到 DOM change,并把 DOM change 应用(patch)到 DOM 树。 Fiber 之前的 reconciler (被称为 Stack reconciler)自顶向下地递归 mount/update,无法中断(持续占用主线程)。 Fiber 解决这个问题的思路是把渲染/...

0
0
发表了博客
2018/01/06 12:26

完全理解React Fiber

感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(WebGL)、语文(课外书读后感)、英语(文档翻译) 如果觉得弱水三千,一瓢太少,可以去 http://blog.ayqy.net 看个痛快 一.目标 Fiber是对React核心算法的重构,2年重构的产物就是Fiber reconciler 核心目标:扩大其适用性,包括动画,布局和手势,包括5个具体目标(后2个算送的): 把可中断的工作拆分...

0
0
发表了博客
01/10 10:09

React fiber 架构浅析

为什么会出现 React fiber架构 React 15 Stack Reconciler 是通过递归更新子组件 。由于递归执行,所以更新一旦开始,中途就无法中断。当层级很深时,递归更新时间超过了16ms,用户交互就会卡顿。 React16 Fiber Reconciler 通过把diff算法分成很多小片。当一个小片执行完成时,由浏览器判断是否有时间继续执行新任务,没时间就终止执行,有时间就检查任务列表中有没有新的、优先级更高的任务,有就做这个新任务,一直重复这个操...

0
0
发表了博客
01/17 13:35

完全理解React Fiber

一.目标 Fiber是对React核心算法的重构,2年重构的产物就是Fiber reconciler 核心目标:扩大其适用性,包括动画,布局和手势,包括5个具体目标(后2个算送的): 把可中断的工作拆分成小任务 对正在做的工作调整优先次序、重做、复用上次(做了一半的)成果 在父子任务之间从容切换(yield back and forth),以支持React执行过程中的布局刷新 支持render()返回多个元素 更好地支持error boundary 既然初衷是不希望JS不受控制地...

0
0
发表于大前端专区
2019/09/16 07:50

React Fiber:深入理解 React reconciliation 算法

关键词 | React 你会等我的,因为,我让自己等了你很久。 -《去年在马里昂巴地》 作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/ React 是一个用于构建用户交互界面的 JavaScript 库,其核心机制就是跟踪组件的状态变化,并将更新的状态映射到到新的界面。在 React 中,我们将此过程称之为协调。我们调用setState方法来改变状态,而框架...

0
0
发表了博客
2019/02/23 21:48

React Fiber 数据结构揭秘

此章节会通过两个 demo 来展示 Stack Reconciler 以及 Fiber Reconciler 的数据结构。 个人博客 首先用代码表示上图节点间的关系。比如 a1 节点下有 b1、b2、b3 节点, 就可以把它们间的关系写成 a1.render = () => [b1, b2, b3]; var a1 = { name: 'a1', render = () => [b1, b2, b3] } var b1 = { name: 'b1', render = () => [c1] } var b2 = { name: 'b2', render = () => [c2] } var b3 = { name: 'b3', render = () => [] ...

0
0
发表于大前端专区
2020/07/10 08:08

深入 React Fiber 架构和协调算法

声明 •作者:Max Koretskyi[1]•原文[2]•Dendoink 译[3] 作 React学习指北中,幸得此文,受益匪浅。 虽已有中译版,然细读之,察屡有误,故与作者通后更译,此新译之文,与诸君享。 「此文同步在 frontendwingman.com 中的 React 指北系列。有条件同学可以选择 PC 端阅读,体验更加。」 正文 深入研究 React 称为 Fiber 的新架构,了解新 reconciliation 算法的两个主要阶段。 我们将详细介绍 React如何更新 state,props 和处...

0
0
2020/08/14 11:01

你也可以理解的React Fiber,学废了吗

编者荐语:本文旨在帮助大家在闲暇时间掌握React16.8版本的重大性能优化之React Fiber。 Fiber出现的背景? 在早期的React版本中,也就是React16.8版本之前。 大量的同步计算任务阻塞了浏览器的UI渲染。默认情况下,JS运算、页面布局和页面绘制渲染都是运行在浏览器的主线程当中,他们之间是互斥的关系。 如果JS运算持续占用主线程,页面就没法得到及时的更新,当我们调用setState更新页面的时候,React会遍历应用的所有节点,与...

0
0
发表了博客
2020/07/22 09:37

React 是如何创建 vdom 和 fiber tree

前言 本篇文章作为react源码分析与优化写作计划的第一篇,分析了react是如何创建vdom和fiber tree的。本篇文章通过阅读react 16.8及以上版本源码以及参考大量分析文章写作而成,react框架本身算法以及架构层也是不断的在优化,所以源码中存在很多legacy的方法,不过这并不影响我们对于react设计思想的学习和理解。 阅读源码一定要带着目的性的去展开,这样就会减少过程中的枯燥感,而写作能够提炼和升华自己的学习和理解,这也是...

0
0
发表于大前端专区
2020/06/28 08:30

React 是如何创建 vdom 和 fiber tree

作者:linxiangjun 原文链接:https://www.linxiangjun.com/react-render-source.html#JSX 前言 本篇文章作为react源码分析与优化写作计划的第一篇,分析了react是如何创建vdom和fiber tree的。本篇文章通过阅读react 16.8及以上版本源码以及参考大量分析文章写作而成,react框架本身算法以及架构层也是不断的在优化,所以源码中存在很多legacy的方法,不过这并不影响我们对于react设计思想的学习和理解。 阅读源码一定要带着目...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
11 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部