在 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+

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告