三个 js 未激活

Question

这是我的三个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 three”甚至是“npm install three”，添加了“browserslist”：[ “默认” ] 到我的 package.json，在控制台中没有收到任何错误（红色错误，虽然我有一些黄色警告但与此无关）

Answer 1

删除 container.appendChild(renderer.domElement); 并将渲染器定义更改为：

const renderer = new THREE.WebGL1Renderer({
        canvas: container,
        antialias: true,
    });