Как просмотреть модель OBJ с текстурой, экспортированной из блендера с помощью react-three-fiber
Это компонент модели, который показывает только модель OBJ, но без текстуры. Вся идея проекта заключается в просмотре 3D-моделей в сети, но текстуры не появляются ни на одном из объектов.
import React, { useState, useMemo } from "react"
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader"
const ObjModel = (props) => {
const [obj, set] = useState()
useMemo(() => {
new MTLLoader().load(props.murl, material => {
material.preload()
new OBJLoader().setMaterials(material).load(props.url, set)
})
}, [props.url, props.murl])
return obj ? <primitive position={[0, 0, 0]} object={obj} /> : null
}
export default ObjModel
Вызов компонента модели:
import React from "react"
import { Canvas } from "react-three-fiber"
import Model from "./buildComponents/Model"
import MaskMURL from "../models/Mask.mtl"
import MaskURL from "../models/Mask.obj"
import MaskDesignMURL from "../models/MaskDesign.mtl"
import MaskDesignURL from "../models/MaskDesign.obj"
import { OrbitControls } from "drei"
const MyCanvas = () => {
return (
<Canvas style={{ background: "black" }} camera={{ position: [-28, 0, 0] }}>
<Model url={MaskDesignURL} murl={MaskDesignMURL} />
<Model url={MaskURL} murl={MaskMURL} />
<OrbitControls />
<ambientLight />
<pointLight position={[-20, -5, 0]} />
</Canvas >
)
}
export default MyCanvas
Ссылка на проект Github для полного проекта: https://github.com/A7madSab/Object-Viewer Обратите внимание, что я использовал тот же<ObjModel />
компонент для просмотра.obj из Google Poly API, и он работал, но он не будет работать с моделями, которые я загружаю или создаю сам.
Мне нужно знать, как просмотреть импортированную текстуру или даже как применить текстуру к импортированной модели.
Пожалуйста, помогите, мне это нужно для моего выпускного проекта.