Angular Module

[looading]

Describe your issue here.

Do you have any plan to provide a Angular moudle?

Version:

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

Issue type:

• Bug
• Proposal/Enhancement
• Question
• Discussion

---

Tested on:

Desktop

• Chrome
• Chrome Canary
• Chrome dev-channel
• Firefox
• Opera
• Microsoft IE
• Microsoft Edge

Android

• Chrome
• Firefox
• Opera

IOS

• Chrome
• Firefox
• Opera

[sasha240100]

@looading what should it do?

[noahcoetsee]

An angular module? Angular is based on live HTML editing through the change of variables. That should be something done entirely on your side, it's pretty much unrelated to 3D WebGL. DatGUI Does the same thing with a little bit of a twist. I don't understand why you would want an Angular module, please clarify.

[looading]

Inspired by the react-whs project, why don`t we integrate Angular and WHS?
Then I thought for a moment. whether we can simply package Core/Components/Modules of the WHS into Components/Directive/Service of the Angular. Pack those int to a Angular Modules, like ng-whs.

Then. for example, if we want to create an 3D sence in a Angular Component.

1. import module

// app.moudls.ts
import { NgWhsModule } from 'ng-whs';

...

@NgModule({
    imports: [
        NgWhsModule,
        ...
    ],
    ...
})
export class AppModule {}

2. use ng-whs

<!-- app.component.html -->
<whs-container
    [scene]='scene'
    [camera]='camera'
    >
    <Sphere
        [geometry]='geometry'
        ...
        ></Sphere>
    <BasicSphere
        [position]='position'
        ...
        ></BasicSphere>
    <Line
        [material]='material'
        ...
        ></Line>
</whs-container>

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { WhsService, Sence } from 'ng-whs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: './app.component.scss',
})
export class AppComponent implements OnInit {
    
    public scene: Sence;
    ...
    
    constructor(private whs: WhsService) {
    }
    
    ngOnInit() {
        this.sence = this.whs.createSence();
        ...
    }
}

3. done

At last,ng developers may only need to spend very little time to create an 3D sence which they want.

write less, more simple and more intuitive. I think it`s cool.

[sasha240100]

@looading I've got the idea now. Yes, that can be done as separate open source project on github. Would you like to start the development? We can guarantee you support during the development

[looading]

@sasha240100 Ok, i will start the development a few days later.
Before that, i will do more research.

[meronbrouwer]

@looading From your issue, I get the impression that you already have whs working within ng. I'm trying to do the same, but am a bit puzzled on how to approach this. Do you have a working example ?

[looading]

@meronbrouwer There are no examples available online at the moment.But, you can open a new issue to discuss your puzzles in detaild.

[meronbrouwer]

@looading thanks for the reply. I'll create a new issue if I bump into new problems.