Provide an example for inclusion in an Angular Project

[meronbrouwer]

Describe your issue here.

Version:

• v2.x.x
• v1.x.x

Issue type:

• Bug
• Proposal/Enhancement
• Question
• Discussion

---

The examples could use one that shows a Hello World as an Angular component. This will require the typings to be (mostly) finished.

[looading]

You can use whs directly in Angular.
Here is a shabby example.

// container.component.ts
import { Component, ComponentRef, ElementRef, OnInit, Input, OnChanges } from '@angular/core';
import * as THREE from 'three';
import {
  CameraComponentParams,
  App } from 'whs';

import * as WHS from 'whs/build/whs';

@Component({
  selector: 'whs-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit, OnChanges {
  private _container: App;

  @Input() public camera: CameraComponentParams = {
    position: {
      y: 10,
      z: 50
    },
  };

  @Input() public rendering = {
    bgColor: 0x162129,
    renderer: {
      antialias: true,
      shadowmap: {
        type: THREE.PCFSoftShadowMap,
      },
    }
  };

  constructor(private element: ElementRef) {}

  private createContainer() {
    this._container = new App([
      new WHS.ElementModule(this.element.nativeElement),
      new WHS.SceneModule(),
      new WHS.CameraModule({
        position: {
          y: 10,
          z: 50
        }
      }),
      new WHS.RenderingModule(this.rendering, {shadow: true}),
      new WHS.OrbitControlsModule(),
      new WHS.ResizeModule()
    ]);
  }

  public build() {
    // Sphere
    const sphere = new WHS.Sphere({ // Create sphere comonent.
      geometry: {
        radius: 5,
        widthSegments: 32,
        heightSegments: 32
      },

      material: new THREE.MeshPhongMaterial({
        color: 0xF2F2F2
      }),

      position: new THREE.Vector3(0, 5, 0)
    });
    sphere.addTo(this._container);
    // Plane
    new WHS.Plane({
      geometry: {
        width: 100,
        height: 100
      },

      material: new THREE.MeshPhongMaterial({color: 0x447F8B}),

      rotation: {
        x: -Math.PI / 2
      }
    }).addTo(this._container);
    // Lights
    new WHS.PointLight({
      light: {
        intensity: 0.5,
        distance: 100
      },

      shadow: {
        fov: 90
      },

      position: new THREE.Vector3(0, 10, 10)
    }).addTo(this._container);

    new WHS.AmbientLight({
      light: {
        intensity: 0.4
      }
    }).addTo(this._container);

    // Start the app
    this._container.start();
  }

  ngOnInit() {
    console.log(this.element.nativeElement.querySelector('.world'));
    this.createContainer();
    this.build();
  }

  ngOnChanges() {
  }
}

<!--  app.component.html -->
<whs-container></whs-container>

It`s available.

The above code is not clean.In [email protected], there are some different api between typescript version of whs and javascript version of whs .

Hirako says: Sorry about that. If you raise an issue with the APIs not matching, I will make sure to fix the types definitions to match APIs.

At last, there wil be some examples about Angular in ng-whs

[meronbrouwer]

Sorry for the thumbs down.... meant to only select the thumbs up...

[looading]

@meronbrouwer It dosn`t matter.

In fact, I don`t recommend the above method. In project ng-whs, I will take another more appropriate method.However, it will take some time to complete.

[meronbrouwer]

@looading Thanks. I'll have a look at that project. Btw, note that is seems the convention to give Angular2+ projects an ngx prefix, so it would be ngx-whs.

[looading]

@meronbrouwer Yes, your are right. I will rename ng-whs to ngx-whs.

[meronbrouwer]

@looading In your example, you use the CameraModule, did you create the typings for those yourself? They are missing in 2.1.8

[looading]

@meronbrouwer I mentioned this before.
In [email protected], there are some different api between typescript version of whs and javascript version of whs .
I didn`t create the typing for CameraModule. I use the CameraModule directly the impact of typescript.

import * as WHS from 'whs/build/whs';  // .js file umd

[hirako2000]

Please raise an Issue for any whs type definition that diverge from the whs API (matching version of course).
Those should be addressed, I just never had time to look back and exercise every single component interfaces in typescript. Just did a few.

About the oddity of types looking like they are not present, in say whs 2.1.8, you could also raise an issue with more details as to what's going on. I never had this issue, at least never had that issue with the typescript boilerplate app we published as an example of project using whs/three.js with TS.

[hirako2000]

Let's relate the whs modules interface struggle to #298

[sasha240100]

@looading What's the state of the project?

[looading]

@sasha240100
Sorry, the project on hold for such a long time.I've been very busy this period of time.
A part of the unfinished：

• Some examples of pending
• To improve performance

[sasha240100]

Well, keep us updated;)

…

On Tue, Mar 6, 2018 at 3:21 PM Mystery ***@***.***> wrote: @sasha240100 <https://github.com/sasha240100> Sorry, the project on hold for such a long time.I've been very busy this period of time. A part of the unfinished： - Some examples of pending - To improve performance — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#326 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHTX1fpwm5s7ASvJn1UUjDWwskwoeYN1ks5tbo1RgaJpZM4Pm_IX> .