设置在 React 中使用 Three.js 加载 3D 模型（.obj、.glb）

Question

我想使用 Three.js 将 3d 模型从 Blender 加载到我的 React 应用程序中 我需要什么功能才能放置它们

我的应用程序看起来像这样：

-public
(my glb model)

-src

 -assets

 -components
   -Model.jsx

 -pages
   -(All the Sublinks from the Navbar)

 -app.jsx
  (here i load the Model.jsx)

我需要Vite Buildtool吗？3D模型需要吗？

所以我按照这个文档的说明进行操作： https://docs.pmnd.rs/react- Three-Fiber/getting-started/your-first-scene

我现在不知道我必须在代码中放置这个函数

function Scene() { const gltf = useLoader(GLTFLoader, '/Poimandres.gltf') return <primitive object={gltf.scene} /> }

除了控制台中的此消息之外，我没有收到任何错误：

THREE.WebGLRenderer：上下文丢失。

Answer 1

我需要Vite Buildtool吗？3D模型需要吗？

不，你不需要这个，但如果我是你，我会通过捆绑器构建这个应用程序，你不会在以后发布你的应用程序时遇到麻烦（太多），特别是当你问“......我应该把它放在哪里”函数 x..." ;)，但由你决定。

我现在不知道我必须将此函数放在我的代码函数中 场景() { const gltf = useLoader(GLTFLoader, '/Poimandres.gltf') 返回}

您可以通过两种方式实现：

https://docs.pmnd.rs/react- Three-Fiber/tutorials/loading-models#loading-gltf-models

// src/components/Model.jsx
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const Model = () => {
  const gltf = useLoader(GLTFLoader, "./Poimandres.gltf");
  return (
    <>
      <primitive object={gltf.scene} />
    </>
  );
};
export default Model;

..导入

Model

到

App

// src/app.jsx
import React from 'react';
import { Canvas } from '@react-three/fiber';
import Model from './components/Model.jsx';

const App = () => {
  return (
    <Canvas>
      <Model />
    </Canvas>
  );
};

export default App;

你也可以通过Drei加载glb：

https://docs.pmnd.rs/react- Three-Fiber/tutorials/loading-models#loading-gltf-models-as-jsx-components

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const groupRef = useRef()
  const { nodes, materials } = useGLTF('/Poimandres.gltf')
  return (
      <mesh geometry={nodes.Curve007_1.geometry} material={materials['Material.001']} />
  )}

在此之前，将你的glb放在这里，将你的模型转换成组件： https://gltf.pmnd.rs/

geometry={nodes.your_model_stuff.geometry}