threepipe/lib/core/camera/CameraView.js

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.

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 CameraView_1;
import { CatmullRomCurve3, EventDispatcher, Quaternion, Vector3 } from 'three';
import { onChange3, serializable, serialize } from 'ts-browser-helpers';
import { uiButton, uiInput, uiNumber, uiPanelContainer, uiVector } from 'uiconfig.js';
import { generateUUID } from '../../three';
let CameraView = CameraView_1 = class CameraView extends EventDispatcher {
    constructor(name, position, target, quaternion, zoom, duration = 1, isWoldSpace) {
        super();
        this.uuid = generateUUID();
        this.name = 'Camera View';
        this.position = new Vector3();
        this.target = new Vector3();
        this.quaternion = new Quaternion();
        this.zoom = 1;
        /**
         * Duration multiplier. Set to 0 for instant camera jump.
         */
        this.duration = 1;
        this.isWorldSpace = true;
        this.set = (camera) => this.dispatchEvent({ type: 'setView', camera, view: this });
        this.update = (camera) => this.dispatchEvent({ type: 'updateView', camera, view: this });
        this.delete = (camera) => this.dispatchEvent({ type: 'deleteView', camera, view: this });
        this.animate = (camera, duration) => this.dispatchEvent({ type: 'animateView', camera, duration, view: this });
        this.setDirty = (ops) => {
            this.dispatchEvent({ ...ops, type: 'update' });
            if (this.uiConfig) {
                if (ops?.key === 'name') {
                    this.uiConfig.label = this.name;
                    this.uiConfig.uiRefresh?.();
                }
                else {
                    this.uiConfig.uiRefresh?.(true, 'postFrame');
                }
            }
        };
        if (name !== undefined)
            this.name = name;
        if (position)
            this.position.copy(position);
        if (target)
            this.target.copy(target);
        if (quaternion)
            this.quaternion.copy(quaternion);
        if (zoom !== undefined)
            this.zoom = zoom;
        if (duration !== undefined && duration !== 0)
            this.duration = duration;
        if (isWoldSpace !== undefined)
            this.isWorldSpace = isWoldSpace;
    }
    clone() {
        return new CameraView_1(this.name, this.position, this.target, this.quaternion, this.zoom, this.duration, this.isWorldSpace);
    }
};
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiInput()
], CameraView.prototype, "name", void 0);
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiVector()
], CameraView.prototype, "position", void 0);
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiVector()
], CameraView.prototype, "target", void 0);
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiVector()
], CameraView.prototype, "quaternion", void 0);
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiNumber()
], CameraView.prototype, "zoom", void 0);
__decorate([
    onChange3('setDirty'),
    serialize(),
    uiNumber()
], CameraView.prototype, "duration", void 0);
__decorate([
    onChange3('setDirty'),
    serialize()
], CameraView.prototype, "isWorldSpace", void 0);
__decorate([
    uiButton()
], CameraView.prototype, "set", void 0);
__decorate([
    uiButton()
], CameraView.prototype, "update", void 0);
__decorate([
    uiButton()
], CameraView.prototype, "delete", void 0);
__decorate([
    uiButton()
], CameraView.prototype, "animate", void 0);
CameraView = CameraView_1 = __decorate([
    serializable('CameraView'),
    uiPanelContainer('Camera View')
], CameraView);
export { CameraView };
export function createCameraPath(views) {
    const splineCurve = 'chordal';
    const points = views.map(c => c.position.clone());
    const spline = new CatmullRomCurve3(points, true, splineCurve, 0.75);
    const getPosition = (t, viewIndex, v) => {
        v = v || new Vector3();
        const ip = 1. / points.length;
        const i = viewIndex === 0 ? points.length : viewIndex;
        const d = (i - 1) * ip;
        spline.getPointAt(d + t * ip, v);
        return v;
    };
    const targets = views.map(c => c.target.clone());
    const targetSpline = new CatmullRomCurve3(targets, true, splineCurve, 0.75);
    const getTarget = (t, viewIndex, v) => {
        v = v || new Vector3();
        const ip = 1. / targets.length;
        const i = viewIndex === 0 ? targets.length : viewIndex;
        const d = (i - 1) * ip;
        targetSpline.getPointAt(d + t * ip, v);
        return v;
    };
    return { getPosition, getTarget };
}
//# sourceMappingURL=CameraView.js.map