使用指针灯在 React JS 中使用 React-Three-Fiber 获得更好的照明

Z时代
2024-01-10
分类：综合

在本文中，我们将看到如何在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>
   );
}