React使用Three.js入门

关山月
0 阅读3分钟

在当今世界，创建引人入胜的Web体验变得比以往任何时候都重要，而3D图形在其中发挥着巨大的作用。无论您是构建交互式产品展示、沉浸式UI组件还是游戏，Three.js可以为开发人员提供一种轻松向网站添加3D元素的方式。

什么是Three.js？

Three.js是一个JavaScript库，可以更轻松地使用WebGL渲染3D图形。WebGL非常强大，但直接使用它很复杂。Three.js简化了这一过程，提供了更轻松地构建3D对象、灯光、相机和动画的工具。

为什么要在React中使用Three.js？

React可以很容易地将用户界面分解为可重用的组件。如果你将它与Three.js结合，可以用类似的方式构建你的3D场景。这有助于使您的代码更加模块化，更易于维护。

幸运的是，有一个名为react-three-fiber的库，它在Three.js和React之间提供了一个桥梁，使得直接在React组件中渲染Three.js元素成为可能。

设置您的3D React项目

要开始使用Three.js和React，让我们安装必要的依赖项。我们将使用：

  • @react-three/fiber：Three.js的React渲染器。
  • @react-three/drei：一个帮助库，包含用于常见Three.js任务的有用工具。

步骤1：安装安装附件

打开你的终端并创建一个新的React应用。然后安装所需的库：

npx create-react-app threejs-react-demo
cd threejs-react-demo
npm install three @react-three/fiber @react-three/drei

步骤2：使用立方体创建您的第一个3D场景

我们将构建一个简单的立方体，它将对单击和鼠标悬停等用户交互做出反应。让我们从创建Scene组件开始。

构建3D立方体组件

在src文件夹中创建一个名为Scene.js的文件，并粘贴以下代码：

// Scene.js
import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';

const RotatingCube = () => {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);

  // Rotate the cube on every frame update
  useFrame(() => {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });

  return (
    <mesh
      ref={meshRef}
      scale={clicked ? 1.5 : 1}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  );
};

const Scene = () => {
  return (
    <Canvas style={{ height: '100vh' }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <RotatingCube />
    </Canvas>
  );
};

export default Scene;

代码是如何工作

  1. Canvas：Canvas组件的作用类似于3D场景的容器，就像HTML中的<canvas>元素一样。
  2. 网格：一个3D对象，它包含几何体（形状）和材质（外观）。在这里，它被用来创建一个立方体。
  3. boxGeometry：一个内置的几何体，用于创建立方体形状。
  4. meshStandardMaterial：支持基本照明的材质。
  5. useRef：一个钩子来引用网格。
  6. useFrame：来自@react-three/fiber的钩子，允许我们连续旋转立方体。

步骤3：在应用中使用场景组件

现在，让我们在主App.js文件中渲染3D场景。

// App.js
import React from 'react';
import Scene from './Scene';

function App() {
  return (
    <div style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
      <Scene />
    </div>
  );
}

export default App;

3D场景增加交互性

我们已经构建了一个简单的立方体，让我们来探索如何改进它。以下是增加场景交互性的几种方法：

添加阴影

阴影为您的3D场景增添了真实感。

<Canvas shadows>
  <ambientLight intensity={0.5} />
  <spotLight position={[10, 10, 10]} angle={0.3} castShadow />
  <mesh receiveShadow>
    <planeGeometry args={[10, 10]} />
    <meshStandardMaterial color="gray" />
  </mesh>
</Canvas>

引入3D模型

您可以使用@react-three/drei中的useGLTF钩子导入更复杂的3D模型（如GLTF/GLB文件）。

import { useGLTF } from '@react-three/drei';

const Model = () => {
  const { scene } = useGLTF('/path-to-your-model/model.gltf');
  return <primitive object={scene} />;
};

大型3D场景的性能

  1. 通过减少多边形数量优化您的3D模型。

  2. 使用更少的灯光，因为照明计算成本高昂。

  3. 启用平截体剔除以避免渲染屏幕外对象。

  4. 使用React的Suspense组件延迟加载大型组件。

原文：dev.to/codeparrot/…

avatar
文章
阅读
粉丝