QQs'Note
0%

React-Three-Fiber

Posted on Edited on

@React-three/fiber

开箱即用(out of box) 组件化场景对象如
\ \ \

1
npm i three @react-three/fiber

额外的，transpile in Next.js, set in next.config.js:

1
transpilePackages: ['three'],

React Native中需要expo-gl

1
2
3
4
5
# Automatically install
expo install expo-gl

# Install NPM dependencies
npm install three @react-three/fiber

set Metro boundle tool if use loader, gltf and so on

1
2
3
4
5
6
7
// metro.config.js
module.exports = {
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
  },
}

简单的栗子

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
import { Canvas } from '@react-three/fiber'

const App = () => (
  <Canvas>{/* 相当于初始化的Scene */}
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </Canvas>
)

@React-three/drei

@react-three/drei 是一个工具包（Utility Library），为 @react-three/fiber 提供了一系列高阶组件和实用函数，比如加载模型(useGLTF)、添加环境光(Environment)、设置相机控制(OrbitControls)等。 德语单词“Drei”，意思是“三”
从零探索@react-three/fiber @React-three/drei

Leva

1
npm install leva@latest --save-dev
1
2
3
4
5
6
7
8
9
import { useControls } from 'leva'

const color = useControls({
  value: 'green',
})

<Canvas>
  <color attach="background" args={[color.value]} />
</Canvas>

#