我想使用 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:上下文丢失。
我需要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:
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}