Background image load question

Hello Folks,

have a basic question for an interactive background , i saw this code on the web and eveything in there seems fine , but for some reason i am not able to get the desired result, it does not seem to load the image , so i added a log and it complains with the an error happened
any help on this would be great

let scene, camera, renderer;

  function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);

    camera.position.z = 1;

    camera.rotation.x = 1.16;

    camera.rotation.y = -0.12;

    camera.rotation.z = 0.27;

    let ambient = new THREE.AmbientLight(0x555555);


    renderer = new THREE.WebGLRenderer();


    scene.fog = new THREE.FogExp2(0x03544e, 0.001);




    let loader = new THREE.TextureLoader();


    loader.load("smoke.png", function (texture) {

      //texture is loaded

      cloudGeo = new THREE.PlaneBufferGeometry(500, 500);

      cloudMaterial = new THREE.MeshLambertMaterial({

        map: texture




        // onError callback

        function (err) {

          console.error('An error happened.');



      for(let p=0; p<50; p++) {

        let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);


          Math.random()*800 -400,




        cloud.rotation.x = 1.16;

        cloud.rotation.y = -0.12;

        cloud.rotation.z = Math.random()*2*Math.PI;

        cloud.material.opacity = 0.55;






  function render() {





Is the texture actually present in the correct directory? Given the code, it should be in the same directory like the file that contains the JS code.

yep it is in the same directory , it does not render the img, it shows the set backround and complains

propablly i am missing something very basic , but just could not figure out what it is , driving me nuts

and here is the html file calling this , its in a js file called background.js

<!DOCTYPE html>



        <meta charset="utf-8">

        <title>My first three.js app</title>


            body { margin: 0;   width: 100vw;

  height: 100vh;

  margin: 0;

  background: black;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;}





        <script src=""></script>

        <script src="background.js"></script>




Try it like so:

Notice that your for loop runs before material and geometry are ready. Besides, cloudParticles is not defined which produces a runtime error.

Hi Michael,

Thanks for the fix ,and greatly appreciate the effort, it works with the https location of the image file, but if i substitute with the png file (any png file stored locally) it fails ? i am confused

Are you hosting you app on a local web server?

i am testing the code using visual studio code running the debuger localhost

when run the debugger i get this ,
file:///Drive:/ProjectRoot/projectFolder/index.html in the browser , so i reckon yes i am running it locally

javascript apps runs fine with images stored locally , without any complains, i get this error only with three.js

A URL like this won’t work for security reasons, see three.js docs

Thanks for this, will have a look at this and get back

Incredible the older code works just fine its to do with launching it in an external server ,
thanks a bunch for the timely help Michael :+1:

1 Like