three js isn't activating

Question

This is my three js code

   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();

While this is the html script

the problem is the three js stuff isn't showing at all, not even a black screen/image of it, so I guess it's not about the camera distance etc. I followed all the steps correctly from my course, installed three js with "npm i three" even "npm install three" , added "browserslist": [ "defaults" ] to my package.json, not getting any error in console (red errors, while i have some yellow warnings but not concerning this )

three js isn't activating

0 Answers