这是我的三个js代码

import * as THREE from "three";
    import images from "./images.js";
    const container = document.querySelector(".three_bg");
    const loader = new THREE.TextureLoader();
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1, 1000);
    
    const renderer = new THREE.WebGL1Renderer({
        antialias: true,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    
    //responsive
    window.addEventListener("resize", ()=> {
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
    
    
    const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
    const material = new THREE.MeshBasicMaterial({//color: 0xff0000,
         map:loader.load(images.bg1)});
    
    const mesh = new THREE.Mesh(geometry, material);
    
    scene.add(mesh);
    camera.position.z = 5;
    
    function animate() {
        requestAnimationFrame(animate);
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    
    animate();

虽然这是html脚本

<script type="module" src="/src/assets/js/threeBg.js"></script>

问题是三个js的东西是不显示在所有，甚至没有一个黑屏/图像，所以我猜这不是关于相机距离等我按照所有的步骤正确地从我的课程，安装三个js与“npm i三”甚至“npm安装三”，添加“browserslist”：[“默认”]到我的package.json，没有得到任何错误在控制台（红色错误，而我有一些黄色警告，但不涉及这一点）