about changes

Author: PANSTER.Daniel

src/app/app.component.html

@@ -1,14 +1,17 @@
-
-
 <div class="w3-sidebar w3-bar-block w3-black w3-top" style="z-index:3;width:10%;">
   <div class="w3-container w3-display-container w3-padding-16">
-    <h3><b>3D Test</b></h3>
+    <h3>
+      <b>3D Test</b>
+    </h3>
   </div>
+  <code>
     <a routerLink="" class="w3-bar-item w3-button">About</a>
     <a routerLink="cube-threejs" class="w3-bar-item w3-button">Cube - Three.js</a>
     <a routerLink="css3d-threejs" class="w3-bar-item w3-button">CSS3D - Three.js</a>
-  </div>
+  </code>
+</div>
+
 
 <div style="margin-left:10%;">
   <router-outlet></router-outlet>
-</div>
+</div>

src/app/css3d-threejs/src/main.ts

@@ -9,11 +9,10 @@ import * as Cannon from 'cannon';
 
 enum Texture {
     BRICK = "assets/texture/Bricks.jpg",
-    EARTH = "./../../../assets/texture/earthmap.png",
     GAS_BRIGHT = "assets/texture/Gaseous_Bright.jpg",
-    GAS_DARK = "./../../../assets/texture/Gaseous_Dark.png",
-    GAS_GREEN = "./../../../assets/texture/Gaseous_Green.jpg",
-    MOON_BW = "./../../../assets/texture/Moon_BW.jpg",
+    GAS_DARK = "assets/texture/Gaseous_Dark.png",
+    GAS_GREEN = "assets/texture/Gaseous_Green.jpg",
+    MOON_BW = "assets/texture/Moon_BW.jpg",
 }
 
 export class MainCSS3d {

src/app/cube-threejs/cube-threejs.component.ts

@@ -187,7 +187,7 @@ export class CubeThreejsComponent implements OnInit{
         let geometry = new THREE.BoxGeometry(this.size, this.size, this.size);
         //let geometry = new THREE.IcosahedronGeometry(1, 1);
 
-        this._texture_brick = new THREE.TextureLoader().load( "./../../assets/texture/Bricks.jpg" );
+        this._texture_brick = new THREE.TextureLoader().load( "/assets/texture/Bricks.jpg" );
         this._texture_brick.minFilter = THREE.LinearFilter;
         // check to set texture or pure color
         var matProps:any = {};

src/app/home/home.component.html

@@ -1,3 +1,29 @@
-<p>
-  home works! 2
-</p>
+<!-- wrap w3 -->
+<div class="w3-container">
+  <header>
+    <div class="w3-container ">
+      <h1>
+        <b>3D showcase examples set up on Angular 5, Three.js</b>
+      </h1>
+      Currently there is an example with rotating cubes and an example with a terrain, CSS3D and pysics developed.
+      <br> A small game included most features of the examples will be implemented...
+      <br>
+    </div>
+
+  </header>
+  <div class="w3-container">
+    <p>
+      <b>Note: This page is not responsive for mobile screens yet.</b>
+    </p>
+  </div>
+  <ul>
+    <li>Cube - Three.js</li>
+    <a routerLink="cube-threejs">
+      <img src="/assets/screens/cube_threejs.jpg" alt="" height="150" width="150">
+    </a>
+    <li>CSS3D - Three.js</li>
+    <a routerLink="css3d-threejs">
+      <img src="/assets/screens/css3d_threejs.jpg" alt="" height="150" width="150">
+    </a>
+  </ul>
+</div>