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

在本文中，我们将看到如何使用 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>
   );
}

解释

在这里，我们简单地创建了一个 Canvas，其中我们创建了<Sky>对象，该对象为不同的效果采用不同的参数。

很简单，试着调整它的参数，太阳位置，距离，倾角等，看看不同类型的效果。更改参数后，您将看到不同的效果。

输出结果

它将产生以下输出 -