Отрисовка GLTF в React с использованием @google/model-viewer
Я пытаюсь отобразить @google/model-viewer на свои карты с помощью реквизита, но они не будут отображаться, даже если я попытаюсь сделать это отдельно, это не сработает, но работает gltf и любое другое изображение, вставленное вместо файл gltf работает нормально. Почему не отображается файл gtlf?
import '@google/model-viewer'
import Obj from './assets/astronaut.gltf'
const products= [
{
id: '1',
name: 'astronaut',
obj: {Obj}
},
{
id: '2',
name: 'astronaut',
obj: {Obj}
}
]
const Products = () => {
return (
<main>
<Grid container justify='center' spacing={4}>
{products.map((product) => (
<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
<Product product={product} />
</Grid>
))}
</Grid>
</main>
)
}
export default Products
import React from 'react'
import {Card, CardMedia, CardContent, CardActions, Typography, IconButton} from '@material-ui/core'
import useStyles from './styles'
import '@google/model-viewer'
import Astro from '../../../assets/Astronaut/Astronaut.gltf'
const Product = ({ product }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<model-viewer camera-controls src={product.obj} alt="A 3D model of a reflective sphere"/>
<CardContent>
<div className={classes.cardContent}>
<Typography variant='p' gutterBottom>
{product.name}
</Typography>
</div>
<Typography variant='h2' color="textSecondary">
{product.desc}
</Typography>
</CardContent>
</Card>
)
}
export default Product
Я пытаюсь создать представление сетки, и каждый отдельный элемент сетки будет отображать отдельный файл gltf из массива, который был указан для упрощения вставки, вместо того, чтобы выполнять каждый компонент отдельно.