如何使用 react-three-fiber 在 React 中创建 3D 立方体
react jsjavascript libraryfront end technology更新于 2025/11/17 11:24:17
在本文中，我们将了解如何使用第三方包 react-three-fiber 在 React 中使用 Three.js。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口 (API)，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。
示例
首先，安装 react-three-fiber 包
npm i --save @react-three/fiber three
threejs 和 react-three/fiber 将用于向网站添加 WebGL 渲染器。
在 App.js 中添加以下代码
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial color={"orange"} />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Box position={[0, 0, 0]} />
</Canvas>
);
}
解释
<mesh> 用于创建一个 threeJS 对象，并在其中使用 boxGeometry 创建了一个盒子，用于定义其大小、形状和结构。
我们使用 meshStandardMaterial 设计几何结构。
<mesh> 用于将结构和设计结合起来。 我们创建了一个功能组件，并在其中添加了引用。
然后我们创建了一个 Frame，用于改变网格对象或立方体的位置。接下来，我们添加了参考框架并赋予了网格参考。
我们使用 position 参数来定位对象。
<AmbientLight> 用于使颜色可见;如果没有它，<Box> 将完全显示为黑色。
输出
它将产生以下输出 −
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
