Отрисовка 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 из массива, который был указан для упрощения вставки, вместо того, чтобы выполнять каждый компонент отдельно.

0 ответов

Другие вопросы по тегам