尝试从 mongodb 数据库加载 gltf link 反应三纤维

Question

我一直在尝试从数据库加载我的 gltf 文件，但它不起作用。我尝试为 model.js 创建单独的页面，但仍然没有结果。在网上搜索了很多解决方案，但没有成功。请帮忙。代码如下：

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'

import { Canvas } from "@react-three/fiber";
import { useGLTF } from '@react-three/drei'
import { useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Suspense } from "react";

import {
  listModelDetails
} from '../actions/ModelActions'


  const Model = () => {
    const gltf = useLoader(GLTFLoader, `/${model.content}`);
    return <primitive object={gltf} scale={0.005} />;
  }


export default function ModelScreen({ history, match }) {

const dispatch = useDispatch()

const ModelDetails = useSelector((state) => state.ModelDetails)
const { error, model } = ModelDetails


useEffect(() => {

  if (!course._id || model._id !== match.params.id) {
    dispatch(listModelDetails(match.params.id))
    
  }
}, [dispatch, match])

  return (
    <>
      <div style={{width: '70vw', height: '70vh'}}>
        <Canvas>
          <Suspense>
            <Model />
            <OrbitControls />
            <Environment preset="sunset" background />
          </Suspense>
        </Canvas>
      </div>  
    </>
  );
}

Answer 1

in HomeScreen.js（有模型列表的地方）：

 <>
          <h1>Top Courses</h1>
          <Row>
            {courses.map((course) => (
              <Col key={course._id} xs={6} md={6} lg={4} xl={3} height='100'>
                <Course course={course} />
              </Col>
            ))}  
          </Row>            
        </>

在ModelScreen.js（我们实际加载模型的地方）：

const Model = ({ url }) => {
  const gltf = useLoader(GLTFLoader, `${url}`);
  return <primitive object={gltf.scene} scale={0.4} />;
};

 return (
    <>
      <div style={{width: '70vw', height: '70vh'}}>
        <Canvas>
          <Suspense fallback={null}>
            <Model url={course.content} />
            <OrbitControls autoRotate />
            <Environment preset="sunset" background />
          </Suspense>
        </Canvas>
      </div>
      <Meta title={course.name} />
      <h2>{course.name}</h2>
      <br />
      <br />
      <h3>Description:</h3>
      <h3>{course.description}</h3>
    </>
    
  );
}

当然有些地方我遗漏了。但我认为这对你来说更容易做到！祝你好运！

尝试从 mongodb 数据库加载 gltf link 反应三纤维

Trying to load the gltf link from the mongodb database in react three fiber

three.js

reactjs

gltf

react-three-fiber