react-three-fiber用于 Three.js 的 React 渲染器
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')
)
评论
Enzyme用于 React 的 JS 测试工具
Enzyme来自airbnb公司,是一个用于React的JavaScript测试工具,方便你判断、操纵和历遍ReactComponents输出。Enzyme的API通过模仿jQuery的API,使得D
Enzyme用于 React 的 JS 测试工具
0
Verbum用于 React 的灵活文本编辑器
Verbum是一个相当灵活的富文本编辑器,基于lexical-playground和lexical框架。值得注意的是,由于Lexical框架目前尚处于早期开发阶段,因此这个组件库也可能会经常变化。In
Verbum用于 React 的灵活文本编辑器
0
Reactide用于 React Web 应用开发的专用 IDE
Reactide 是首个用于 React Web 应用开发的专用 IDE 。Reactide 是一个
Reactide用于 React Web 应用开发的专用 IDE
0