How can I pass the ColorPicker parameter (Color1) from object-settings.component.html to poiComponentClass.ts in order to set the color of the cylinder?
This is found in object-settings.component.html
<div class="col-md-5">
<input [style.background]="color1" [(colorPicker)]="color1" (colorPickerOpen)="onEventLog('colorPickerOpen', $event)" (colorPickerClose)="onEventLog('colorPickerClose', $event)" (cpInputChange)="onEventLog('cpInputChange', $event)" (cpSliderDragStart)="onEventLog('cpSliderDragStart', $event)" (cpSliderDragEnd)="onEventLog('cpSliderDragEnd', $event)"/>
</div>
This code is placed in object-settings.component.ts
public onChangeColorCmyk(color: string): Cmyk
{
const hsva = this.cpService.stringToHsva(color);
if (hsva) {
const rgba = this.cpService.hsvaToRgba(hsva);
return this.cpService.rgbaToCmyk(rgba);
}
return new Cmyk(0, 0, 0, 0);
}
public onChangeColorHex8(color: string): string {
const hsva = this.cpService.stringToHsva(color, true);
if (hsva) {
return this.cpService.outputFormat(hsva, 'rgba', null);}
return '';}
Check out this section in poiComponentClass.ts for more details
const THREE = this.context.three;
const textureLoader = new THREE.TextureLoader();
const geometry = new THREE.CylinderGeometry( 0.09, 0.09, 5, 5 );
geometry.rotateZ(-Math.PI * 0.5);
const material = new THREE.MeshBasicMaterial( {color: 0xFF00FF } );
const cylinder = new THREE.Mesh( geometry, material );
if (!this.inputs.sprite) {
return;}
if (!this.inputs.sprite.startsWith('/assets/')) {
textureLoader.crossOrigin = 'Anonymous';}
let map;
if (this.inputs.sprite.indexOf('.gif') !== -1) {
map = new GifLoader().load(this.inputs.sprite);
} else {
map = textureLoader.load(this.inputs.sprite);}
map.minFilter = THREE.LinearFilter;
map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
this.material = new THREE.SpriteMaterial( { map, color: this.inputs.color, fog: false );
this.material.alphaTest = 0.5;
this.material.map.encoding = THREE.sRGBEncoding;
this.sprite = new THREE.Sprite( this.material );
this.sprite.add(cylinder);
this.onObjectReady(this.sprite, true);}