lythreeframe 1.0.0

package/lythreeFrame/src/Frame.ts

@@ -0,0 +1,511 @@
+// import {LYController} from './Object/Controller/Controller';
+// import {Actor} from './Object/Actor';
+
+// import {
+//     ACESFilmicToneMapping,
+//     Clock, FloatType,
+//     Mesh,
+//     PCFSoftShadowMap,
+//     RGBAFormat,
+//     Scene,
+//     SRGBColorSpace,
+//     Vector2,
+//     WebGLRenderer,
+//     WebGLRenderTarget,
+// } from 'three';
+// import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer';
+// import {Octree} from "three/addons/math/Octree.js";
+// import Stats from "three/addons/libs/stats.module.js";
+// import {LYAssetManager} from "./AssetManagement/AssetManager.ts";
+// import {CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
+
+// export class LYThreeApp
+// {
+//     public world: LYThreeWorld;
+//     private  assetManager: LYAssetManager | null
+//     constructor(elementName: string, bShowFPS: boolean)
+//     {
+//         this.world = new LYThreeWorld(this, elementName, bShowFPS);
+//         this.assetManager = LYAssetManager.Get()
+//     }
+
+//     get AssetManager(): LYAssetManager| null
+//     {
+//         return this.assetManager
+//     }
+    
+//     get World(): LYThreeWorld
+//     {
+//         return this.world;
+//     }
+
+//     setTickEnabled(bEnabled: boolean): void
+//     {
+//         this.world.setTickEnabled(bEnabled);
+//     }
+    
+//     destroy()
+//     {
+//         this.world.destroy()
+//         this.world = null
+        
+//         this.AssetManager.clearAssets();
+//         this.assetManager = null
+//     }
+// }
+
+// export class LYThreeWorld
+// {
+   
+//     private _scene: Scene|null;
+//     protected objsInWorld: any[];
+//     protected elementId: string;
+//     protected bTickEnabled: boolean = true;
+//     private _renderer: WebGLRenderer | null;
+//     protected composer: EffectComposer;
+//     protected labelRenderer: CSS2DRenderer | null;
+//     protected controller: LYController | null;
+//     protected tickFuncs: any[] = [];
+//     protected clock: any;
+
+//     get App(): LYThreeApp
+//     {
+//         return this._app;
+//     }
+//     private _app: LYThreeApp;
+    
+//     protected octree: Octree;
+//     protected bRenderStateDirty: boolean;
+//     protected stats: any;
+//     protected octreeHelper: any;
+//     protected bShowFPS: boolean = false
+    
+//     private animationFrameHandle : any
+//     constructor(app: LYThreeApp, elementId: string, bShowFPS: boolean)
+//     {
+//         this.bShowFPS = bShowFPS;
+//         this._scene = new Scene();
+//         // const bgcolor = new Color(0x216c9d);
+//         // this.scene.background = bgcolor;
+//         // this.scene.fog = new Fog(bgcolor, 50, 300);
+//         this.objsInWorld = []
+//         this.elementId = elementId
+//         this._renderer = new WebGLRenderer({
+//             antialias: true,
+//             logarithmicDepthBuffer: true,
+//         });
+
+//         let ele = this.OuterElement;
+//         this._renderer.setPixelRatio(Math.max(1.1, window.devicePixelRatio));
+//         this._renderer.setSize(ele.clientWidth, ele.clientHeight);
+//         this._renderer.shadowMap.type = PCFSoftShadowMap
+//         this._renderer.shadowMap.enabled = true
+//         this._renderer.outputColorSpace = SRGBColorSpace;
+//         this._renderer.toneMapping = ACESFilmicToneMapping;
+//         this._renderer.domElement.className = 'scene-renderer';
+//         document.getElementById(elementId).appendChild(this._renderer.domElement)
+
+
+//         this.labelRenderer = new CSS2DRenderer();
+//         this.labelRenderer.setSize(ele.clientWidth, ele.clientHeight);
+//         this.labelRenderer.domElement.style.pointerEvents = 'none';
+//         this.labelRenderer.domElement.style.position = 'absolute';
+//         this.labelRenderer.domElement.style.top = '0px';
+//         this.labelRenderer.domElement.className = 'scene-labelRenderer';
+//         document.getElementById(elementId).appendChild(this.labelRenderer.domElement)
+
+//         let instance = this;
+//         this.controller = new LYController(instance);
+//         this.controller.init()
+
+//         this.clock = new Clock();
+//         this._app  = app;
+
+//         this.octree = null
+//         this.bRenderStateDirty = false
+
+//         this.composer = null
+
+
+//         if (this.bShowFPS)
+//         {
+//             console.log("create fps")
+//             // 创建性能监视器
+//             this.stats = new Stats()
+
+//             // 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
+//             this.stats.setMode(0)
+
+//             // 设置监视器位置
+//             this.stats.domElement.style.position = 'absolute'
+//             this.stats.domElement.style.left = '90%'
+//             this.stats.domElement.style.top = '90%'
+//             this.stats.domElement.className = 'stats'
+
+//             // 将监视器添加到页面中
+//             ele.appendChild(this.stats.domElement)
+//         }
+//         this.Controller?.onCameraChanged.add(()=>{
+//             if(!this.composer )
+//             {
+//                 return
+//             }
+//             if(!this.Controller?.Camera)
+//             {
+//                 return
+//             }
+
+//             for(let i in this.composer.passes)
+//             {
+//                 const pass = this.composer.passes[i]
+//                 if(pass.hasOwnProperty("camera"))
+//                 {
+//                     pass["camera"] = this.Controller.Camera
+//                     continue
+//                 }
+//                 if(pass.hasOwnProperty("renderCamera"))
+//                 {
+//                     pass["renderCamera"] = this.Controller.Camera
+//                     continue
+//                 }
+                
+//             }
+//         })
+
+//         this.tick();
+//     }
+
+//     get AssetManager(): LYAssetManager| null
+//     {
+//         return this._app.AssetManager;
+//     }
+    
+//     get scene()
+//     {
+//         return this._scene;
+//     }
+
+//     setTickEnabled(bEnabled = true)
+//     {
+//         if(!this.bTickEnabled && bEnabled)
+//         {
+//             this.bTickEnabled = true
+//             this.tick()
+//             return;
+//         }
+//         this.bTickEnabled = bEnabled
+//     }
+
+//     get renderer(): WebGLRenderer|null
+//     {
+//         return this._renderer;
+//     }
+    
+//     setLocalClippingEnabled(bEnabled:boolean)
+//     {
+//         if(!this.renderer)
+//         {
+//             return
+//         }
+//         if(bEnabled)
+//         {
+//             this.renderer.clippingPlanes = Object.freeze( [] );
+//             this.renderer.localClippingEnabled = true;
+//         }
+//         else
+//         {
+//             this.renderer.localClippingEnabled = false;
+//         }
+//     }
+    
+//     get Element()
+//     {
+//         return this._renderer.domElement
+//     }
+
+//     get OuterElement()
+//     {
+//         return document.getElementById(this.elementId);
+//     }
+
+//     get Controller()
+//     {
+//         return this.controller;
+//     }
+
+//     get Composer()
+//     {
+//         return this.composer;
+//     }
+
+//     createComposer()
+//     {
+//         if(this.composer)
+//         {
+//             return
+//         }
+//         const renderer = this._renderer
+//         if(!renderer)
+//         {
+//             return
+//         }
+//         //添加后期渲染
+//         let size       = new Vector2()
+//         renderer.getDrawingBufferSize(size)
+//         const renderTarget = new WebGLRenderTarget(size.width, size.height, {
+//                 samples   : 32,
+//                 format    : RGBAFormat,
+//                 type      : FloatType,
+//                 colorSpace: SRGBColorSpace
+//             }
+//         )
+//         this.composer = new EffectComposer(renderer, renderTarget);
+//         let ele = this.OuterElement;
+//         this.composer.setPixelRatio(Math.max(1.1, window.devicePixelRatio));
+//         this.composer.setSize(ele.clientWidth, ele.clientHeight);
+//     }
+    
+    
+//     // onCameraChanged(newCamera)
+//     // {
+//     //     if (!this.composer)
+//     //     {
+//     //         return;
+//     //     }
+//     //
+//     //     this.composer.passes.forEach((pass) =>
+//     //     {
+//     //         pass.camera = newCamera;
+//     //     })
+//     // }
+
+//     buildOctree(group)
+//     {
+//         if (this.octreeHelper)
+//         {
+//             this._scene.remove(this.octreeHelper)
+//             this.octreeHelper = null
+//         }
+//         this.octree = new Octree();
+//         if (group)
+//         {
+//             this.octree.fromGraphNode(group)
+//         }
+//         // this.#octreeHelper = new OctreeHelper( this.#octree );
+//         // this.scene.add( this.#octreeHelper );
+//         this.markRenderStateDirty();
+//     }
+
+//     get Octree()
+//     {
+//         return this.octree
+//     }
+
+//     addActor(Obj:Actor)
+//     {
+//         if (Obj instanceof Actor)
+//         {
+//             this.objsInWorld.push(Obj)
+//             this.scene.add(Obj.RootComponent.threeObject)
+//             Obj.onAddedToWorld(this);
+//             this.markRenderStateDirty();
+//         } else
+//         {
+//             console.log("Trying to add obj in scene whitch is not a LYBaseActor");
+//             console.log(Obj)
+//         }
+//     }
+
+//     removeActor(Obj)
+//     {
+//         if (Obj instanceof Actor)
+//         {
+//             let index = this.objsInWorld.indexOf(Obj);
+//             if (index !== -1)
+//             {
+//                 this.objsInWorld.splice(index, 1);
+//             }
+
+//             Obj.onRemovedFromWorld();
+//         } else
+//         {
+//             console.log("Trying to remove obj from scene whitch is not a LYBaseActor");
+//         }
+//     }
+
+//     getSceneObjectCount()
+//     {
+        
+//     }
+    
+//     markRenderStateDirty()
+//     {
+//         this.bRenderStateDirty = true;
+//     }
+
+//     /* Should not be called directly*/
+//     getObjChildren(obj, layer = 0)
+//     {
+//         if (obj.isObject3D)
+//         {
+//             let space = ''
+//             for (let i = 0; i < layer; ++i)
+//             {
+//                 space += '  '
+//             }
+
+//             if (obj.children.length > 0)
+//             {
+
+//                 for (let index in obj.children)
+//                 {
+//                     this.getObjChildren(obj.children[index], layer + 1);
+//                 }
+//             }
+//         }
+
+//     }
+
+//     getObjsInWorld()
+//     {
+//         return this.objsInWorld
+//     }
+
+//     tick()
+//     {
+//         let instance = this;
+
+//         if (!this.bTickEnabled) {
+//             return;
+//         }
+//         // tick logic
+//         const delta = this.clock.getDelta() // 获取自上次调用的时间
+
+//         for (let i = 0; i < this.objsInWorld.length; ++i)
+//         {
+//             this.objsInWorld[i].tick(delta)
+//         }
+
+//         for (let i = 0; i < this.tickFuncs.length; ++i)
+//         {
+//             this.tickFuncs[i](delta)
+//         }
+//         this.Controller.tick(delta)
+//         // tick render
+//         if (this.bRenderStateDirty)
+//         {
+//             if(this.controller.Camera)
+//             {
+//                 this.labelRenderer.render(this._scene, this.controller.Camera);
+
+//                 if (this.composer)
+//                 {
+//                     this.composer.render(delta);
+//                 }
+//                 else
+//                 {
+//                     this._renderer.render(this._scene, this.controller.Camera);
+//                 }
+//                 this.bRenderStateDirty = false
+//             }
+//         }
+
+//         if (this.stats)
+//         {
+//             this.stats.update()
+//         }
+
+        
+//         this.animationFrameHandle = window.requestAnimationFrame(
+//             () =>
+//             {
+//                 instance.tick();
+//             }
+//         );
+//     }
+
+//     onLoadGLTFFinished(loadedActor, levelName)
+//     {
+
+//     }
+
+//     postProcess()
+//     {
+
+//     }
+
+//     addTickFunc(newFunc)
+//     {
+//         let index = this.tickFuncs.indexOf(newFunc)
+//         if (index >= 0)
+//         {
+//             return
+//         }
+//         this.tickFuncs.push(newFunc);
+//     }
+
+//     removeTickFunc(target)
+//     {
+//         let index = this.tickFuncs.indexOf(target)
+//         if (index >= 0)
+//         {
+//             this.tickFuncs.splice(index, 1)
+//         }
+//     }
+
+//     destroy()
+//     {
+//         console.log("World is destroying")
+//         this.tickFuncs = []
+//         window.cancelAnimationFrame(this.animationFrameHandle)
+
+        
+//         this._scene?.traverse((elem) =>
+//         {
+//             if (elem instanceof Mesh)
+//             {
+//                 if (elem.material)
+//                 {
+//                     let arr = elem.material instanceof Array ? elem.material : [elem.material]
+
+//                     arr.forEach((mat) =>
+//                     {
+//                         mat.dispose()
+//                         mat = null
+//                     })
+//                 }
+//                 if (elem.geometry)
+//                 {
+//                     elem.geometry.dispose()
+
+//                 }
+//             }
+//         })
+//         // for (let i in this.objsInWorld)
+//         // {
+//         //     this.objsInWorld[i].destroy();
+//         // }
+//         //
+//         this._scene.clear()
+//         this._scene = null
+//         this.controller?.destroy()
+//         this.controller = null;
+
+//         this._renderer.forceContextLoss();
+//         this._renderer.context = null;
+//         this._renderer.domElement = null;
+//         this._renderer.dispose()
+        
+//         this.labelRenderer.context = null;
+//         this.labelRenderer.domElement = null;
+//         this.labelRenderer = null;
+//         this.composer?.dispose()
+//         this.composer = null;
+//     }
+
+//     renderAsImage() {
+//         let image = new Image();
+//         this.renderer.render(this._scene, this.controller.Camera); //此处renderer为three.js里的渲染器，scene为场景 camera为相机
+//         return this.renderer.domElement.toDataURL('image/jpeg');
+//     }
+// }

package/lythreeFrame/src/Geometry/PlaneGeometry.ts

@@ -0,0 +1,53 @@
+// 创建顶点位置数组
+import {
+    BufferAttribute,
+    BufferGeometry,
+    Float32BufferAttribute,
+    Uint16BufferAttribute,
+} from 'three';
+
+function createPlaneGeometryFaceUp():BufferGeometry
+{
+    const vertices = [
+        -0.5,
+        0,
+        -0.5, // 顶点1
+        0.5,
+        0,
+        -0.5, // 顶点2
+        0.5,
+        0,
+        0.5, // 顶点3
+        -0.5,
+        0,
+        0.5, // 顶点4
+    ];
+
+    // 创建法线数组，所有法线都朝向Y轴正方向
+    const normals = [0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0];
+
+    // 创建索引数组，用于确定顶点如何连接成三角形
+    const indices = [0, 2, 1, 2, 0, 3];
+    const uvs = new Float32Array([
+        0,
+        0, //图片左下角
+        1,
+        0, //图片右下角
+        1,
+        1, //图片右上角
+        0,
+        1, //图片左上角
+    ]);
+    // 创建BufferPlaneGeometryFaceUp
+    const PlaneGeometryFaceUp = new BufferGeometry();
+    const positionAttribute = new Float32BufferAttribute(vertices, 3);
+    const normalAttribute = new Float32BufferAttribute(normals, 3);
+    const indexAttribute = new Uint16BufferAttribute(indices, 1);
+    PlaneGeometryFaceUp.attributes.uv = new BufferAttribute(uvs, 2);
+    PlaneGeometryFaceUp.setAttribute('position', positionAttribute);
+    PlaneGeometryFaceUp.setAttribute('normal', normalAttribute);
+    PlaneGeometryFaceUp.setIndex(indexAttribute);
+    return PlaneGeometryFaceUp
+}
+
+export { createPlaneGeometryFaceUp };

package/lythreeFrame/src/Geometry/TriangleGeometry.ts

@@ -0,0 +1,50 @@
+// 创建顶点位置数组
+import {
+    BufferAttribute,
+    BufferGeometry,
+    Float32BufferAttribute,
+    Uint16BufferAttribute,
+} from 'three';
+
+function createArrowHeadGeometry():BufferGeometry
+{
+    const vertices = [
+        -0.5,
+        0,
+        0, // 顶点1
+        0,
+        0,
+        0.5, // 顶点2
+        0.5,
+        0,
+        0, // 顶点3
+    ];
+
+    // 创建法线数组，所有法线都朝向Y轴正方向
+    const normals = [0, 1, 0, 0, 1, 0, 0, 1, 0];
+
+    // 创建索引数组，用于确定顶点如何连接成三角形
+    const indices = [0, 1, 2];
+    const uvs = new Float32Array([
+        0,
+        0, //图片左下角
+        1,
+        0, //图片右下角
+        1,
+        1, //图片右上角
+        0,
+        1, //图片左上角
+    ]);
+    // 创建BufferPlaneGeometryFaceUp
+    const PlaneGeometryFaceUp = new BufferGeometry();
+    const positionAttribute = new Float32BufferAttribute(vertices, 3);
+    const normalAttribute = new Float32BufferAttribute(normals, 3);
+    const indexAttribute = new Uint16BufferAttribute(indices, 1);
+    PlaneGeometryFaceUp.attributes.uv = new BufferAttribute(uvs, 2);
+    PlaneGeometryFaceUp.setAttribute('position', positionAttribute);
+    PlaneGeometryFaceUp.setAttribute('normal', normalAttribute);
+    PlaneGeometryFaceUp.setIndex(indexAttribute);
+    return PlaneGeometryFaceUp
+}
+
+export { createArrowHeadGeometry };

package/lythreeFrame/src/Library/ContainerLibrary.ts

@@ -0,0 +1,21 @@
+export class LYContainerLibrary
+{
+    static AreUnorderedArrayEqual(arr1: any[], arr2: any[]): boolean {
+        // 首先检查数组长度是否相同
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+
+        // 对两个数组进行排序，然后比较每一个元素
+        const sortedArr1 = [...arr1].sort();
+        const sortedArr2 = [...arr2].sort();
+
+        for (let i = 0; i < sortedArr1.length; i++) {
+            if (sortedArr1[i] !== sortedArr2[i]) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+}