0

I have a Three.JS application that colors the object based on a text file: 

let color1 = 0x00ff00;
let color2 = 0xFF04F0;

In the Three.JS code: 

var cubeGeometry = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:color2});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

var cubeGeometry1 = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial1 = new THREE.MeshLambertMaterial({color:color1});
var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);

As the colors in the text file change, the Three.JS application displays them correctly. If I add <META HTTP-EQUIV="refresh" CONTENT="5"> on the <head> of the html then it refreshes and grabs the color values, but the scene resets (notice that you can move the scene with the mouse). Is there a way to update the Javascript variables without reloading the page and keeping the Three.JS scene?

Full code is here: https://github.com/f0n/threeSocket

GitHub pages: https://f0n.github.io/threeSocket/

fonsi
  • 471
  • 8
  • 22

2 Answers2

0

When you add <META HTTP-EQUIV="refresh" CONTENT="5"> to your HTML document, you're telling it to refresh ALL of it. HTML, DOM updates, JavaScript, its state, variable values... everything. You shouldn't use this approach if you want to maintain your position in the scene.

Why don't you load the HTML page once, then perform timed calls to a server to retreive JUST the color data without doing a full-page refresh? That's what XMLHTTPRequest is for. This is what they call AJAX (Asynchronous Javascript And XML), and there are plenty of StackOverflow questions outlining how to use it.

M -
  • 26,908
  • 11
  • 49
  • 81
  • Thanks, I understand the implications of the refresh I have implemented. How could I implement it in an offline configuration (non-server location)? – fonsi Sep 26 '18 at 19:33
  • You mean you don't want to run this on the web, and you want to run it just out of your computer? – M - Sep 26 '18 at 19:37
  • Correct. It is a local application and the end users are not knowledgeable about running servers. – fonsi Sep 26 '18 at 19:40
  • You are running it in your browser ? – ElJackiste Sep 26 '18 at 19:45
  • Yes, the end users will run it directly on their browsers in local machines. – fonsi Sep 26 '18 at 19:49
  • 1
    Hmm... fetching data from a different file will be a problem if you don't want to run a server. Browsers by default prevent you from fetching data from your local hard-drive because it's a security issue. Could you imagine the security concerns if a website could perform 'load("C:/user/documents/")? With that being said, do you know what all the colors will be in the future? You could simply declare an array of ALL the colors on initial load, then skip to the next one every 5 seconds, to avoid constant data-fetching from a separate file. – M - Sep 26 '18 at 19:52
  • If they run your application on a browser, they will need to download it from somewhere. Normally, somewhere means a server. So, if you want to grab new values you need to make a new request to this server. In this case, you need to use AJAX as @Marquizzo said (or other techniques as sockets). You can also make your users download your application one time and then run it only in their local browser, but in this case you will need to change colors programatically in your JS without request outer file. – ElJackiste Sep 26 '18 at 20:00
  • Thanks for the comments. I think I will have to figure out a way to do a "server" deploy with AJAX – fonsi Sep 26 '18 at 20:10
  • AJAX is just an API available in JavaScript which mainly allows you to make request to get data without refresh the page. A server is the endpoint where your users will ask data with an URL ;) Note that your local machine can be set to work as a server. You can find good documentation on MDN : https://developer.mozilla.org/en-US/ – ElJackiste Sep 26 '18 at 20:21
  • How would the AJAX request pull the information from the file in the same folder? – fonsi Sep 27 '18 at 18:51
  • @fonsi Here's a simple example on how to perform an AJAX call using XMLHTTPRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest but instead of putting an entire domain, you'd replace it with `./colors.json`. Notice that `./` looks for the file in the same folder. – M - Sep 27 '18 at 18:56
-2

You may try to refresh the values with setInterval method, so you wont need a full page refresh.

Here is more info

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

Halil Irmak
  • 1,271
  • 1
  • 13
  • 24