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.
108 lines • 5.95 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;
};
import { AViewerPluginSync } from '../../viewer';
import { AmbientLight2, DirectionalLight2, HemisphereLight2, Object3D2, OrthographicCamera2, PerspectiveCamera2, PointLight2, RectAreaLight2, SpotLight2, } from '../../core';
import { uiButton, uiDropdown, uiPanelContainer } from 'uiconfig.js';
import { Vector3 } from 'three';
/**
* Adds support for generating different types of lights and camera objects in the viewer.
* @category Plugins
*/
let Object3DGeneratorPlugin = class Object3DGeneratorPlugin extends AViewerPluginSync {
generate(type, params, addToScene = true, select = true) {
if (!this._viewer)
throw new Error('No viewer');
const obj = this.generators[type ?? this._selectedType]?.(params);
addToScene && obj && this._viewer.scene.addObject(obj);
select && obj.dispatchEvent({ type: 'select', value: obj, object: obj, ui: true });
return obj;
}
constructor() {
super();
this.enabled = true;
this.toJSON = undefined;
this._selectedType = '';
this.generators = {
['object-empty']: (params = {}) => {
const obj = new Object3D2();
params.position ? obj.position.copy(params.position) : obj.position.set(0, 0, 0);
obj.name = params.name ?? 'New Object';
return obj;
},
['camera-perspective']: (params = {}) => {
const camera = new PerspectiveCamera2(params.controlsMode ?? '', this._viewer?.canvas, params.autoAspect, params.fov, params.aspect);
params.position ? camera.position.copy(params.position) : camera.position.set(0, 0, 5);
params.target ? camera.target.copy(params.target) : camera.target.set(0, 0, 0);
camera.autoLookAtTarget = params.autoLookAtTarget ?? true;
camera.setDirty();
camera.name = params.name ?? 'Perspective Camera';
return camera;
},
['camera-orthographic']: (params = {}) => {
const camera = new OrthographicCamera2(params.controlsMode ?? '', this._viewer?.canvas, params.autoAspect, params.frustumSize);
params.position ? camera.position.copy(params.position) : camera.position.set(0, 0, 5);
params.target ? camera.target.copy(params.target) : camera.target.set(0, 0, 0);
camera.autoLookAtTarget = params.autoLookAtTarget ?? true;
camera.setDirty();
camera.name = params.name ?? 'Orthographic Camera';
return camera;
},
['light-directional']: (params = {}) => {
const light = new DirectionalLight2(params.color ?? 0xff0000, params.intensity ?? 3);
params.position ? light.position.copy(params.position) : light.position.set(5, 5, 5);
light.lookAt(params.target ?? new Vector3(0, 0, 0));
light.name = 'Directional Light';
return light;
},
['light-ambient']: (params = {}) => {
const light = new AmbientLight2(params.color ?? 0xffffff, params.intensity ?? 1);
light.name = 'Ambient Light';
return light;
},
['light-point']: (params = {}) => {
const light = new PointLight2(params.color ?? 0xff0000, params.intensity ?? 3);
params.position ? light.position.copy(params.position) : light.position.set(5, 5, 5);
light.name = 'Point Light';
return light;
},
['light-spot']: (params = {}) => {
const light = new SpotLight2(params.color ?? 0xff0000, params.intensity ?? 3);
params.position ? light.position.copy(params.position) : light.position.set(5, 5, 5);
light.lookAt(params.target ?? new Vector3(0, 0, 0));
light.name = 'Spot Light';
return light;
},
['light-hemisphere']: (params = {}) => {
const light = new HemisphereLight2(params.color ?? 0xaaaaff, 0x555443, params.intensity ?? 1);
light.name = 'Hemisphere Light';
return light;
},
['light-rect-area']: (params = {}) => {
const light = new RectAreaLight2(params.color ?? 0x000ff, params.intensity ?? 3, 2, 2);
params.position ? light.position.copy(params.position) : light.position.set(5, 5, 5);
light.lookAt(params.target ?? new Vector3(0, 0, 0));
light.name = 'Rect Area Light';
return light;
},
};
this._selectedType = Object.keys(this.generators)[0];
}
};
Object3DGeneratorPlugin.PluginType = 'Object3DGeneratorPlugin';
__decorate([
uiDropdown('Type', undefined, (that) => ({
children: [() => Object.keys(that.generators).map(label => ({ label }))],
}))
], Object3DGeneratorPlugin.prototype, "_selectedType", void 0);
__decorate([
uiButton('Generate', { sendArgs: false })
], Object3DGeneratorPlugin.prototype, "generate", null);
Object3DGeneratorPlugin = __decorate([
uiPanelContainer('Generate Scene Objects')
], Object3DGeneratorPlugin);
export { Object3DGeneratorPlugin };
//# sourceMappingURL=Object3DGeneratorPlugin.js.map