Paths within Three JS within VueJs?

Question

I'm trying to render a cube texture in Three.js like this. For this type of textures, Three has CubeTextureLoader, where we set the path to the folder with specific names and then Three maps those names into the different cube facets. The following code works perfectly without Vue.

      let dayAndNight;
      let variablePath;
      if (x) { dayAndNight = "./day"} else { dayAndNight = "./night"}

      variablePath = dayAndNight + "equi/file.png";
       scene.background = new THREE.CubeTextureLoader()
          .setPath(variablePath)
          .load(["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"]);
       console.log(scene.background);

Notice the log the cube texture object has 6 images

However if I do the same within a computed property in vue I get no images on the log. Notice the missing images property...

Does anybody know how to overcome this? many thanks in advance

I think the problem might be because of the images' path. Vue is known to have some caveats regarding loading images.For instance, if I want to render a texture on a plane (using Three.js), I can't just do this...

      var texture = textureLoader.load("../../public/img/pngs/cubetext_1.png"); 
// this doesn't work within Vue

Instead with Vue we need to point to the image(path) as a module like this.

     let img4texture = require("../../public/img/pngs/cubetext_1.png");
      var texture = textureLoader.load(img4texture); // this works within vue

the blocker is that require module doesn't allow the module path to be dynamically defined. is there any crafty bright mind out there with any idea on how to make this work?

Paths within Three JS within VueJs?

0 Answers