資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 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 千次以上觀看
廣告