Build up a local server to avoid cross-origin error
we know that using can do insert the image. Due to the cross-origin problem, in local testing, we need to use a local server to host the static file and its assets, such as images so that when used in html file, it will not cause a cross-origin error. The way we build up a temporary server is to use python. First cd to the corresponding directory, then do:
1
python -m SimpleHTTPServer 8000
Then go to the localhost:8000 can see the files. For more detailed info, check this post in stack overflow.
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:
1 2 3 4
git clone … // from github, copy the repo’s https cd … git checkout - -orphan gh-pages git rm -rf .
Then now, the gh-pages should be empty. Move the prepared index.html to here then
<script> var data=[10, 10, 10, 10, 10, 10, 10, 10, 10, 10] var tip = -0.5; var radius = 6; var scene = d3.select("a-scene") scene.append("a-camera") .attr({ position: function(){ var x = 0; var y = tip; var z = 0; return x + " " + y + " " + z } }) var cubes = scene.selectAll("a-entity.bar").data(data) .enter() .append("a-entity") .classed("bar", true) .attr({ // mixin: "link", material: "color: #7BC8A4", geometry: "primitive: box; width: 2; height: 2; depth: 2", position: function(d, i){ var theta = (i / data.length) * (2 * Math.PI); var x = radius * Math.cos(theta); var y = 0; var z = radius * Math.sin(theta); return x + " " + y + " " + z }, rotation: function(d, i){ var x = 0; var y = -360 * i/data.length; var z = -80*Math.atan(tip/radius); return x + " " + y + " " + z } }) cubes.append("a-mouseenter") .attr({ // scale: "1 2 1", position: "0 2 0", visible: false }) cubes.append("a-mouseleave") .attr({ scale: "1 1 1" // position: "0 2 0" // visible: true })
Find the structure of this scene, it will like having several <a-entity> inside <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-mouseenter> and <a-mouseleave> tags which helps define the actions when hovered.