React-Three-Fiber 中文文档

学会如何安装 react-three-fiber

Installation 安装

Create React App

vite 也是开箱即用的

# Create app
npm create vite my-app

# Select react as framework

# Install dependencies
cd my-app
npm install three @react-three/fiber

# Start development server
npm run dev

npm install three @react-three/fiber

Fiber 和 React18 及更高版本兼容，可以和 React DOM 以及 React Native一起配合使用

开始使用React Three Fiber并不像你想象的那样难，但是各种框架可能需要特别注意。

我们已经为每个流行框架编写了入门指南：

— Create React App

— Vite.js

— Next.js

— CDN w/o build tools

— React Native

如果你只是想试一试，可以在codesandbox上fork这个示例！

create-react-app 命令是开箱即用的，不需要什么特殊的操作。

# Create app 创建应用
npx create-react-app my-app

# Install dependencies 安装依赖
cd my-app
npm install three @react-three/fiber

# Start development server 启用开发服务器
npm run start

Vite.js

Next.js

它应该可以直接使用，但是你会在three.js生态系统中遇到未转译的插件，在这种情况下，需要进行一些额外的配置：

Next.js 13.1 以及更新的版本

你需要在 next.config.js文件中设置 transpilePackage 属性：

transpilePackages: ['three'],

Next.js 13.0 以及以前的版本

你需要安装 next-transpile-modules 模块:

npm install next-transpile-modules --save-dev

然后添加到你项目中的 next.config.js 文件中:

const withTM = require('next-transpile-modules')(['three'])
module.exports = withTM()

可以看下我们的官方 nextjs 模板！

Without build tools

在浏览器支持的前提下，你可以使用来自esm.sh的ES模块以及由htm提供支持的类JSX语法来使用React Three Fiber。

import ReactDOM from 'https://esm.sh/react-dom'
import React, { useRef, useState } from 'https://esm.sh/react'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber'
import htm from 'https://esm.sh/htm'

const html = htm.bind(React.createElement)

function Box(props) {
  const meshRef = useRef()
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  useFrame(() => (meshRef.current.rotation.x = meshRef.current.rotation.y += 0.01))
  return html` <mesh
    ...${props}
    ref=${meshRef}
    scale=${active ? 1.5 : 1}
    onClick=${() => setActive(!active)}
    onPointerOver=${() => setHover(true)}
    onPointerOut=${() => setHover(false)}
  >
    <boxGeometry args=${[1, 1, 1]} />
    <meshStandardMaterial color=${hovered ? 'hotpink' : 'orange'} />
  </mesh>`
}

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

React Native

React-Three-Fiber v8增加了对React Native的支持，可以从@react-three/fiber/native导入。我们在后台使用expo-gl和expo-asset进行WebGL2绑定，并确保Metro和threejs加载程序之间的交互。

可以通过 expo 或者 react-native 来创建 app：

# Create a managed/bare app
npx create-expo-app
cd my-app

# or

# Create and link bare app
npx react-native init my-app
npx install-expo-modules@latest
cd my-app

然后安装依赖（如果要手动安装或者整合，可以看 expo modules installation）

# Automatically install
expo install expo-gl

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

如果你使用 useLoader 或 Drei 的一些模块，如 useGLTF 和 useTexture，可能需要进行一些配置来告诉 Metro bundler 有关你的资产：

// metro.config.js
module.exports = {
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
  },
}

React-Three-Fiber 的 API 完全是跨平台的，因此你可以像在 Web 上一样使用events和 hooks。

只需确保从 @react-three/fiber/native 或 @react-three/drei/native 导入以使用它们的native目标。

React-Three-Fiber

官方网站

JavaScript | 高手之路

全能课

Best

MasterJS

Made By