Using Three.js to apply multiple images onto a sphere and have individual control over each one

I have a 3D sphere that I am looking to map an array of images onto. I want to be able to control each image independently, allowing for fading in and out of each image. To better illustrate my goal, I will provide an example image of what I am trying to achieve.

https://i.sstatic.net/25olS.jpg

As shown in the example above, there are 8 images per column and approximately 16 per row.

I have managed to replicate the image above by simply mapping it to a SphereGeometry. However, I desire the ability to dynamically swap out images and fade them in at different intervals.

My Approach and Ideas:

  • One approach I tried was pushing 8 test images to an array and using it as the material map. Then, I looped through each face of the SphereGeometry and assigned a material index ranging from 1 to 8. However, this method did not yield the desired results:

    function createGlobe() {

    var geomGlobe = new THREE.SphereGeometry(40, 32, 16);

    var l = geomGlobe.faces.length;

    imageArray.push(new THREE.MeshBasicMaterial({map: texture1}));
    imageArray.push(new THREE.MeshBasicMaterial({map: texture2}));
    ...
    imageArray.push(new THREE.MeshBasicMaterial({map: texture8}));

    for (var i = 0; i < l; i++) {
        geomGlobe.faces[i].materialIndex = i % 8;
    }

    Globe = new THREE.Mesh(geomGlobe, imageArray);

    scene.add(Globe);
}

  • I suspect that I need to group every 4 or 8 faces and assign the same material index to each one in the group to use the same image. However, I am unsure if the faces align correctly in this manner.

Overall Requirement:

I am seeking a solution to dynamically incorporate images onto a sphere in an 8 per column, 16 per row layout, with the capability to manipulate each image independently.

Any assistance would be greatly appreciated as I am currently facing a roadblock!

javascriptthree.js

Answer №1

If you're looking for a smooth transition effect, consider using a large canvas as your texture and animating the transitions within the canvas. Make sure to update the texture on the GPU by setting texture.needsUpdate = true.

In case the texture updating process is slow, you can create two canvasses with spheres and crossfade between them by adjusting the opacity of the frontmost one.

Below is a code snippet demonstrating how to fade one sphere into another using randomly filled canvasses:

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

// Rest of the code remains the same...
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer №2

If you're not worried about optimizing, you could experiment with the following approach:

textures.forEach( tex=>{

 const s = mySphere.clone()
 s.material = s.material.clone()

 tex.offset.copy(someOffset)
 tex.repeat.copy(someRepeat)

 tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping // or similar option

 s.material.map = tex
 s.material.transparent = true

 scene.add(s)
})

The concept is to duplicate the same sphere multiple times, each with a different offset. This technique may not be effective with just the .map, but could potentially work with the alphaMap, which is either entirely black or entirely white.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The data is successfully being logged in the console but is not appearing on the page in Reactjs

I'm currently working on Reactjs with the Next.js framework. I'm trying to fetch data using axios, but the data isn't showing up on the page. However, when I check the console.log in the getStaticProps section (in blogs), the data is there. ...

javascriptreactjsnext.js

Creating a function to update data in a Node.js/MongoDB environment

Hey there! I'm new to working with nodejs and mongodb, and I'm trying to create a function that updates the win, lose, and draw record in my UserSchema. Here's my Schema: UserSchema = new mongoose.Schema({ username:'string', ...

javascripthtmlnode.jsmongodbmongoose

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

javascriptcsswebpack

JavaScript error - Property value is not valid

When I use IE 6/7/8, I encounter a JavaScript error message. The problematic line of code reads as follows: document.getElementById('all').style.backgroundColor = color; The specific error reported in IE 6/7/8 is as follows: Invalid property ...

javascripthtml

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

javascriptreactjstypescriptnext.js

What is the best way to create two fields side by side within a single row?

I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written: import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik' import * as yup ...

javascripthtmlcssreactjstailwind-css

Automatically Assigning a Default Value to a Column Using SEQUELIZE ORM

When fetching data from a database using Sequelize ORM, I need to set a default value. Here is an example of the SQL query: SELECT a.affiliate_id, a.active AS current_state, IF(MAX(cn.contract_id) IS NULL ,0, IF(DATEDIFF(NOW(),MAX(cn.contract_date) ...

javascriptsqlnode.jsexpresssequelize.js

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

Refreshing the view following a model update within an AJAX call in the Backbone framework

I'm struggling with my code as I can't seem to get my view to update after a model change. var ResultLoanView = Backbone.View.extend({ id:"result", initialize: function(){ this.render(); this.on('submissionMa ...

javascriptjqueryajaxbackbone.js

Implementing Jquery after async ajax refresh in an asp.net application

My ASP.net page is heavily reliant on jQuery. Within this page, I have a GridView placed inside an UpdatePanel to allow for asynchronous updates. <asp:GridView ID="gvMail" runat="server" GridLines="None" AutoGenerateColumns="false" ...

c#javascriptjqueryasp.net

Securely store files by encrypting them with Node.js before saving to the disk

At the moment, I am making use of the multer library to store files on the File system. This particular application is built using Node and Express. I currently have a process in place where I save the file on the server first and then encrypt it. After e ...

javascriptnode.jsexpressencryptionmulter

Tips for adjusting the font size according to the varying number of characters entered

I am currently facing a challenge with adjusting the font size based on the dynamic number of characters. For example, I have a set of characters with a font-size of 40px, and as more characters are added, the font size should decrease to fit within the av ...

javascriptjqueryhtmlcssfonts

Increase the number of table rows as you scroll downwards

Hello everyone! I've been searching online for information on how to implement infinite scrolling in a table, but all I found were tutorials using divs. Can someone please provide guidance on how to achieve this? Perhaps a sample code snippet or tuto ...

javascriptphpajax

Using AngularJS, deleting items by their $index with ng-repeat

I'm currently working with two directives: a query builder and a query row. The query builder directive utilizes ng repeat to display query rows from an array. While the add button functions properly, I am looking to add a delete button as well. Howev ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

sending the AJAX request from back to the original JavaScript function

Here presents an issue. I am dealing with an HTML Form that contains a submit button with an onclick=validationFunction(). When this button is clicked, the form values are passed to the mentioned function. Within this function, the form values undergo va ...

phpjavascriptajax

Is it possible to incorporate a roughness map when working with an OBJ model?

Just getting started with Three.js. I have a *.obj file along with normal, albedo, emissive, and roughness maps. I attempted to apply these maps using the code below: const orbObj = useLoader(OBJLoader, 'orb/orb.obj'); const [orb_albedo, orb_emi ...

reactjsthree.jsreact-three-fiberreact-three-drei

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Combining Data in Django using Ajax with JavaScript and Python Integration

I am in need of assistance understanding a basic ajax call from JavaScript to Python. I have a Python function that takes a simple parameter and returns a result. My goal is to send this parameter from JavaScript, receive the function result back in JavaSc ...

javascriptjquerypythonajaxdjango

Determine whether the element is visible in at least half of the viewport

I am working on a project that involves 4 cards with images. I want the image to animate in from the left when it comes into viewport. I have finalized the CSS for this effect, but the JavaScript code always returns false even when the element is visible o ...

javascripthtmlcss

Utilizing a RESTful approach for ajax requests is effective, but there seems to be a

Trying to make an ajax call and facing some challenges. Used a REST test extension for Chrome called Postman [Link to it]. While the call works fine with the extension, encountering an "error 0" message when trying to send it through jQuery. The request s ...

javascriptjqueryajax