关于我在react中使用three.js中加载glb模型

import React, { useState, useEffect } from 'react'
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';

import './style.scss'

function ThreeModal() {

    const initThree = () => {
        const sence = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(
            20,
            window.innerWidth / window.innerHeight,
            1,
            10000
        );
        camera.position.set(0, 0, 5000);

        camera.lookAt(0, 0, 0);

        const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
        sence.add(light);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        sence.add(directionalLight);
        sence.add(camera)
        
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const contors = new OrbitControls(camera, renderer.domElement)
        contors.enableDamping = true


        //  添加glb模型
        // const glbLoader = new GLTFLoader();

        let loader = glbLoader.load("http://127.0.0.1:5500/new1/2023qiao.glb", (glft) => {
            sence.add(glft.scene)
        });

        const renders = (time) => {
            contors.update()
            renderer.render(sence, camera)
            requestAnimationFrame(renders)
        }

        renders()

        window.addEventListener('resize', () => {
            console.log(111);
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })

        window.addEventListener('dblclick', () => {
            const full = document.fullscreenElement
            if (!full) {
                renderer.domElement.requestFullscreen()   
            } else {
                document.exitFullscreen()  
            }

        })
    }

    useEffect(() => {
        initThree();
    }, [])

    return (
        <div id="iviewBg"></div>
    )
}
export default ThreeModal