similar changes

Author: PANSTER.Daniel

src/app/css3d-threejs/css3d-threejs.component.html

@@ -6,7 +6,7 @@ <h1>
         <b>A Three.js CSS3d showcase...</b>
       </h1>
       This canvas contains two scenes from
-      <em>THREE</em> js and two renderer elements, a
+      <em>THREE.js</em> and two renderer elements, a
       <em>WebGLRenderer</em> and a
       <em>CSS3DRenderer</em>.
       <br> The focus is the integration and handling on the CSS 3d in the scene. Features for this showcase are clickable, highlight,

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

@@ -15,19 +15,19 @@ export class Css3dThreejsComponent implements AfterViewInit {
   @ViewChild('canvasCSS3d')
   private canvasRef: ElementRef;
 
-  private world:CSS3dWorld.MainCSS3d;
+  private world: CSS3dWorld.MainCSS3d;
 
 
-    /**
-   * get the css3d canvas
-   * 
-   * @readonly
-   * @private
-   * @type {HTMLDivElement}
-   * @memberof Css3dThreejsComponent
-   */
+  /**
+ * get the css3d canvas
+ * 
+ * @readonly
+ * @private
+ * @type {HTMLDivElement}
+ * @memberof Css3dThreejsComponent
+ */
   private get canvas(): HTMLDivElement {
-     return this.canvasRef.nativeElement;
+    return this.canvasRef.nativeElement;
   }
 
 
@@ -44,15 +44,20 @@ export class Css3dThreejsComponent implements AfterViewInit {
    * @memberof Css3dThreejsComponent
    */
   public ngAfterViewInit() {
-    this.world = new CSS3dWorld.MainCSS3d(this.canvas, 0.7);
+    this.world = new CSS3dWorld.MainCSS3d(this.canvas, 0.6);
+    // this.canvasRef.nativeElement.style.position = 'relative';
+
+    // let domCanvas:HTMLCanvasElement = document.querySelector("canvas");
+    // console.log(domCanvas);
+    // domCanvas.style.position = 'relative';
   }
-  
-  
+
+
   /* EVENTS */
-    /**
-     * Update scene after resizing. 
-     */
-    public onResize() {
-      this.world.onResize();
+  /**
+   * Update scene after resizing. 
+   */
+  public onResize() {
+    this.world.onResize();
   }
 }

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

@@ -230,16 +230,16 @@ export class MainCSS3d {
         this.scene.add(this.pivotPoint);
 
         // Add different spheres with cannon shapes / bodies
-        for (var i = 1; i < 3; i++) {
-            for (var j = 1; j < 8; j++) {
+        for (var i = 1; i < 8; i++) {
+            for (var j = 1; j < 3; j++) {
                 let factor = Math.random() * 30 + 5;
                 console.log("factor: " + factor);
 
                 let sign: number = (factor > 20) ? +1 : -1; // positive or negative
                 var sphereShape = new Cannon.Sphere(factor);
                 var sphereBody = new Cannon.Body({ mass: factor });
                 sphereBody.addShape(sphereShape);
-                sphereBody.position.set(-450 + 140 * j, 70 * i+100, 20 * i * j - 150);
+                sphereBody.position.set(j*50, 100 * i, 20 * i * j - 150);
                 sphereBody.angularVelocity.set(0, factor / 100 * sign,0 );
                 sphereBody.quaternion.set(0.2, 0.5, 0, 1);
                 this.cannonBalls.push(sphereBody);
@@ -248,7 +248,7 @@ export class MainCSS3d {
                 // visual
                 var geom = new THREE.SphereGeometry(factor, 32, 32);
                 var mesh = new THREE.Mesh(geom, this.getMeshPhongMaterialFromTexture(Texture.GAS_GREEN));
-                mesh.position.set(-450 + 140 * j, 70 * i+100, 20 * i * j - 150);
+                mesh.position.set(j*50 , 100 * i, 20 * i * j - 150);
                 mesh.castShadow = true;
                 mesh.receiveShadow = true;
                 this.sceneBalls.push(mesh);