[英]How to show an OBJ file inside MUI component with three.js?
I am facing an issue while trying to display an OBJ file (or any type of 3d model) in the UI.我在尝试在 UI 中显示 OBJ 文件(或任何类型的 3d 模型)时遇到问题。 The thing is the obj is perfectly loading.问题是 obj 正在完美加载。 But how can I show it inside the MUI component?但是如何在 MUI 组件中显示它呢?
I am using three.js我正在使用 three.js
Here is the code,这是代码,
const View3DWound = (props) => {
const [woundModel, setWoundModel] = useState(null);
const { id } = useParams();
const classes = useStyles();
const loader = new OBJLoader();
const scene = new Scene();
useEffect(() => {
loader.load(
"./assets/TechnicLEGO_CAR_1.obj",
// called when resource is loaded
function (object) {
setWoundModel(scene.add(object));
if (woundModel) {
console.log("woundModel", woundModel);
}
},
// called when loading is in progresses
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log("An error happened");
}
);
}, []);
console.log(woundModel);
return (
<Container className={classes.container}>
<Typography variant="h4">View 3D Wound of patient {id}</Typography>
<Box className={classes.canvas}>
</Box>
</Container>
);
};
This is the variable woundModel
after loading,这是加载后的变量woundModel
,
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.domElement
inside your MUI component MUI 组件内的 Append renderer.domElement
canvasRef.current.appendChild( renderer.domElement );
// ...
return (
<Box className={classes.canvas} ref={canvasRef} />
);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
React three fiber is three.js wrapper for React. React 三纤是 React 的 three.js 包装器。
With React three fiber,用 React 三纤,
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { Canvas, useLoader } from '@react-three/fiber'
// ...
const obj = useLoader(OBJLoader, './assets/TechnicLEGO_CAR_1.obj')
// ...
return (
<Container className={classes.container}>
<Typography variant="h4">View 3D Wound of patient {id}</Typography>
<Box className={classes.canvas}>
<Canvas>
<ambientLight />
<primitive object={obj} />
</Canvas>
</Box>
</Container>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.