38 lines
840 B
JavaScript
38 lines
840 B
JavaScript
import * as THREE from 'https://esm.sh/three';
|
|
import { ThreeRendererElement } from './ThreeRendererElement.js';
|
|
|
|
export class LightElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this.light = new THREE.DirectionalLight(this.getAttribute('color') || 0xfff, 0.5);
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return [ "color" ];
|
|
}
|
|
|
|
attributeChangedCallback(name, old_value, value) {
|
|
if(name == 'color') {
|
|
this.light.color = new THREE.Color(value);
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
var scene = this.closest('three-scene');
|
|
|
|
if(!scene.ready) {
|
|
var self = this;
|
|
|
|
scene.addEventListener('ready', function() {
|
|
scene.scene.add(self.light);
|
|
})
|
|
} else {
|
|
scene.scene.add(this.light);
|
|
}
|
|
this.ready = true;
|
|
}
|
|
}
|
|
|
|
customElements.define('three-light', LightElement);
|