摘要

使用 react-three-fiber 库，将 GLTF 格式的 3D 模型放在自己的网站上。

环境

"next": "12.2.5",
"react": "18.2.0",
"@react-three/drei": "^9.34.4",
"@react-three/fiber": "^8.8.10",
"three": "^0.145.0"

除此以外，我在筆者的環境中還安裝了react-bootstrap等庫，但是省略了。

目录结构

根目录/
├ 页面/
│ 　 └ index.tsx
├ 组件/
│ 　 └ model.tsx
└ 公共文件/
└ rowlet.gltf

准备

省略项目准备的部分，直接移动到项目根目录并执行以下命令，可以使用create-react-app或其他任何方法。

$ yarn add three @react-three/fiber @react-three/drei
$ yarn add -D @types/three

请给我以中文本地化的解释。

import React from "react";

import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export function Model(prop: { src: string }) {
  const gltf = useLoader(GLTFLoader, prop.src);
  return <primitive object={gltf.scene} scale={0.4} />;
}

import { Model } from "../../components/Model";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as React from "react";


const App = () => {
  return (
        <div style={{ width: "100vw", height: "100vh" }}>
          <Canvas>
            <OrbitControls />
            <ambientLight />
            <Model src="/rowlet.gltf" />
          </Canvas>
        </div>
  );
};

export default App;

在next.js中，必须注意静态文件的路径是以public目录作为根目录的绝对路径。(2次错误)

错误

Error:cannot find module 'three'

你说什么？有问题吗？
而且还是运行时错误啊，我要生气了！！！
经过试验，我删除缓存并重新安装库，问题解决了

yarnのキャッシュを理解してnode_modulesを正しく更新する

Error: Unknown property 'object' found  react/no-unknown-property

闭嘴！！！别烦我！！！
… 因为不能这么做，所以我只能修改eslintrc.json来解决问题。

{
    "rules": {
+      "react/no-unknown-property": ["error", { "ignore": ["object"] }]
    }
}

其实在Model.tsx文件中没有使用drei的useGLTF是因为修改eslintrc.json文件的项目很多，让人感到疲惫不堪。

参考链接：
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md

执行界面 (shí huà

印象

就算是完全不懂Three.js的人也能輕鬆使用，這真是太好了呢，因為好像可以調整相機位置，我們看看官方文件來試試吧。