通过使用React和react-three-fiber开始使用WebGL

2 年 ago

文, 翔

2 minutes

首先

我通常使用手机应用程序来管理体重，但是二维图表看起来有点丑陋…
突然想到了：“对了！现在应该学习一下WebGL！”但是直接使用WebGL似乎很困难…
所以我尝试了一下从React开始，发现react-three-fiber相对而言处理WebGL相对简单，于是我试了试。

最终目标是展示一个很酷的体重管理图表。因此，这次的目标如下。

簡単な画面を表示

环境设置

首先，需要安装Node.js。

由于草稿的创建时间是在18.12.1被推荐为最新版本的时候，所以会选择安装这个版本。
我将使用安装程序的默认设置进行安装。

安装结果确认

打开命令提示符，使用node命令来检查版本。
如果版本显示出来，则表示安装正常完成。

node -v
18.12.1

创建React项目

在适当的文件夹中执行创建项目的命令。
这里将其命名为test-app-front。

npx create-next-app test-app-front

由于在安装过程中会被问到以下问题，请选择两个选项都为“是”。

? Would you like to use TypeScript with this project? » No / Yes
? Would you like to use ESLint with this project? » No / Yes

请测试是否正常工作。

cd test-app-front
npm run dev

Three.js的引入和编码

請安裝用於 Three.js、react-three-fiber 和 typescript 的型定義。

npm install three @types/three @react-three/fiber

参考github的样例，在index.ts文件中进行实现。

import type { NextPage } from "next";
import React, { useRef, useState } from "react";
import * as THREE from "three";
import { Canvas, useFrame } from "@react-three/fiber";

const Home: NextPage = () => {
  const Box = (props: JSX.IntrinsicElements["mesh"]) => {
    const ref = useRef<THREE.Mesh>(null!);
    const [hovered, hover] = useState(false)
    const [clicked, click] = useState(false)
    useFrame((state, delta) => (ref.current.rotation.x += 0.01));
    return (
      <mesh
        {...props}
        ref={ref}
        scale={clicked ? 1.5 : 1}
        onClick={(event) => click(!clicked)}
        onPointerOver={(event) => hover(true)}
        onPointerOut={(event) => hover(false)}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
      </mesh>
    );
  };

  return (
    <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>
  );
};

export default Home;

确认行动

我们立即执行一下吧。

npm run dev

版本信息

typescript”: “4.8.4