Three js. changetexture load on click of another texture/ image

Question

I want to create a 360 image view, with Threejs. I've 4 images, 1 is linked in with threejs and the remaining 3 are at the bottom of the page like thumbnails so when I click on the thumbnail the 360 image view should change.

My Codepen, BTW its 360 image is black, its not showing up in codepen, but works fine in localhost. Localhost preview is below. You can see those 3 more images at the bottom.

My localhost image code.

var material = new THREE.MeshBasicMaterial( {
                map: new THREE.TextureLoader().load( 'assets/image3.jpg' )
            } );

Console-buche · Accepted Answer · 2017-02-08 08:13:26Z

1

You simply need to update the sphere's material. Just preload all of the images first and store them as materials. Also, I'm guessing the user is sitting inside your sphere. You need only render the backSide.

//globals
var images = [];

//preload
for (var i = 0; i < numberOfImages; i++) {
var loadImage = new THREE.TextureLoader().load('path/to/image/imageName_'+i, function(texture) {

     var material = new THREE.MeshBasicMaterial({map:texture, side:THREE.BackSide});

     images.push(material);
  }
}

Then on clicking thumbnail, update the material as you do in your load event, choosing the right material from the array and setting the sphere's flat object.material.needsUpdate = true

EDIT : you could also simply store the preloaded textures in the array and update your existing material.map. Don't forget to flag object.material.needsUpdate = true;

edited Feb 8, 2017 at 8:13

answered Feb 8, 2017 at 7:28

Console-buche

4053 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kamalakannan Over a year ago

Yeah, the user is sitting inside the sphere. I did not quite get it. sorry, I'm a novice in jQuery. trying to learn. @Hesha

Console-buche Over a year ago

I'll cook up a simple fiddle for you in an hour or so if no one else does.

Kamalakannan Over a year ago

That's so nice of you. Feel free to fork my codepen if needed. Thank you.

Console-buche Over a year ago

Here's a pen that'll show you one of the gazillion ways to do it. One thing you'll have to be doing : update the material after making changes. I used crap base64 images cause of CORS... Replace them with your images. Best of luck. codepen.io/TheDebOfNight/pen/KaGNYM?editors=0110

Kamalakannan Over a year ago

It doesn't load a image initially, can it be like there's the 1st image preloaded and then when others clicked it change

|

Collectives™ on Stack Overflow

Three js. changetexture load on click of another texture/ image

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related