i was trying to customoize the viewer template when use @babylonjs/viewer, I’m trying to do it with js instead Html arrtrubutes, however, not work, any pros helps me,plz!~
here is my code:
import * as BabylonViewer from "@babylonjs/viewer";
const template = document.createElement("template");
template.innerHTML = `
<div id='main'>
</div>
`;
class MxmThreeViewer extends HTMLElement {
element: HTMLElement | null;
slotNode;
viewer;
static get observedAttributes() {
return ["url", "config"];
}
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "closed" });
shadowRoot.appendChild(template.content.cloneNode(true));
this.element = shadowRoot.querySelector("#main");
if (this.element) {
this.viewer = new BabylonViewer.DefaultViewer(this.element, {
scene: {
debug: false,
},
camera: {
behaviors: {
autoRotate: 0,
framing:true
},
framing: {
type: 2,
zoomOnBoundingInfo: true,
zoomStopsAnimation: false,
},
bouncing: {
type: 1,
},
},
model: {
url: this.url,
},
templates:{
main:{
html:`<div>
<viewer></viewer>
</div>`
},
viewer: {
html:`<canvas></canvas>`
}
}
});
console.log(this.viewer.templateManager.getTemplate("mxm-view"));
}
const slot = this.element?.querySelector("slot");
if (slot) {
this.slotNode = slot?.querySelector("div");
slot?.addEventListener("slotchange", () => {
const node = slot.assignedNodes()[0];
if (node) {
(this.slotNode as any) = node;
this.render();
}
});
}
}
get url() {
const url = this.getAttribute("url");
return url ? url : "";
}
set url(value: string) {
this.setAttribute("url", value);
}
connectedCallback() {
if (!this.url) {
this.url = "http://192.168.21.133:8276/rebuild.glb";
}
this.render();
}
attributeChangedCallback(name: any, oldVal: any, newVal: any) {
if (oldVal !== newVal) {
switch(name) {
case 'url':
this.url = newVal;
break;
}
}
}
render() {
console.log("render", this.url);
}
}
window.customElements.define("mxm-three-viewer", MxmThreeViewer);
here is the error:
