使用 React-Three-Fiber 在 React 中建立一個天空著色器

在本文中，我們將瞭解如何使用 React-Three-Fiber 在 React JS 中建立一個天空著色器。它看起來就像真實的天空，並且它確實是一種絕佳的效果。Three.js 是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面，用於在 Web 瀏覽器中使用 WebGL 建立和顯示動畫 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>
   );
}

說明

這裡，我們只在其中建立了 <Sky> 物件的畫布，該物件帶有不同的引數以實現不同的效果。

它非常簡單，嘗試調整它的引數sunposition、distance、inclination 等，以便檢視不同型別的效果。更改引數後，你將看到不同的效果。

輸出

它將會產生以下輸出 −

更新於： 29-9 月-2021

2 千次以上觀看

開啟你的 事業

完成課程取得認證

開始
廣告