使用 React-Three-Fiber 在 React 中创建天空着色器
在本文中,我们将看到如何使用 React-Three-Fiber 在 React JS 中创建天空着色器。它看起来像原始的天空,这确实是一个很棒的效果。Three.js是一个跨浏览器的 JavaScript 库和应用程序编程接口,用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形
示例
首先安装以下软件包 -
npm i --save @react-three/fibernpm 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>对象,该对象为不同的效果采用不同的参数。
很简单,试着调整它的参数,太阳位置,距离,倾角等,看看不同类型的效果。更改参数后,您将看到不同的效果。
输出结果
它将产生以下输出 -
以上是 使用 React-Three-Fiber 在 React 中创建天空着色器 的全部内容, 来源链接: utcz.com/z/363170.html