Background image load question

Questions
1

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

    scene.add(ambient);

    renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window.innerHeight);

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

    renderer.setClearColor(scene.fog.color);

    document.body.appendChild(renderer.domElement);

   

    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

      });

    },

      undefined,

        // onError callback

        function (err) {

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

        }

    );

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

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

        cloud.position.set(

          Math.random()*800 -400,

          500,

          Math.random()*500-500

        );

        cloud.rotation.x = 1.16;

        cloud.rotation.y = -0.12;

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

        cloud.material.opacity = 0.55;

        cloudParticles.push(cloud);

        scene.add(cloud);

      }

    render();

  }

  function render() {

    renderer.render(scene,camera);

    requestAnimationFrame(render);

  }

  init();
2

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.

3

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

4

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

5

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

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

        <style>

            body { margin: 0;   width: 100vw;

  height: 100vh;

  margin: 0;

  background: black;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;}

        </style>

    </head>

    <body>

        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>

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

                

    </body>

</html>
6

Try it like so: https://jsfiddle.net/tyg0bkz8/

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

7

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

8

Are you hosting you app on a local web server?

9

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

10

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

11

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

12

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

13

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

14

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