Import image with threejs in VueJS project

Question

I followed threejs documentation in vuejs project to import image using :

texture.load( "./clouds" )

This code is not working, I have to import image using require :

texture.load( require( "./clouds.png" ) )

Now I want to use functions for sucess or error, so thank's to the internet i found that

texture.load( require( "./clouds.png" ), this.onSuccess, this.onProgress, this.onError )

The problem is in success function, I want to create a cube with texture and nothing happened. I also tried on success function to add color in material but it didn't work.

onSuccess( image ) {

   this.material = new THREE.MeshLambertMaterial( { 
      color: 0xf3ffe2,
      map: image
   }

   this.generateCube()
}

generateCube() {

   let geometry = new THREE.BoxGeometry( 100, 100, 100 );

   this.forme = new THREE.Mesh( geometry, this.material );
   this.forme.position.z = -200
   this.forme.position.x = -100
   this.scene.add( this.forme );

},

https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — soju, Mar 18 '19 at 19:27

score 3 · Accepted Answer · answered Mar 18 '19 at 19:32

3

Your problem is not related to VueJS /ThreeJs (again ^^), you should learn how to use this inside a callback, here is a E6 fix :

texture.load( require( "./clouds.png" ), t => this.onSuccess(t), e => this.onProgress(e), e => this.onError(e) )

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

answered Mar 18 '19 at 19:32

soju

25,111
3
68
70

It's not working, using console.log() I know i arrived in each function but this.material I put color but nothing happened – WMonteiro Mar 18 '19 at 19:41
Are you sure your mesh is visible ? I mean the position looks strange – soju Mar 18 '19 at 19:52
I don't understand why my code dosn't work in function but works well oustide of the function. I try to remove position and nothing happened – WMonteiro Mar 18 '19 at 20:01

score 1 · Answer 2 · answered May 11 '20 at 15:23

1

You can put your images in the "public" folder.

And then you can load your texture by

texture.load( "/clouds.png" )

answered May 11 '20 at 15:23

Bingchang Chen

11
1

Import image with threejs in VueJS project

2 Answers2