Skip to content

Making separation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
khalid32 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Making separation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a8db88
Modify page1.html
khalid32 Nov 2, 2016
8db001e
Change Back buttons position
khalid32 Nov 2, 2016
b4aea3a
Add new directory and new files
khalid32 Nov 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-html-shader/master/dist/aframe-html-shader.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
<script src="js/bmfont.min.js"></script>
</head>
<body>
<a-scene>
<a-scene auto-enter-vr>


<a-entity>
Expand Down
13 changes: 13 additions & 0 deletions js/bmfont.min.js
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 35 additions & 16 deletions page1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-html-shader/master/dist/aframe-html-shader.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
</head>
<script src="js/bmfont.min.js"></script>
</head>
<body>
<a-scene position="2.0 1.00 1.00">
<a-scene position="2.0 1.00 1.00" auto-enter-vr>

<a-entity>
<a-entity camera look-controls>
<a-entity camera look-controls wsad-controls>
<!--trigger!-->
<a-entity position="0 0 -3" scale="0.2 0.2 0.2" geometry="primitive: ring; radiusOuter: 0.20; radiusInner: 0.13;" material="color: #ADD8E6; shader: flat" cursor="maxDistance: 30; fuse: true">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
Expand All @@ -20,12 +18,20 @@
</a-entity>
</a-entity>

<!--back!-->
<a-entity id="back">
<a-plane id="backCircle" height="0.5" width="1" color="#000" position="0 -2.0 -3"></a-plane>
<a-entity bmfont-text="text:back; color:#fff" scale="1 1 1" position="-0.20 -2.05 -3"></a-entity>
<a-entity rotation="0 -28 0" position="-0.5 0 0">
<!--back!-->
<a-entity id="back" position="-1 0.5 -1.6" rotation="0 0 0">
<a-plane id="backPlane" height="0.5" width="1" color="#000" position="0 -2.0 -2" ></a-plane>
<a-entity bmfont-text="text:back; color:#fff" scale="1 1 1" position="-0.20 -2.05 -1.99"></a-entity>
</a-entity>
<!--nextPage!-->
<a-entity id="next" position="1.4 0.5 -1.6" rotation="0 -15 0">
<a-plane id="nextPlane" height="0.5" width="1" color="#000" position="0 -2.0 -1.7" ></a-plane>
<a-entity bmfont-text="text:next; color:#fff" scale="1 1 1" position="-0.20 -2.05 -1.7"></a-entity>
</a-entity>
</a-entity>


<!--view!-->
<a-entity>
<a-entity position="-2.50 0 -5.00">
Expand All @@ -36,16 +42,23 @@
<a-entity>
<a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="20000"
easing="linear" repeat="indefinite"></a-animation>
<a-sphere id="moon" radius="0.5" src="res/moon.jpg" position="-1.50 0 -1.00"></a-sphere>S
<a-entity position="-1.50 0 -1.00">
<a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="2000"
easing="linear" repeat="indefinite"></a-animation>
<a-sphere id="moon" radius="0.5" src="res/moon.jpg"></a-sphere>
</a-entity>

</a-entity>
<!--earth properties!-->
<a-sphere id="earth" radius="1" src="res/earth.jpg"></a-sphere>
</a-entity>


<!--earth text!-->
<a-entity id="earthText">
<a-entity position="1 1.5 -5" bmfont-text="text: Earth; color:#fff;" scale="3 3 3"></a-entity>
<a-entity position="1 -1.0 -5"

<a-entity id="earthText" visible="true">
<a-entity position="0 1.5 -5.5" rotation="0 -25 0" bmfont-text="text: Earth; color:#fff;" scale="3 3 3"></a-entity>
<a-entity position="0 -1.0 -5.5" rotation="0 -25 0"
bmfont-text="text: Earth (otherwise known as the world, in Greek: Γαῖα Gaia, or in Latin: Terra) is the third planet from the Sun, the densest planet in the Solar System.

Radius: 3,959 mi
Expand All @@ -56,10 +69,11 @@
Area: 196.9 million mi²;
color:#fff;" scale="1.2 1.2 1.2"></a-entity>
</a-entity>

<!--moon text!-->
<a-entity id="moonText" visible="false">
<a-entity position="1 1.5 -5" bmfont-text="text: Moon; color:#fff;" scale="3 3 3"></a-entity>
<a-entity position="1 -1.0 -5"
<a-entity position="0 1.5 -5.5" rotation="0 -25 0" bmfont-text="text: Moon; color:#fff;" scale="3 3 3"></a-entity>
<a-entity position="0 -1.0 -5.5" rotation="0 -25 0"
bmfont-text="text: The Moon is Earth's only permanent natural satellite. It is the fifth-largest natural satellite in the Solar System.

Radius: 1,079 mi
Expand Down Expand Up @@ -91,6 +105,11 @@
window.location.href = "index.html";
});

document.querySelector("#next").addEventListener('click', function() {
window.location.href = "page2.html";
});


document.querySelector("#moon").addEventListener('click', function() {
document.querySelector("#earthText").setAttribute('visible', false);
document.querySelector("#moonText").setAttribute('visible', true);
Expand Down
85 changes: 85 additions & 0 deletions page2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="js/bmfont.min.js"></script>
</head>
<body>
<a-scene position="2.0 1.00 1.00" auto-enter-vr>

<a-entity>
<a-entity camera look-controls wsad-controls>
<!--trigger!-->
<a-entity position="0 0 -3" scale="0.2 0.2 0.2" geometry="primitive: ring; radiusOuter: 0.20; radiusInner: 0.13;" material="color: #ADD8E6; shader: flat" cursor="maxDistance: 30; fuse: true">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.2 0.2 0.2" dur="1500"></a-animation>
</a-entity>
<!--fixed entity close!-->
</a-entity>
</a-entity>

<!--back!-->
<a-entity id="back" position="0 0.5 -1" rotation="0 -25 0">
<a-plane id="backCircle" height="0.5" width="1" color="#000" position="0 -2.0 -2.8" ></a-plane>
<a-entity bmfont-text="text:back; color:#fff" scale="1 1 1" position="-0.20 -2.05 -2.78"></a-entity>
</a-entity>

<!--view!-->
<a-entity>
<a-entity position="-2.50 0 -5.00">
<!--rotating animation!-->
<a-entity>
<a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000"
easing="linear" repeat="indefinite"></a-animation>

<!--earth properties!-->
<a-sphere id="saturn" radius="1" src="res/saturn.jpg"></a-sphere>
</a-entity>

<a-ring radius-inner="1.5" radius-outer="2" material="side:double" rotation="-75 0 0" src="res/saturn.jpg"></a-ring>

</a-entity>


<!--saturn text!-->

<a-entity id="saturnText" visible="true">
<a-entity position="1 1.5 -5" rotation="0 -25 0" bmfont-text="text: Saturn; color:#fff;" scale="3 3 3"></a-entity>
<a-entity position="1 -1.0 -5" rotation="0 -25 0"
bmfont-text="text: Earth (otherwise known as the world, in Greek: Γαῖα Gaia, or in Latin: Terra) is the third planet from the Sun, the densest planet in the Solar System.

Radius: 3,959 mi
Age: 4.543 billion years
Mass: 5.972 × 10^24 kg
Distance from Sun: 92.96 million mi
Gravity: 9.807 m/s²
Area: 196.9 million mi²;
color:#fff;" scale="1.2 1.2 1.2"></a-entity>
</a-entity>

<!--view entity end!-->
</a-entity>




<a-sky src="res/milkyway.jpg"></a-sky>

</a-scene>

<script>
AFRAME.registerComponent('auto-enter-vr', {
init: function () {
this.el.sceneEl.enterVR();
}
});

document.querySelector("#back").addEventListener('click', function() {
window.location.href = "page1.html";
});


</script>

</body>
</html>
Binary file added res/Mercury.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/saturn.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.