Incorporating a series of image links into a Three.js project with the addition of a

My latest project involves creating a reflection cube with randomly changing images on each side every time the site is reloaded. Here is the code I have written:


var imgAr = [
'sources/instagram2/image1.jpg',
'sources/instagram2/image2.jpg',
'sources/instagram2/image3.jpg',
'sources/instagram2/image4.jpg',
'sources/instagram2/image5.jpg',
'sources/instagram2/image6.jpg',
'sources/instagram2/image7.jpg',
'sources/instagram2/image8.jpg',
'sources/instagram2/image9.jpg',
'sources/instagram2/image10.jpg'
];

var urls = imgAr.sort(function(){return .6 - Math.random()}).slice(0,6);
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );

However, I encountered a challenge when trying to filter images based on file names ending with a number. I attempted the following code, but it didn't work as expected:


var nrString = "000";

images = [
'sources/instagram2/image' + nrString + ".jpg",
'sources/instagram2/image' + nrString + ".jpg",
'sources/instagram2/image' + nrString + ".jpg",
'sources/instagram2/image' + nrString + ".jpg",
'sources/instagram2/image' + nrString + ".jpg",
'sources/instagram2/image' + nrString + ".jpg"
];

var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );

If anyone has a solution or suggestions, I would greatly appreciate the help. I've been struggling with this for days now.

javascriptarraysthree.jssuffix

Answer №1

        let totalImages = 75, gallery = [];
        for (let num = 1; num <= totalImages; num++) {
            gallery.push(
                'images/icons/image' + num + ".png"
            );
        }

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

Exploring the Depths of Vue Router: Incorporating Dynamic Nested Routes

Hey everyone, I'm currently diving into working with the vue-router and Vuex Store. I'm facing a challenge where I have a route that consists of two dynamic parameters (:id, :templateId). My question is, what do I need to specify in my routes c ...

javascriptvue.jsvue-router

receiving an error message due to attempting to access an

I'm facing an issue with replacing objects in an array using JavaScript. I tried to use indexOf and splice methods, but it's not working as expected. The value returned by indexOf is '-1', indicating that the object is not found in the ...

javascriptreactjsredux

I'm experiencing a strange issue where the timezone offset is being doubled on my computer, yet it is functioning correctly on the UTC

A situation has arisen where the timezone offset on my local server is being duplicated by the server while creating a new event in my app. For every event created by a user, the client-side scripting computes and adds the time zone offset to the input be ...

javascriptnode.jsmongodbexpressdatetime

Antialiasing Dilemma in Webgl/Three.js

When creating a rectangle with shadows and transparency, I encountered antialiasing issues when the dimensions were small (<30px) or when applying a 2D rotation at any angle. The quality of the geometry deteriorated significantly in these cases. Here i ...

three.jsglslwebgl

Instructions for displaying typed chat messages on the screen using socket.io and node.js

I am currently developing a chat application using socket.io and node.js. I have successfully connected the server and both the socket.io and client-side socket.io are also connected. However, when I type a message on the localhost page and hit enter, noth ...

javascriptnode.jssocket.io

JavaScript regex problem

As I am handling a specific string: £1,134.00 (£1,360.80 inc VAT) I am currently attempting to isolate the numerical values as follows: ['1,134.00','1,360.80'] My approach involves utilizing this regex pattern in Javascript: /&bs ...

javascriptjqueryregexexpressionopera

Including item from ajax not within $.when function finished

function fetchData(){ return $.ajax({ url : 'URL1', data : { id : id }, type : 'GET', }); } function fetchItemData(item_id) { return $.ajax({ url: 'URL2', data: { item_id: it ...

javascriptjqueryajax

Retrieving the first five rows from a table with data entries

My task involves working with a table named mytbl, which contains 100 rows. I need to extract only the first five rows when a user clicks on "Show Top Five." Although I attempted the following code, the alert message returned 'empty': var $upda ...

javascriptjqueryhtml

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

javascriptcssreactjscss-transitions

Utilizing the for loop to access a Json array

How do I iterate through an array with the given structure using a for loop? My Array: { "cod": "200", "message": 0.0027, "city": { "id": 2264456, "name": "Portimao", ...

jqueryarrays

Utilizing a foundational element to automatically unsubscribe from multiple observable subscriptions

Within our Angular application, we have implemented a unique concept using a Base Component to manage observable subscriptions throughout the entire app. When a component subscribes to an observable, it must extend the Base Component. This approach ensures ...

javascriptangulartypescriptrxjsarchitecture

Showing dummy data in demo mode with an AngularJS table

I stumbled upon this interesting jsfiddle http://jsfiddle.net/EnY74/20/ that seems to be using some demo data. If you check out this example https://jsfiddle.net/vsfsugkg/2/, you'll notice that the table originally has only one row, but I modified it ...

javascriptjqueryangularjspaginationjquery-pagination

Error encountered: Unexpected '<' token when trying to deploy

Trying to deploy a React app with React Router on a Node/Express server to Heroku, but encountering the following error... 'Uncaught SyntaxError: Unexpected token <' Suspecting the issue may lie in the 'catch all' route in the Expr ...

javascriptreactjsexpressrouter

Tips for receiving dual return values from an AJAX request

I am sending an array of table IDs to retrieve the table numbers associated with those IDs from the database. I need to add up all the default seats for each table ID and return the total. JAVASCRIPT : function showUser(str) { if ...

javascriptphpjqueryajax

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

Consider a scenario where you have the following JavaScript code running in a Firefox plugin, aimed to execute an XmlHttpRequest on a page load: function my_fun(){ var xmlHttpConnection = new XMLHttpRequest(); xmlHttpConnection.open('GET', ...

javascriptapachefirefoxxmlhttprequestfirefox-addon

Creating a state in React and populating the rows of a Material-UI table with fixed data

I have implemented a table in the UI using the material-UI Table component. Initially, I added static data without using the state property of react. Now, I am looking for a way to assign static data to table rows by utilizing the state property. The code ...

javascriptreactjsreact-reduxmaterial-ui

Checking parameters from two forms that are both associated with the same model in Rails

Recently, a new feature was added to the system - a phone and sim checker. Users are required to input their phone number into the first form. If the phone number is found in the database, a message indicating this is displayed. Otherwise, the form switche ...

javascriptjqueryruby-on-railsrubyajax

prevent unauthorized changes to input using browser developer tools in Angular

We have a login page for our application with three fields: "user name," "password," and a "login" button. Here's the issue I'm facing: I enter a valid user name. Then, I open the Browser Developer Tools and input the following code: d ...

javascriptangular

Tips for integrating Tornado authentication with AngularJS

I have been experimenting with the authentication system outlined in the tornado documentation, and I am encountering a Cross-Origin Request issue when trying to integrate it with AngularJS. Is there a way to successfully combine Tornado's authentica ...

javascriptpythonangularjstornado

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Recently, I encountered an issue on my webpage where I made an AJAX request to a PHP script. The PHP script responded with a valid JSON object and set the Content-type header to application/json. After examining the JSON format using console.log(JSON.stri ...

javascriptjqueryajax