Clicking on a different texture/image allows for the texture to change in Three.js

Question

Clicking on a different texture/image allows for the texture to change in Three.js

I am working on creating a 360 image view using Threejs. I have a total of 4 images, with one linked to Threejs and the other 3 displayed as thumbnails at the bottom of the page. When a thumbnail is clicked, the 360 image view should change accordingly.

You can check out my Codepen to see the project in action. Please note that the 360 image appears black on Codepen, but it functions correctly when viewed locally. Below is a preview of the project running on localhost where you can also view the 3 additional images at the bottom.

Here is a snippet of my localhost image code:

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

https://i.sstatic.net/plz8t.jpg

javascript jquery html css three.js

Answer 1

Answer №1

To enhance the appearance of the sphere, it is important to update its material. Begin by preloading all images and saving them as materials. Assuming the user is positioned inside the sphere, focus on rendering the backSide only.

//global variables
var images = [];

//preloading images
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);
  }
}

When a thumbnail is clicked, update the material by selecting the appropriate one from the array, similar to the action in the load event. Then, ensure to set

object.material.needsUpdate = true

to display the changes on the sphere.

EDIT : Another approach is to store the preloaded textures in the array and update the existing material.map. Remember to mark

object.material.needsUpdate = true;

to reflect the modifications.

Answer 2

To enhance the appearance of the sphere, it is important to update its material. Begin by preloading all images and saving them as materials. Assuming the user is positioned inside the sphere, focus on rendering the backSide only.

//global variables
var images = [];

//preloading images
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);
  }
}

When a thumbnail is clicked, update the material by selecting the appropriate one from the array, similar to the action in the load event. Then, ensure to set

object.material.needsUpdate = true

to display the changes on the sphere.

EDIT : Another approach is to store the preloaded textures in the array and update the existing material.map. Remember to mark

object.material.needsUpdate = true;

to reflect the modifications.

Clicking on a different texture/image allows for the texture to change in Three.js

Answer №1

Similar questions

Blockage preventing text entry in a textarea

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

Select an option within a for loop nested in an each function

retrieve the month and year data from the input date

What is the best way to add a hover effect to two different objects simultaneously?

The final value is always returned by jQuery's each method

Using the JQuery Library, you can implement two submit buttons that either open in a new tab or submit

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

jQuery floating sidebar that dynamically adjusts position based on content overflow

Creating dynamic checkboxes using jQuery with a mobile-friendly design

Can a local HTML page be embedded within another?

Having trouble accessing variables from the dotenv file in a NextJS project

Schema-specific conditions for JSON data

What is the proper usage of a jwt token?

Add a fresh item to a list using jQuery

Assigning binary messages a structure similar to JSON for the purpose of easy identification

Configuring the remote source for autocomplete suggestions

Retrieve data from one array using information from another array. Alternatively, merging the arrays could also be a solution

send additional form elements to the AJAX suggestion box script

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)