Create a virtual-reality-like scene in mobile and desktop. Using D3js to do the math! Check out Live Demo now!
Build up a local server to avoid cross-origin error
we know that using
python -m SimpleHTTPServer 8000
Then go to the localhost:8000 can see the files. For more detailed info, check this post in stack overflow.
How to append tag in multiple nodes
references this post from stack overflow
references this website
How to host your static page in github
references this post
The final result will be, you can access the project site from your github.io website with a branch. The procedure goes well, but it seems that gh-pages cannot host a d3 or aframe pages? Answer: YES, SURE WE CAN!!! for more info, you can just visit my website, github can host static website for free, so what kind of websites can be called as static? we called those sites as “static” as it only involves client-side scripting if it contains js file. Those who need server-side scripting are called dynamic websites.
note that in order to use gh-pages to host my project website, you need to name the html file to be
index.html. Other file name will not be recognized!!
To summarize, the basic procedure is:
git clone … // from github, copy the repo’s https
Then now, the gh-pages should be empty. Move the prepared
index.html to here then
git add -A
git commit -m “First commit”
git push origin gh-pages
Then, go to www.chocoluffy.com/
How A-frame works
References this website for more A-frame primitives.
Then by using d3js, we can add corresponding number of
Find the structure of this scene, it will like having several
<a-scene>, and each of
<a-entity> has multiple attributes that defines its position, rotation, material and geometry. And inside the
<a-entity>, also has
<a-mouseleave> tags which helps define the actions when hovered.