threepipe
Version:
A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.
86 lines • 3.9 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var EditorViewWidgetPlugin_1;
import { AViewerPluginSync } from '../../viewer';
import { ViewHelper2 } from '../../three';
import { uiFolderContainer, uiToggle } from 'uiconfig.js';
import { onChange } from 'ts-browser-helpers';
let EditorViewWidgetPlugin = EditorViewWidgetPlugin_1 = class EditorViewWidgetPlugin extends AViewerPluginSync {
setDirty() {
if (!this._viewer || !this.widget)
return;
this.widget.domContainer.style.display = !this.isDisabled() ? 'block' : 'none';
}
constructor(placement = 'top-left', size = 128) {
super();
this.placement = placement;
this.size = size;
this.enabled = true;
// this is required separately so that when we hover on the gizmo we dont need to set dirty for the whole viewer
this._needsRender = false;
this._viewerListeners = {
postRender: (_) => {
if (!this._viewer || !this.widget || this.isDisabled())
return;
this._needsRender = true;
},
postFrame: (_) => {
if (!this._viewer || !this.widget || this.isDisabled() || !this._needsRender)
return;
this.widget.update();
this.widget.render();
if (this.widget.animating)
this._viewer.scene.mainCamera.setDirty();
this._needsRender = false;
},
};
}
onAdded(v) {
super.onAdded(v);
this.widget = new ViewHelper2(v.scene.mainCamera, v.canvas, this.placement, this.size);
this.widget.target = v.scene.mainCamera.target;
this.widget.addEventListener('animating-changed', (e) => {
const val = e.detail.value;
v.scene.mainCamera.setInteractions(!val, EditorViewWidgetPlugin_1.PluginType);
});
this.widget.addEventListener('update', () => this._needsRender = true); // when mouse hover and leave.
v.scene.addEventListener('mainCameraChange', this._mainCameraChange);
v.scene.addEventListener('mainCameraUpdate', this._mainCameraUpdate);
}
onRemove(viewer) {
this.widget?.dispose();
this.widget = undefined;
viewer.scene.removeEventListener('mainCameraChange', this._mainCameraChange);
viewer.scene.removeEventListener('mainCameraUpdate', this._mainCameraUpdate);
super.onRemove(viewer);
}
_mainCameraChange() {
if (!this._viewer || !this.widget)
return;
this.widget.camera = this._viewer.scene.mainCamera;
}
_mainCameraUpdate() {
if (!this._viewer || !this.widget)
return;
this.widget.target = this._viewer.scene.mainCamera.target;
}
setOrientation(orientation) {
if (!this.widget)
return;
this.widget.setOrientation(orientation);
}
};
EditorViewWidgetPlugin.PluginType = 'EditorViewWidgetPlugin';
__decorate([
uiToggle(),
onChange(EditorViewWidgetPlugin.prototype.setDirty)
], EditorViewWidgetPlugin.prototype, "enabled", void 0);
EditorViewWidgetPlugin = EditorViewWidgetPlugin_1 = __decorate([
uiFolderContainer('Editor View Widget')
], EditorViewWidgetPlugin);
export { EditorViewWidgetPlugin };
//# sourceMappingURL=EditorViewWidgetPlugin.js.map