GLTF模型未在场景A-FRAME中呈现

如何解决GLTF模型未在场景A-FRAME中呈现

所以我仍然对使用A-Frame还是陌生的，我需要在我的A-FRAME场景中添加GLTF对象。我想我已经正确添加了它，但是它仍然没有显示出来。这是我的代码

import React from 'react';
import AFRAME from 'aframe';


    class Forest extends React.Component {
        render() {
            return (
                <div  >
                    <a-scene>
                        <a-assets>
                            <img id="BoxTexture" src="https://i.imgur.com/mYmmbrp.jpg" />
                            <img id="skyTexture"
                                src={require('../assets/sechelt.jpg')} />
                            <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"></img>
                            <a-asset-item id="homer" src={require('../assets/scene.gltf')} ></a-asset-item>
                        </a-assets>
                        <a-Box onClick={() => alert("Oke")} src="#BoxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
                            animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-Box>
                        <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
                            repeat="10 10"></a-plane>
    
                        <a-gltf-model src="#homer" position="0 0 0" scale="2 2 2" ></a-gltf-model>
                        <a-link href="index.html" title="Visit Booth" image="#homeThumbnail"></a-link>
    
                        <a-sky src="#skyTexture"></a-sky>
                        <a-light type="ambient" color="#445451"></a-light>
                        <a-light type="point" intensity="2" position="2 4 4"></a-light>
                        <a-camera>
                            <a-cursor></a-cursor>
                        </a-camera>
                    </a-scene>
                </div>
    
            );
        }
    }
    
    export default Forest;

根据本文档https://aframe.io/docs/1.0.0/primitives/a-gltf-model.html，我想我已经遵循了该示例。是否有一个额外的步骤来渲染3d对象？ 这是Inspect屏幕截图，我的3d对象未加载，应该显示Simpsons房子