資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究在 React JS 中使用點光源來改善 React-Three-Fiber 中的燈光效果
在本文中，我們將學習如何在 **react-three-fiber** 中使用不同型別的燈光來使我們的物體看起來更好。它主要充當指向物體的火炬光。Three.js 需要光線來顯示顏色、陰影效果以及許多不同型別的效果。
我們將建立一個立方體，然後新增點光源。
示例
首先，安裝以下包：
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 WebGL 渲染器，而 **three-fiber** 將用於連線 **threejs** 和 React。
現在，將以下程式碼行插入 **App.js** 中：
import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial color={"orange"} />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[0, 0, 0]} />
</Canvas>
);
}解釋
**pointLight** 接受一個引數，即 **position**。我們設定其“x、y、z”座標；它位於物體後方對角線方向。
我們用它來建立物體上的陰影效果。
輸出
執行後，將產生以下輸出：
您可以注意到立方體側面有陰影效果。黃色在右側顯得較暗，在正面顯得較亮。這就像我們在立方體後面設定了一個手電筒，因此產生了陰影效果。您可以根據需要新增任意數量的 **pointLight**。
更新於：2021年9月29日
瀏覽量 1K+
廣告