78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import * as THREE from 'https://esm.sh/three';
|
|
|
|
const attrs_dimensions = [ 'height', 'width', 'depth' ];
|
|
const attrs_position = [ 'x', 'y', 'z' ];
|
|
const attrs_rotation = [ 'rx', 'ry', 'rz' ];
|
|
|
|
export class BaseGeometryElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
var attrs = BaseGeometryElement.observedAttributes;
|
|
|
|
for(let i in attrs) {
|
|
Object.defineProperty(this, attrs[i], {
|
|
get: function() {
|
|
return this.getAttribute(attrs[i]);
|
|
},
|
|
set: function(v) {
|
|
return this.setAttribute(attrs[i], v);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return [
|
|
'color',
|
|
'height', 'width', 'depth',
|
|
'x', 'y', 'z',
|
|
'rx', 'ry', 'rz',
|
|
]
|
|
}
|
|
|
|
parentO3DCallback() {}
|
|
|
|
connectedCallback() {
|
|
var parentEl = this.parentElement.closest('three-group, three-scene');
|
|
|
|
if(!parentEl.ready) {
|
|
var self = this;
|
|
|
|
parentEl.addEventListener('ready', function() {
|
|
var o3d = parentEl.nodeName == "THREE-GROUP" ? parentEl.group : parentEl.scene;
|
|
self.parentO3DCallback(o3d);
|
|
|
|
self.ready = true;
|
|
self.dispatchEvent(new CustomEvent("ready"));
|
|
});
|
|
} else {
|
|
var o3d = parentEl.nodeName == "THREE-GROUP" ? parentEl.group : parentEl.scene;
|
|
this.parentO3DCallback(o3d);
|
|
this.ready = true;
|
|
this.dispatchEvent(new CustomEvent("ready"));
|
|
}
|
|
}
|
|
|
|
attributeChangedCallback(name, old_value, value) {
|
|
if(!this.ready) return;
|
|
|
|
var obj = {};
|
|
|
|
if(attrs_dimensions.includes(name)) {
|
|
obj = this.geometry[name];
|
|
}
|
|
|
|
if(attrs_position.includes(name)) {
|
|
obj = this.mesh.position[name];
|
|
}
|
|
|
|
if(attrs_rotation.includes(name)) {
|
|
console.log(name);
|
|
obj = this.mesh.rotation[name];
|
|
}
|
|
|
|
obj[name] = value;
|
|
}
|
|
}
|