Located bars perpendicular to ever-rotating Sphere: not moving/locating accordingly

Hi Everyone,

In order to prepare an article for a medium publication related to learning JS I am currently working an example in ar.js + three.js. My goal is to replicate some properties of another well known example for three.js, WebGL Globe, but with a different dataset, an render a simple animation in AR:

An ever-rotating globe on y axis with located bars coming out from it; the length of the bars are based on data.).

I am recycling two codes: the one aforementioned to get the three.js code, then inserted in a clone of Stemkoski’s.

The rendering of an ever-rotating globe (without shading and atmosphere) has been fine. The bars (cubes), which are based on data, are not completely ok though: although they are rendered in the correct position to themselves (bar points on US are always like US and bar points about Europe are always like Europe), they might end in different positions/coordinates of the globe every time I re-render. I also have noticed that although both are set to rotate to the same speed, they are not keeping that relation along the time.

To be honest I am not sure right now if this is a three.js issue or an ar.js one (VERY new to both technologies). I have been trying to find related examples for three.js as well as for ar.js with no avail.

Is anyone here in this forum who could guide my search or suggest a solution?

The html with the ar.js + three.js for this exercise is on my gist. Also the dataset I am using is there. To see it working as localhost you should:

  • clone the AR-Examples Stemkoski repo
  • add an html with my code as in my gist
  • add the json dataset that is also in my gist to the data subdirectory of the cloned repository
  • run a simple server
  • go to the corresponding localhost port and open the html address; show to your camera a Hiro marker as in Stemkoski repo

This is an example of a wrong rendering:

Let me know if you can help?

It’s more likely to get help if you try to isolate the mentioned issues into a small, editable test application. Use the following fiddle as a basis: Edit fiddle - JSFiddle - Code Playground

1 Like