Angular & Three.js

// import jádra Angularu
import { Component } from '@angular/core';

// konstanty pro moduly načítané pomocí tagu script
declare const MW: any;
declare const THREE: any;
declare const setupScene: any;
declare const MAP: any;

// decorator Angular komponentu
@Component({
  selector: 'app1',
  templateUrl: './app1.component.html' // URL šablony
})
// třída Angular komponentu
export class App1Component {
  data = {};

  // metoda pro inicializaci komponentu
  ngOnInit() {
    var that = this;
    var scene = setupScene("canvas1"); // vytvoření scény

    // načtení fontu
    var loader = new THREE.FontLoader();
    loader.load('../../../libs/threejs/three.helvetiker.json', function (font) {
        var data = {};

        // mesh pro text
        var text = new THREE.Mesh(
            new THREE.TextGeometry("", {
                font: font,
                size: 2,
                height: 0.5,
                curveSegments: 16
            }),
            new THREE.MeshStandardMaterial({})
        );

        // obousměrné mapování mezi 3D objektem a datovým objektem 
        new MW.TwoWayMap({
            end1: data,
            map1: MAP.TEXT.to3DModel(font),
            end2: text,
            map2: MAP.TEXT.toDataModel,
            data1: {
                text: 'Hello world',
                diffuseColor: '#dd3300',
                emissiveColor: '#ee9966',
            }
        });
        
        scene.add(text);
        that.data = data;
    });
  }
}

<!-- Plátno pro scénu -->
<div id="canvas1" class="fixed-ratio"></div>
<div>
    <!-- Formulář pro ovládání scény -->
    <form>
        <div>
            <label>Text</label>
            <div>
              <!-- Vstup pro text s obousměrným data-bindingem [(ngModel)] -->
              <input name="text" type="text" [(ngModel)]="text" />
            </div>
        </div>
        <div>
            <div class="grid">
                <div>
                    <label>Základní barva</label>
                    <div>
                        <input name="diffuse" type="color" [(ngModel)]="diffuseColor" />
                        <span [ngStyle]="{'color': diffuseColor }"> {{ diffuseColor }} </span>
                    </div>
                </div>
                <div>
                    <label>Barva lesku</label>
                    <div>
                        <input name="specular" type="color" [(ngModel)]="specularColor" />
                        <span [ngStyle]="{'color': specularColor }"> {{ specularColor }} </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { App1Component } from './app1.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ App1Component ],
  bootstrap:    [ App1Component ],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

// import jádra Angularu
import { Component } from '@angular/core';
    
// konstanty pro moduly načítané pomocí tagu script
declare const MW: any;
declare const THREE: any;
declare const setupScene: any;
declare const MAP: any;

// decorator Angular komponentu
@Component({ 
  selector: 'app2',
  templateUrl: './app2.component.html'
})
// třída Angular komponentu
export class App2Component {
  items = [];
  group  = new THREE.Group();

  // vytvoření scény při inicializaci komponentu
  ngOnInit() { 
    var scene = setupScene("canvas2");
    scene.add(this.group);
    this.add();
    this.add();
  }

  // metoda pro vytvoření kostky
  createCube(index) {
    var data = {};

    // mesh kostky
    var cube = new THREE.Mesh(
        new THREE.BoxGeometry(),
        new THREE.MeshBasicMaterial({ })
    );
    this.group.add(cube);
    
    // obousměrné mapování mezi 3D objektem a datovým objektem 
    new MW.TwoWayMap({
        end1: data,
        map1: MAP.CUBE.to3DModel,
        end2: cube,
        map2: MAP.CUBE.toDataModel,
        data1: {
            color: "#ff9900", // nebo jiná náhodná barva
            element: cube,
            index: index
        }
    });

    // relativní pozice kostky
    this.group.position.x = - index;
    cube.position.x = (index * 2);
    return data;
  }

  // metoda pro přidání kostky
  add() {
    this.items.push(this.createCube(this.items.length));
  }

  // metoda pro smazání kostky
  remove(index) {
    this.group.remove(this.items[index].element);
    this.items.splice(index, 1);
    // přepočet pozice a indexu u dalších kostek
    for (var i = index; i < this.items.length; i++) {
        this.items[i].index = i;
        this.items[i].element.position.x = this.items[i].element.position.x -2;
    }
    this.group.position.x = - (this.items.length - 1);
  }
}

<!-- Plátno pro scénu -->
<div id="canvas2" class="fixed-ratio"></div>
<div>
    <!-- Formulář pro ovládání scény -->
    <form>
        <ul>
            <!-- Cyklus s využitím directivy *ngFor pro ovládací panely ke všem kostkám -->
            <li *ngFor="let item of items; index as index">
                <div>
                    <div class="grid">
                        <div>
                            <label>Objekt #{{index + 1}}</label>
                            <div>
                                <input type="color" [(ngModel)]="item.color" name="color {{ index }}" />
                                <span [ngStyle]="{'color': item.color }"> {{ item.color }} </span>
                            </div>
                        </div>
                        <div>
                            <div class="grid">
                                <div>
                                    <label>↔ W {{ item.size.x * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.x" min="0.1" max="2" step="0.1" name="w{{ index }}" />
                                </div>
                                <div>
                                    <label>↕ H {{ item.size.y * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.y" min="0.1" max="2" step="0.1" name="h{{ index }}" />
                                </div>
                                <div>
                                    <label>⤢ L {{ item.size.z * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.z" min="0.1" max="2" step="0.1" name="l{{ index }}" />
                                </div>
                                <div>
                                    <label>→ X {{ item.position.x }}</label>
                                     <input type="range" [(ngModel)]="item.position.x" min="-1" max="1" step="0.1" name="x{{ index }}" />
                                </div>
                                <div>
                                    <label>↑ Y {{ item.position.y }}</label>
                                    <input type="range" [(ngModel)]="item.position.y" min="-1" max="1" step="0.1" name="y{{ index }}" />
                                </div>
                                <div>
                                    <label>↗ Z {{ item.position.z }}</label>
                                    <input type="range" [(ngModel)]="item.position.z" min="-1" max="1" step="0.1" name="z{{ index }}" />
                                </div>
                            </div>
                        </div>
                        <div>
                            <!-- Tlačítko napojené na metodu pro smazání kostky -->
                            <a (click)="remove(index)">Smazat</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- Tlačítko napojené na metodu pro přidání kostky -->
        <a (click)="add()">Přidat nový objekt</a>
    </form>
</div>

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { App2Component } from './app2.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ App2Component ],
  bootstrap:    [ App2Component ],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }