使用 React-Three-Fiber 在 React 中创建天空着色器

react jsjavascript libraryfront end technology更新于 2025/11/19 15:40:17

在本文中，我们将学习如何使用 React-Three-Fiber 在 React JS 中创建天空着色器。它看起来就像原始的天空，效果非常棒。 Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。

示例

首先安装以下软件包 −

npm i --save @react-three/fiber
npm i --save @react-three/drei

react-three/fiber 将用作 ThreeJS 和 React.js 之间的中间件，而 drei 将用于在其中实现预制的可优化天空效果。

现在，在 App.js 中插入以下代码 −

import React from "react";
import { Canvas } from "react-three-fiber";
import { Sky } from "@react-three/drei";

export default function App(props) {
   return (
      <Canvas>
         <Sky
             distance={450000}
             sunPosition={[5, 1, 8]}
             inclination={0}
             azimuth={0.25}
             {...props}
         />
      </Canvas>
   );
}