run-scene-v2 0.1.96 → 0.1.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "run-scene-v2",
-  "version": "0.1.96",
+  "version": "0.1.97",
   "description": "",
   "main": "./build/index.js",
   "dependencies": {
@@ -9,10 +9,7 @@
     "lodash": "^4.17.21",
     "postprocessing": "6.35.5",
     "run-scene-core": "0.165.1",
-    "run-scene-v2": "file:",
-    "simple-bool": "^3.0.1",
-    "three": "0.165.0",
-    "three-volumetric-pass-fork": "^0.1.0"
+    "three": "0.165.0"
   },
   "types": "./types/index.d.ts",
   "files": [

package/types/index.d.ts

@@ -1,12 +1,13 @@
 import { TransformControls } from "run-scene-core/examples/jsm/controls/TransformControls";
 import RunScene, { Utils, ModelEx, MaterialEx, TextureEx, Bus } from "./src/RunScene";
+import Three from "./src/Libs/Three";
 declare const _default: {
     RunScene: typeof RunScene;
     Utils: typeof Utils;
     ModelEx: typeof ModelEx;
     MaterialEx: typeof MaterialEx;
     TextureEx: typeof TextureEx;
-    Three: typeof import("run-scene-core");
+    Three: typeof Three;
     ThreeEx: {
         TransformControls: typeof TransformControls;
     };

package/types/index.js

@@ -0,0 +1,15 @@
+import { TransformControls } from "run-scene-core/examples/jsm/controls/TransformControls";
+import RunScene, { Utils, ModelEx, MaterialEx, TextureEx, Bus, } from "./src/RunScene";
+import Three from "./src/Libs/Three";
+export default {
+    RunScene,
+    Utils,
+    ModelEx,
+    MaterialEx,
+    TextureEx,
+    Three,
+    ThreeEx: {
+        TransformControls,
+    },
+    Bus,
+};

package/types/src/Anima/Anima.js

@@ -0,0 +1,309 @@
+import { mapObj } from "js-funcs";
+import { getId } from "js-funcs";
+import { AnimationMixer, Clock, } from "run-scene-core";
+import BaseEx from "../BaseEx";
+import { animaLoader } from "../Loaderer/Loaderer";
+import Three from "../Libs/Three";
+import { getProgress, mergeObject } from "../Utils/Utils";
+import BindEvent from "../CallBack/BindEvent";
+import _ from "lodash";
+import { withAnima } from "../ModelEx/ModelEx.Utils";
+export default class Anima extends BaseEx {
+    constructor(runScene) {
+        super(runScene);
+        this.map = {};
+        this.clock = new Clock();
+        this.tickIndex = undefined;
+        this.playings = new Set();
+        this.updates = {};
+        this.clean = () => {
+            this.reset();
+        };
+        runScene.cb.model.add.add("anima-parse", ({ model }) => {
+            this.parses(model);
+        });
+        runScene.cb.model.remove.add("anima-parse", ({ model }) => {
+            this.onModelDelete(model);
+        });
+        runScene.cb.scene.validCloseUpdate.on(() => {
+            return this.playings.size === 0;
+        });
+        this.runScene.cb.clean.add("EngineHelper", this.clean);
+    }
+    onModelDelete(model) {
+        model.traverse((child) => {
+            if (!withAnima(child))
+                return;
+            child.animations.map((clip) => {
+                if (!clip.id)
+                    return;
+                this.close(child, clip.name);
+                delete this.map[clip.id];
+            });
+        });
+    }
+    parses(model) {
+        model.traverse((child) => this.parse(child));
+    }
+    findId(model, name) {
+        for (const clip of model.animations) {
+            if (clip.name === name)
+                return clip.id;
+        }
+    }
+    parse(model, clipsJSON) {
+        if (model.animations.length === 0 && !clipsJSON)
+            return;
+        const clips = model.animations.length
+            ? model.animations
+            : animaLoader.parse(clipsJSON);
+        const mixer = new AnimationMixer(model);
+        for (const clip of clips) {
+            const id = getId();
+            clip.id = id;
+            var action = mixer.clipAction(clip);
+            const eventMap = {
+                finished: () => { },
+                loop: () => { },
+            };
+            mixer.addEventListener("finished", () => eventMap.finished());
+            mixer.addEventListener("loop", () => eventMap.loop());
+            this.map[id] = {
+                mixer,
+                action,
+                model,
+                time: 0,
+                runState: "close",
+                clip,
+                eventMap,
+            };
+        }
+        clips.map((clip) => {
+            const has = model.animations.find((i) => i.uuid === clip.uuid);
+            if (has)
+                return;
+            model.animations.push(clip);
+        });
+    }
+    closeAllAndPlay(model, name, iOptions) {
+        const item = _.find(model.animations, (i) => this.playings.has(this.map[i.id]));
+        if (item) {
+            this.close(model, item.name, { resetAction: true });
+            this.play(model, name, iOptions);
+        }
+        else {
+            this.play(model, name, iOptions);
+        }
+    }
+    play(model, name, iOptions) {
+        const id = this.findId(model, name);
+        const item = this.map[id];
+        if (!item || this.playings.has(item))
+            return;
+        const options = mergeObject({
+            onLoop: () => { },
+            onProgress: () => { },
+            onFinished: () => { },
+            onClose: () => { },
+            onPause: () => { },
+            onResume: () => { },
+            onBeforeEnd: () => { },
+            loop: false,
+            lastFrame: true,
+            reset: true,
+            triggerFinished: true,
+        }, iOptions);
+        const { onProgress, onBeforeEnd, onLoop, onFinished, lastFrame, loop, reset, } = options;
+        this.map[id].options = options;
+        const { action, clip, eventMap } = item;
+        action.stop();
+        const time = reset ? 0 : item.time;
+        action.time = time;
+        this.setPlayState(item, true);
+        reset && action.reset();
+        action.play();
+        item.runState = "play";
+        Anima.callback.play.cb();
+        let triggerBeforeEnd = false;
+        let finished = false;
+        this.setUpdates(id, () => {
+            const pgs = getProgress(action.time, clip.duration, true);
+            if (pgs >= 99 && !triggerBeforeEnd) {
+                onBeforeEnd();
+                triggerBeforeEnd = true;
+            }
+            onProgress(pgs);
+        });
+        if (loop) {
+            action.loop = Three.LoopRepeat;
+            eventMap.loop = onLoop;
+        }
+        else {
+            action.clampWhenFinished = lastFrame;
+            action.loop = Three.LoopOnce;
+            eventMap.finished = () => {
+                if (finished || !options.triggerFinished)
+                    return;
+                finished = true;
+                this.setPlayState(item, false);
+                onProgress(100.0);
+                onFinished();
+            };
+        }
+    }
+    pause(model, name) {
+        const id = this.findId(model, name);
+        const item = this.map[id];
+        if (!item || !this.playings.has(item))
+            return;
+        this.updateTime(item);
+        this.setPlayState(item, false);
+        item.options.onPause();
+        item.runState = "pause";
+    }
+    resume(model, name) {
+        var _a;
+        const id = this.findId(model, name);
+        const item = this.map[id];
+        if (!item || !this.playings.has(item))
+            return;
+        item.options.onResume();
+        this.play(model, name, (_a = this.map[name]) === null || _a === void 0 ? void 0 : _a.options);
+    }
+    playAll() {
+        this.pauseAll();
+        this.playings.clear();
+        Object.values(this.map).map((val) => {
+            this.playings.add(val);
+            const { action } = val;
+            action.time = 0;
+            action.play();
+        });
+        this.anima();
+    }
+    setValue(num) {
+        let detal = this.clock.getDelta();
+        Object.keys(this.map).map((name) => {
+            const val = this.map[name];
+            const { mixer, action } = val;
+            action.play();
+            action.time = num;
+            mixer.update(detal);
+            return;
+        });
+    }
+    getDetal() {
+        return this.clock.getDelta();
+    }
+    update(iDetal) {
+        const detal = iDetal || this.getDetal();
+        mapObj(this.updates, (_, fn) => fn(detal));
+    }
+    anima() {
+        let detal = this.clock.getDelta();
+        this.update(detal);
+        this.playings.forEach((val) => {
+            val.mixer.update(detal);
+        });
+        this.tickIndex = window.requestAnimationFrame(this.anima.bind(this));
+    }
+    closeAnima() {
+        window.cancelAnimationFrame(this.tickIndex);
+    }
+    resetItem(item) {
+        const { mixer, action } = item;
+        action.reset();
+        action.stop();
+        mixer.time = 0;
+    }
+    resetItemByName(model, name) {
+        const id = this.findId(model, name);
+        if (!id)
+            return;
+        const item = this.map[id];
+        if (!item)
+            return;
+        const { mixer, action } = item;
+        action.reset();
+        action.stop();
+        mixer.time = 0;
+    }
+    pauseAll() {
+        this.closeAnima();
+        this.playings.forEach((i) => this.resetItem(i));
+        this.playings.clear();
+    }
+    reset() {
+        this.pauseAll();
+        this.map = {};
+        this.playings.clear();
+        this.closeAnima();
+    }
+    updateTime(item, num) {
+        item.time = num || item.action.time;
+    }
+    setPlayState(item, state) {
+        if (!state) {
+            this.playings.delete(item);
+            delete this.updates[item.clip.id];
+            if (this.playings.size === 0)
+                this.closeAnima();
+        }
+        else {
+            this.playings.add(item);
+            if (this.playings.size === 1)
+                this.anima();
+        }
+    }
+    getItem(model, name) {
+        const id = this.findId(model, name);
+        return this.map[id];
+    }
+    close(model, name, inputOptions) {
+        const id = this.findId(model, name);
+        const item = this.map[id];
+        if (!item || !this.playings.has(item) || !item.options)
+            return;
+        // this.resetItem(item);
+        const { resetAction } = mergeObject({
+            resetAction: true,
+        }, inputOptions);
+        resetAction && item.action.reset();
+        // item.mixer.time = 0;
+        this.setPlayState(item, false);
+        this.updateTime(item, 0);
+        item.options.onClose();
+        item.options = null;
+        item.runState = "pause";
+        Anima.callback.close.cb();
+    }
+    setUpdates(id, fn) {
+        this.updates[id] = fn;
+    }
+    fadeTo(map) {
+        const { lastModel, lastName, nextModel, nextName, duration } = map;
+        const lastId = this.findId(lastModel, lastName);
+        const lastItem = this.map[lastId];
+        if (!lastItem)
+            return;
+        const nextId = this.findId(nextModel, nextName);
+        const nextItem = this.map[nextId];
+        if (!nextItem)
+            return;
+        lastItem.action.crossFadeTo(nextItem.action, duration, true);
+    }
+    resetTime(model, name) {
+        const item = this.getItem(model, name);
+        if (!item)
+            return;
+        item.action.time = 0;
+    }
+    closeAndReset(model, name, options) {
+        this.resetItemByName(model, name);
+        this.close(model, name, options);
+    }
+}
+Anima.callback = {
+    play: new BindEvent(),
+    close: new BindEvent(),
+};

package/types/src/Assets/Assets.js

@@ -0,0 +1,153 @@
+import { CSS2DRenderer } from "run-scene-core/examples/jsm/renderers/CSS2DRenderer";
+import { CSS3DRenderer } from "run-scene-core/examples/jsm/renderers/CSS3DRenderer";
+import AssetsManager from "./AssetsManager";
+export default class Assets {
+    constructor(runScene) {
+        this.scene = null;
+        this.camera = null;
+        this.controls = null;
+        this.renderer = null;
+        this.engineDom = null;
+        this.parentDom = null;
+        this.clean = () => {
+            const { camera } = this.get();
+            // this.get().controls.dispose();
+            // this.renderer = this.runScene.renderEx.create(this.engineDom);
+            // const { camera } = this.get();
+            // this.controls = this.runScene.controlsEx.create(
+            //   camera,
+            //   this.renderer.domElement
+            // );
+            this.runScene.controlsEx.reset();
+            this.runScene.cameraEx.reset(camera);
+        };
+        this.disposeRender = (renderer) => {
+            if (!renderer)
+                return;
+            renderer.dispose();
+            renderer.render = () => { };
+            renderer.domElement.remove();
+            renderer = null;
+        };
+        this.runScene = runScene;
+        this.manager = new AssetsManager(runScene);
+        this.runScene.cb.clean.add("assets", this.clean);
+    }
+    initRender3() {
+        const css3DRenderer = new CSS3DRenderer();
+        css3DRenderer.setSize(this.engineDom.clientWidth, this.engineDom.clientHeight);
+        css3DRenderer.domElement.style.width = "100%";
+        css3DRenderer.domElement.style.height = "100%";
+        css3DRenderer.domElement.style.position = "absolute";
+        css3DRenderer.domElement.style.zIndex = "1";
+        css3DRenderer.domElement.style.left = "0px";
+        css3DRenderer.domElement.style.top = "0px";
+        css3DRenderer.domElement.className = "css3dRenderer";
+        /**
+         * transform-style属性用于指定3D变换中子元素的处理方式。在CSS3DRenderer中，为了支持3D变换，CSS3DObject被转换为一个HTML元素，并且该元素的父级元素的transform-style属性被设置为preserve-3d，从而子元素也能够支持3D变换。但是，这样设置之后，子元素的渲染质量有可能会受到影响，导致子元素变得模糊。
+    造成渲染质量变差的原因是，开启了preserve-3d之后，浏览器会对元素进行更复杂的渲染处理，这可能会导致一些图形或文本的模糊或失真。另外，还有一些浏览器的实现存在一些问题，例如Chrome浏览器在某些情况下会将CSS3DObject中的文本元素渲染成模糊的黑白图像。
+         */
+        // child.style.transformStyle = "flat";
+        this.engineDom.appendChild(css3DRenderer.domElement);
+        return css3DRenderer;
+    }
+    initRender2() {
+        const css2DRenderer = new CSS2DRenderer();
+        css2DRenderer.setSize(this.engineDom.clientWidth, this.engineDom.clientHeight);
+        css2DRenderer.domElement.style.width = "100%";
+        css2DRenderer.domElement.style.height = "100%";
+        css2DRenderer.domElement.style.position = "absolute";
+        css2DRenderer.domElement.style.zIndex = "1";
+        css2DRenderer.domElement.style.left = "0px";
+        css2DRenderer.domElement.style.top = "0px";
+        css2DRenderer.domElement.classList.add("css2dRenderer");
+        // 避免renderer.domElement影响HTMl标签定位，设置top为0px
+        // css2DRenderer.domElement.style.pointerEvents = "none";
+        this.engineDom.insertBefore(css2DRenderer.domElement, this.engineDom.childNodes[0]);
+        return css2DRenderer;
+    }
+    reset() {
+        const { camera } = this.get();
+        // this.get().controls.dispose();
+        // this.renderer = this.runScene.renderEx.create(this.engineDom);
+        this.runScene.renderEx.setSize();
+        // const { camera } = this.get();
+        // this.controls = this.runScene.controlsEx.create(
+        //   camera,
+        //   this.renderer.domElement
+        // );
+        this.runScene.cameraEx.reset(camera);
+        this.runScene.controlsEx.reset();
+        // this.get().renderer.resetState();
+        // this.get().controls.update();
+    }
+    dispose() {
+        this.disposeRender(this.renderer);
+        this.disposeRender(this.render2);
+        this.disposeRender(this.render3);
+    }
+    setRender2(state) {
+        if (this.render2 && state)
+            return;
+        if (state) {
+            this.render2 = this.initRender2();
+            this.runScene.renderEx.setSize();
+        }
+        else {
+            if (!this.render2)
+                return;
+            this.disposeRender(this.render2);
+            this.render2 = null;
+        }
+    }
+    setRender3(state) {
+        if (this.render3 && state)
+            return;
+        if (state) {
+            this.render3 = this.initRender3();
+            this.runScene.renderEx.setSize();
+        }
+        else {
+            if (!this.render3)
+                return;
+            this.disposeRender(this.render3);
+            this.render3 = null;
+        }
+    }
+    init(engineDom) {
+        this.parentDom = engineDom;
+        this.engineDom = this.runScene.renderEx.initOutDom(engineDom);
+        const scene = this.runScene.sceneEx.create();
+        const camera = this.runScene.cameraEx.pCam;
+        const render = this.runScene.renderEx.create(this.engineDom);
+        const controls = this.runScene.controlsEx.create(camera, this.runScene.optionsEx.options.renderConfig.controlsDom || this.engineDom);
+        const { render2, render3 } = this.runScene.optionsEx.options;
+        this.camera = camera;
+        this.scene = scene;
+        this.renderer = render;
+        this.controls = controls;
+        this.runScene.renderEx.setSize();
+        this.setRender2(render2);
+        this.setRender3(render3);
+        return {
+            scene,
+            camera,
+            render,
+            controls,
+            engineDom: this.engineDom,
+        };
+    }
+    get() {
+        const { scene, renderer, controls, engineDom, render2, render3, parentDom, } = this;
+        return {
+            scene,
+            camera: this.runScene.cameraEx.getCamera(),
+            renderer,
+            controls,
+            engineDom,
+            render2,
+            render3,
+            parentDom,
+        };
+    }
+}

package/types/src/Assets/AssetsManager.js

@@ -0,0 +1,34 @@
+import MapEx from "../Ex/MapEx";
+export default class AssetsManager {
+    constructor(runScene) {
+        this.map = {
+            //id:length
+            material: new MapEx(),
+            texture: new MapEx(),
+        };
+        this.onSet = (map) => {
+            const { type, id, isAdd } = map;
+            if (isAdd) {
+                let saved = this.map[type].get(id) || 0;
+                this.map[type].set(id, ++saved);
+            }
+            else {
+                if (!this.map[type].get(id))
+                    return;
+                let num = this.map[type].get(id);
+                this.map[type].set(id, --num);
+            }
+        };
+        this.runScene = runScene;
+        this.init();
+    }
+    init() {
+        this.runScene.cb.assets.manager.set.add("AssetsManager", this.onSet);
+    }
+    isUsed(type, id) {
+        const number = this.map[type].get(id);
+        if (number === undefined)
+            return false;
+        return number > 0;
+    }
+}

package/types/src/BaseEx.d.ts

@@ -5,3 +5,9 @@ export default class BaseEx<T = void> {
     inited?(): void;
     constructor(runScene: RunScene, parent?: T);
 }
+export declare class CoreModuleBase<T> {
+    runScene: RunScene;
+    core: T;
+    inited?(): void;
+    constructor(runScene: RunScene, parent?: T);
+}

package/types/src/BaseEx.js

@@ -0,0 +1,18 @@
+export default class BaseEx {
+    constructor(runScene, parent) {
+        var _a;
+        this.runScene = runScene;
+        this.parent = parent;
+        (_a = this.inited) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    inited() { }
+}
+export class CoreModuleBase {
+    constructor(runScene, parent) {
+        var _a;
+        this.runScene = runScene;
+        this.core = parent;
+        (_a = this.inited) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    inited() { }
+}

package/types/src/CallBack/BindEvent.d.ts

@@ -14,6 +14,7 @@ export declare type CallBackType = {
     }[];
 };
 export default class BindEvent<inputType = void, outType = void> {
+    isBindEvent: boolean;
     private cbs;
     cb: (data: inputType) => outType[];
     getCbNames(): string[];
@@ -25,6 +26,7 @@ export default class BindEvent<inputType = void, outType = void> {
      * @returns
      */
     add(name: string, fn: (data: inputType) => outType, isUnique?: boolean): number;
+    deleteThenAdd(name: string, fn: (data: inputType) => outType, isUnique?: boolean): number;
     on(fn: (data: inputType) => outType, name?: string): number;
     get(name: string): {
         data: undefined | addArgs<inputType>;

package/types/src/CallBack/BindEvent.js

@@ -0,0 +1,66 @@
+import { getId } from "js-funcs";
+export default class BindEvent {
+    constructor() {
+        this.isBindEvent = true;
+        this.cbs = [];
+        this.cb = (data) => {
+            return this.cbs.map((map) => { var _a; return (_a = map.fn) === null || _a === void 0 ? void 0 : _a.call(map, data); });
+        };
+        this.emit = this.cb;
+    }
+    getCbNames() {
+        return this.cbs.map((i) => i.name);
+    }
+    /**
+     *
+     * @param name 传入的函数名称，用来确定该函数的作用
+     * @param fn 函数本身
+     * @returns
+     */
+    add(name, fn, isUnique) {
+        if (isUnique) {
+            if (this.get(name))
+                return;
+        }
+        return this.cbs.push({
+            fn,
+            name,
+        });
+    }
+    deleteThenAdd(name, fn, isUnique) {
+        this.delete(name);
+        return this.add(name, fn, isUnique);
+    }
+    on(fn, name) {
+        return this.add(name || "custom_" + getId(), fn);
+    }
+    get(name) {
+        const index = this.cbs.findIndex((i) => i.name === name);
+        if (index === -1)
+            return undefined;
+        return {
+            data: this.cbs[index],
+            index,
+        };
+    }
+    reset(name, fn) {
+        const old = this.get(name);
+        if (!old)
+            return false;
+        const { data } = old;
+        data.fn = fn;
+        return true;
+    }
+    remove(name) {
+        this.reset(name, null);
+    }
+    delete(name) {
+        const { index } = this.get(name) || {};
+        if (index === undefined)
+            return;
+        this.cbs.splice(index, 1);
+    }
+    clear() {
+        this.cbs = [];
+    }
+}