<div class="fixed-ratio">
<!-- A-Frame scéna -->
<a-scene embedded>
<a-entity position="0 0 0" camera look-controls></a-entity>
<!-- Entita pro 3D text s data-bindingem do atributů value a color -->
<a-text [attr.value]="text"
[attr.color]="diffuseColor"
align="center"
position="0 1.6 -0.5">
</a-text>
</a-scene>
</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>
<label>Základní barva</label>
<div>
<input name="diffuse" type="color" [(ngModel)]="diffuseColor" />
<span [ngStyle]="{'color': diffuseColor }"> {{ diffuseColor }} </span>
</div>
</div>
</form>
</div>
import { Component } from '@angular/core'; // import jádra Angularu
// decorator Angular komponentu
@Component({
selector: 'app1',
templateUrl: './app1.component.html' // URL šablony
})
// třída Angular komponentu
export class App1Component {
text = 'Hello world';
diffuseColor = '#dd3300';
specularColor = '#ee9966';
}
import { NgModule, CUSTOM_ELEMENTS_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: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
<div class="fixed-ratio">
<!-- A-Frame scéna -->
<a-scene embedded>
<a-entity position="0 -2 0" camera look-controls></a-entity>
<!-- Cyklus s využitím directivy *ngFor pro vykreslení všech kostek -->
<a-entity *ngFor="let item of items; index as index">
<!-- Relativní pozicování -->
<a-entity [attr.position]="((index - ((items.length - 1) / 2)) * 2) + ' 0 -5'">
<!-- Vytvoření kostky s data-bindingem do jejích atributů -->
<a-box [attr.color]="item.color"
[attr.width]="item.size.x"
[attr.height]="item.size.y"
[attr.depth]="item.size.z"
[attr.position]="item.position.x + ' ' + item.position.y + ' ' + item.position.z">
</a-box>
</a-entity>
</a-entity>
</a-scene>
</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 { Component } from '@angular/core'; // import jádra Angularu
// decorator Angular komponentu
@Component({
selector: 'app2',
templateUrl: './app2.component.html'
})
// třída Angular komponentu
export class App2Component {
items = [];
// metoda pro přidání kostky
add() {
this.items.push({
size: { x: 1, y: 1, z: 1 },
position: { x: 0, y: 0, z: 0 },
color: "#ff9900" // nebo jiná náhodná barva
});
}
// metoda pro smazání kostky
remove(index) {
this.items.splice(index, 1);
}
// metoda volaná při inicializaci
ngOnInit() {
this.add();
this.add();
}
}
import { NgModule, CUSTOM_ELEMENTS_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: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }