lythreeframe 1.0.32 → 1.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.cjs.js +280 -185
- package/dist/bundle.esm.js +281 -185
- package/dist/index.d.ts +3 -4
- package/dist/lythreeframe/AssetManagement/AssetManager.d.ts +13 -9
- package/dist/lythreeframe/Frame/Parameters/AppParameter.d.ts +11 -0
- package/dist/lythreeframe/Frame/Viewport.d.ts +1 -1
- package/dist/lythreeframe/Object/Actor.d.ts +3 -1
- package/dist/lythreeframe/Object/Actors/Light/DirectionalLightActor.d.ts +2 -1
- package/dist/lythreeframe/Object/Actors/Shape/BoxActor.d.ts +2 -1
- package/dist/lythreeframe/Object/Actors/Shape/PlaneActor.d.ts +2 -1
- package/dist/lythreeframe/Object/Actors/Sky/SkyActor.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/2D/2DComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Light/DirectionalLight/DirectionalLightComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Light/LightComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Mesh/MeshComponent.d.ts +16 -9
- package/dist/lythreeframe/Object/Components/Mesh/Shape/BoxComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Mesh/Shape/PlaneComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Mesh/Shape/SphereComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/Mesh/Sprite/SpriteComponent.d.ts +2 -1
- package/dist/lythreeframe/Object/Components/SceneComponent.d.ts +4 -2
- package/dist/lythreeframe/Object/Components/Sky/SkyComponent.d.ts +3 -1
- package/dist/lythreeframe/ThreeJsApp.d.ts +4 -4
- package/package.json +1 -1
package/dist/bundle.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MathUtils, Group, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh,
|
|
1
|
+
import { MathUtils, Group, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, Scene, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry, Object3D } from 'three/webgpu';
|
|
2
2
|
import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
|
|
3
3
|
import { pass, mrt, output, uniform, velocity, metalness, transformedNormalView, blendColor, time, oscSine } from 'three/tsl';
|
|
4
4
|
import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
|
|
@@ -17,21 +17,6 @@ import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
|
17
17
|
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';
|
|
18
18
|
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
|
|
19
19
|
|
|
20
|
-
class LYLoadTask {
|
|
21
|
-
constructor(paths, onLoaded) {
|
|
22
|
-
this.paths = paths;
|
|
23
|
-
this.onLoaded = onLoaded;
|
|
24
|
-
}
|
|
25
|
-
get Paths() {
|
|
26
|
-
return this.paths;
|
|
27
|
-
}
|
|
28
|
-
onLoadingFinished(loaded) {
|
|
29
|
-
if (this.onLoaded) {
|
|
30
|
-
this.onLoaded(loaded);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
20
|
/*
|
|
36
21
|
* virtual class of 3D Object, should not be use directly.
|
|
37
22
|
*/
|
|
@@ -122,11 +107,14 @@ class SceneComponent extends Component {
|
|
|
122
107
|
// 通过 _parentActor 私有字段访问父级 Actor
|
|
123
108
|
return this._parentActor;
|
|
124
109
|
}
|
|
125
|
-
|
|
110
|
+
get world() {
|
|
111
|
+
return this.app.world;
|
|
112
|
+
}
|
|
113
|
+
constructor(app, newThreeObject) {
|
|
126
114
|
super(newThreeObject);
|
|
127
115
|
this.bCanHover = false;
|
|
128
116
|
this.bCanClick = false;
|
|
129
|
-
this.
|
|
117
|
+
this.app = app;
|
|
130
118
|
this._name = "SceneComponent";
|
|
131
119
|
}
|
|
132
120
|
createDefaultThreeObject() {
|
|
@@ -221,10 +209,9 @@ class SceneComponent extends Component {
|
|
|
221
209
|
return childrens;
|
|
222
210
|
}
|
|
223
211
|
onAddedToWorld(world) {
|
|
224
|
-
this.world = world;
|
|
225
212
|
let childrens = this.childrenComponents;
|
|
226
213
|
for (let i = 0; i < childrens.length; ++i) {
|
|
227
|
-
childrens[i].onAddedToWorld(
|
|
214
|
+
childrens[i].onAddedToWorld(world);
|
|
228
215
|
}
|
|
229
216
|
}
|
|
230
217
|
destroy() {
|
|
@@ -676,6 +663,8 @@ class SceneComponent extends Component {
|
|
|
676
663
|
}
|
|
677
664
|
}
|
|
678
665
|
|
|
666
|
+
// import {BufferGeometry, Material, Mesh, Texture} from "three/webgpu";
|
|
667
|
+
// import {Vector3} from "three/webgpu";
|
|
679
668
|
class MeshComponent extends SceneComponent {
|
|
680
669
|
get threeObject() {
|
|
681
670
|
return this.obj;
|
|
@@ -687,43 +676,86 @@ class MeshComponent extends SceneComponent {
|
|
|
687
676
|
}
|
|
688
677
|
}
|
|
689
678
|
get geometry() {
|
|
690
|
-
|
|
679
|
+
if (!this._geometryPtr) {
|
|
680
|
+
throw new Error("geometryPtr is null");
|
|
681
|
+
}
|
|
682
|
+
return this._geometryPtr.getValue();
|
|
691
683
|
}
|
|
692
684
|
set geometry(geo) {
|
|
693
|
-
|
|
694
|
-
|
|
685
|
+
let geoPtr = this.app.assetManager.addGeometryAsset(geo);
|
|
686
|
+
this.geometryPtr = geoPtr;
|
|
687
|
+
}
|
|
688
|
+
get geometryPtr() {
|
|
689
|
+
if (!this._geometryPtr) {
|
|
690
|
+
throw new Error("geometryPtr is null");
|
|
691
|
+
}
|
|
692
|
+
return this._geometryPtr;
|
|
693
|
+
}
|
|
694
|
+
set geometryPtr(geo) {
|
|
695
|
+
if (this._geometryPtr) {
|
|
696
|
+
this._geometryPtr.release();
|
|
697
|
+
this._geometryPtr = null;
|
|
698
|
+
}
|
|
699
|
+
this._geometryPtr = geo;
|
|
700
|
+
if (this.threeObject) {
|
|
701
|
+
this.threeObject.geometry = geo.getValue();
|
|
695
702
|
}
|
|
696
|
-
this.threeObject.geometry = geo;
|
|
697
703
|
}
|
|
698
704
|
get material() {
|
|
699
|
-
|
|
705
|
+
let mats = [];
|
|
706
|
+
this._materialPtr.forEach((elem) => {
|
|
707
|
+
mats.push(elem.getValue());
|
|
708
|
+
});
|
|
709
|
+
return mats;
|
|
710
|
+
}
|
|
711
|
+
get materialPtr() {
|
|
712
|
+
return this.materialPtr;
|
|
700
713
|
}
|
|
701
714
|
set material(newMat) {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
}
|
|
715
|
+
let mats = Array.isArray(newMat) ? newMat : [newMat];
|
|
716
|
+
let matPtrs = [];
|
|
717
|
+
mats.forEach((elem) => {
|
|
718
|
+
let ptr = this.app.assetManager.addMaterialAsset(elem);
|
|
719
|
+
if (ptr)
|
|
720
|
+
matPtrs.push(ptr);
|
|
721
|
+
});
|
|
722
|
+
this.materialPtr = matPtrs;
|
|
709
723
|
}
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
724
|
+
set materialPtr(newMat) {
|
|
725
|
+
if (this._materialPtr) {
|
|
726
|
+
this._materialPtr.forEach((elem) => {
|
|
727
|
+
elem.release();
|
|
728
|
+
});
|
|
729
|
+
this._materialPtr = [];
|
|
714
730
|
}
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
731
|
+
let matPtrs = Array.isArray(newMat) ? newMat : [newMat];
|
|
732
|
+
let mats = Array.isArray(newMat) ? newMat : [newMat];
|
|
733
|
+
matPtrs.forEach((elem) => {
|
|
734
|
+
mats.push(elem.getValue());
|
|
735
|
+
elem.addRef();
|
|
736
|
+
});
|
|
737
|
+
if (this.threeObject) {
|
|
738
|
+
this.threeObject.material = mats;
|
|
722
739
|
}
|
|
723
|
-
|
|
740
|
+
this._materialPtr = matPtrs;
|
|
741
|
+
}
|
|
742
|
+
constructor(app, geometry, material) {
|
|
743
|
+
let matPtrs = [];
|
|
744
|
+
let mats = Array.isArray(material) ? material : [material];
|
|
745
|
+
mats.forEach((elem) => {
|
|
746
|
+
let ptr = app.assetManager.addMaterialAsset(elem);
|
|
747
|
+
if (ptr)
|
|
748
|
+
matPtrs.push(ptr);
|
|
749
|
+
});
|
|
750
|
+
let newMesh = new Mesh(geometry, mats);
|
|
751
|
+
super(app, newMesh);
|
|
724
752
|
this.obj = null;
|
|
753
|
+
this._geometryPtr = app.assetManager.addGeometryAsset(geometry);
|
|
754
|
+
this._materialPtr = matPtrs;
|
|
755
|
+
matPtrs.forEach((elem) => {
|
|
756
|
+
elem.addRef();
|
|
757
|
+
});
|
|
725
758
|
this.threeObject = newMesh;
|
|
726
|
-
LYAssetManager.Get().checkMeshResource(newMesh);
|
|
727
759
|
}
|
|
728
760
|
set castShadow(bCast) {
|
|
729
761
|
if (this.threeObject)
|
|
@@ -761,27 +793,15 @@ class MeshComponent extends SceneComponent {
|
|
|
761
793
|
return ret;
|
|
762
794
|
}
|
|
763
795
|
destroyObject() {
|
|
764
|
-
if (this.
|
|
765
|
-
this.
|
|
766
|
-
}
|
|
767
|
-
let assetManager = LYAssetManager.Get();
|
|
768
|
-
const mats = Array.isArray(this.material) ? this.material : [this.material];
|
|
769
|
-
mats.forEach((material) => {
|
|
770
|
-
if (material instanceof Material) {
|
|
771
|
-
Object.entries(material).forEach(([key, value]) => {
|
|
772
|
-
if (value instanceof Texture) {
|
|
773
|
-
assetManager.releaseAsset(value);
|
|
774
|
-
value = null;
|
|
775
|
-
}
|
|
776
|
-
});
|
|
777
|
-
assetManager.releaseAsset(material);
|
|
778
|
-
}
|
|
779
|
-
});
|
|
780
|
-
this.material = [];
|
|
781
|
-
if (this.geometry instanceof BufferGeometry) {
|
|
782
|
-
assetManager.releaseAsset(this.geometry);
|
|
783
|
-
this.geometry = null;
|
|
796
|
+
if (this.threeObject) {
|
|
797
|
+
this.threeObject.removeFromParent();
|
|
784
798
|
}
|
|
799
|
+
this._geometryPtr.release();
|
|
800
|
+
let matPtrs = Array.isArray(this._materialPtr) ? this._materialPtr : [this._materialPtr];
|
|
801
|
+
matPtrs.forEach((elem) => {
|
|
802
|
+
elem.release();
|
|
803
|
+
});
|
|
804
|
+
super.destroyObject();
|
|
785
805
|
}
|
|
786
806
|
}
|
|
787
807
|
|
|
@@ -847,29 +867,30 @@ class TAssetPointer extends TSmartPointer {
|
|
|
847
867
|
}
|
|
848
868
|
}
|
|
849
869
|
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
this.
|
|
870
|
+
class AssetManager {
|
|
871
|
+
constructor(app) {
|
|
872
|
+
this.geometryAssets = new Map();
|
|
873
|
+
this.textureAssets = new Map();
|
|
874
|
+
this.materialAssets = new Map();
|
|
854
875
|
this.dracoLoader = null;
|
|
855
876
|
this.loadingManager = new LoadingManager();
|
|
856
877
|
this.gltfLoader = new GLTFLoader(this.loadingManager);
|
|
878
|
+
this.app = app;
|
|
857
879
|
}
|
|
858
880
|
get LoadingManager() {
|
|
859
881
|
return this.loadingManager;
|
|
860
882
|
}
|
|
861
|
-
static Get() {
|
|
862
|
-
return assetManager;
|
|
863
|
-
}
|
|
864
|
-
static ClearAssets() {
|
|
865
|
-
assetManager.clearAssets();
|
|
866
|
-
}
|
|
867
883
|
setupDracoLoader(dracoPath) {
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
884
|
+
if (!this.dracoLoader) {
|
|
885
|
+
this.dracoLoader = new DRACOLoader(this.loadingManager);
|
|
886
|
+
this.dracoLoader.setDecoderPath(dracoPath);
|
|
887
|
+
this.dracoLoader.setDecoderConfig({ type: "js" });
|
|
888
|
+
this.dracoLoader.preload();
|
|
889
|
+
this.gltfLoader.setDRACOLoader(this.dracoLoader);
|
|
890
|
+
}
|
|
891
|
+
else {
|
|
892
|
+
console.error("DracoLoader already setup");
|
|
893
|
+
}
|
|
873
894
|
}
|
|
874
895
|
convertThreeObjectToLYObject(parentLYComponent, threejsObject) {
|
|
875
896
|
let location = threejsObject.position.clone();
|
|
@@ -905,7 +926,7 @@ class LYAssetManager {
|
|
|
905
926
|
}
|
|
906
927
|
return threejsObject.userData.LYObject;
|
|
907
928
|
}
|
|
908
|
-
collectResourcesAndReferences(
|
|
929
|
+
collectResourcesAndReferences(object) {
|
|
909
930
|
function countResource(map, resource) {
|
|
910
931
|
if (!map.has(resource)) {
|
|
911
932
|
map.set(resource, 1);
|
|
@@ -919,7 +940,7 @@ class LYAssetManager {
|
|
|
919
940
|
materials: new Map(),
|
|
920
941
|
textures: new Map()
|
|
921
942
|
};
|
|
922
|
-
|
|
943
|
+
object.traverse((child) => {
|
|
923
944
|
if (child.geometry && child.geometry instanceof BufferGeometry) {
|
|
924
945
|
countResource(resources.geometries, child.geometry);
|
|
925
946
|
}
|
|
@@ -965,7 +986,7 @@ class LYAssetManager {
|
|
|
965
986
|
}
|
|
966
987
|
Object.entries(material).forEach(([key, value]) => {
|
|
967
988
|
if (value instanceof Texture) {
|
|
968
|
-
if (!value.userData["assetPointer"]) {
|
|
989
|
+
if (!(value.userData["assetPointer"])) {
|
|
969
990
|
this.addAsset(value);
|
|
970
991
|
}
|
|
971
992
|
}
|
|
@@ -974,36 +995,51 @@ class LYAssetManager {
|
|
|
974
995
|
});
|
|
975
996
|
}
|
|
976
997
|
}
|
|
977
|
-
loadMultiGLTFAsGroup(tasks, onProgress = null, onAllFinished = null)
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
998
|
+
// loadMultiGLTFAsGroup(tasks:LoadTask[], onProgress:((url:string, loaded:number, total:number) => void) | null = null, onAllFinished:(() => void) | null = null)
|
|
999
|
+
// {
|
|
1000
|
+
// this.loadingManager.onLoad = onAllFinished ? () =>
|
|
1001
|
+
// {
|
|
1002
|
+
// this.loadingManager.onLoad = () =>
|
|
1003
|
+
// {
|
|
1004
|
+
// };
|
|
1005
|
+
// onAllFinished();
|
|
1006
|
+
// } : () =>
|
|
1007
|
+
// {
|
|
1008
|
+
// this.loadingManager.onLoad = () =>
|
|
1009
|
+
// {
|
|
1010
|
+
// };
|
|
1011
|
+
// };
|
|
1012
|
+
// this.loadingManager.onProgress = onProgress ? (url, loaded, total) =>
|
|
1013
|
+
// {
|
|
1014
|
+
// onProgress(url, loaded, total);
|
|
1015
|
+
// } : () =>
|
|
1016
|
+
// {
|
|
1017
|
+
// };
|
|
1018
|
+
// tasks.forEach(
|
|
1019
|
+
// (task) =>
|
|
1020
|
+
// {
|
|
1021
|
+
// task.Paths.forEach(
|
|
1022
|
+
// (path) =>
|
|
1023
|
+
// {
|
|
1024
|
+
// const onGlbLoaded = (glb:GLTF) =>
|
|
1025
|
+
// {
|
|
1026
|
+
// task.onLoadingFinished(glb);
|
|
1027
|
+
// this.collectResourcesAndReferences(glb.scene);
|
|
1028
|
+
// };
|
|
1029
|
+
// try
|
|
1030
|
+
// {
|
|
1031
|
+
// this.gltfLoader.load(path, (glb:GLTF) =>
|
|
1032
|
+
// {
|
|
1033
|
+
// onGlbLoaded(glb);
|
|
1034
|
+
// });
|
|
1035
|
+
// } catch (e)
|
|
1036
|
+
// {
|
|
1037
|
+
// console.error(e, path);
|
|
1038
|
+
// }
|
|
1039
|
+
// });
|
|
1040
|
+
// }
|
|
1041
|
+
// );
|
|
1042
|
+
// }
|
|
1007
1043
|
loadGltfFromBuffer(data, path, onLoadFinished) {
|
|
1008
1044
|
this.gltfLoader.parse(data, path, onLoadFinished);
|
|
1009
1045
|
}
|
|
@@ -1014,18 +1050,49 @@ class LYAssetManager {
|
|
|
1014
1050
|
});
|
|
1015
1051
|
}
|
|
1016
1052
|
addAsset(asset, referenceCount = 1) {
|
|
1017
|
-
|
|
1018
|
-
|
|
1053
|
+
if (asset instanceof BufferGeometry) {
|
|
1054
|
+
return this.addGeometryAsset(asset, referenceCount);
|
|
1055
|
+
}
|
|
1056
|
+
else if (asset instanceof Material) {
|
|
1057
|
+
return this.addMaterialAsset(asset, referenceCount);
|
|
1058
|
+
}
|
|
1059
|
+
else if (asset instanceof Texture) {
|
|
1060
|
+
return this.addTextureAsset(asset, referenceCount);
|
|
1061
|
+
}
|
|
1062
|
+
return undefined;
|
|
1063
|
+
}
|
|
1064
|
+
addMaterialAsset(asset, referenceCount = 1) {
|
|
1065
|
+
let pointer = (asset.userData["assetPointer"]);
|
|
1066
|
+
if (!pointer) {
|
|
1067
|
+
pointer = new TAssetPointer(asset, referenceCount);
|
|
1068
|
+
}
|
|
1069
|
+
else {
|
|
1070
|
+
pointer = asset.userData["assetPointer"];
|
|
1071
|
+
pointer.addRef(referenceCount);
|
|
1072
|
+
}
|
|
1073
|
+
return pointer;
|
|
1074
|
+
}
|
|
1075
|
+
addTextureAsset(asset, referenceCount = 1) {
|
|
1076
|
+
let pointer = (asset.userData["assetPointer"]);
|
|
1077
|
+
if (!pointer) {
|
|
1019
1078
|
pointer = new TAssetPointer(asset, referenceCount);
|
|
1020
|
-
asset.userData["assetPointer"] = pointer;
|
|
1021
1079
|
}
|
|
1022
1080
|
else {
|
|
1023
1081
|
pointer = asset.userData["assetPointer"];
|
|
1024
1082
|
pointer.addRef(referenceCount);
|
|
1025
1083
|
}
|
|
1026
|
-
|
|
1027
|
-
|
|
1084
|
+
return pointer;
|
|
1085
|
+
}
|
|
1086
|
+
addGeometryAsset(asset, referenceCount = 1) {
|
|
1087
|
+
let pointer = (asset.userData["assetPointer"]);
|
|
1088
|
+
if (!pointer) {
|
|
1089
|
+
pointer = new TAssetPointer(asset, referenceCount);
|
|
1090
|
+
}
|
|
1091
|
+
else {
|
|
1092
|
+
pointer = asset.userData["assetPointer"];
|
|
1093
|
+
pointer.addRef(referenceCount);
|
|
1028
1094
|
}
|
|
1095
|
+
return pointer;
|
|
1029
1096
|
}
|
|
1030
1097
|
releaseAsset(asset) {
|
|
1031
1098
|
// let uuid = asset.uuid
|
|
@@ -1038,14 +1105,26 @@ class LYAssetManager {
|
|
|
1038
1105
|
}
|
|
1039
1106
|
}
|
|
1040
1107
|
clearAssets() {
|
|
1041
|
-
|
|
1042
|
-
|
|
1108
|
+
this.geometryAssets.forEach((p) => {
|
|
1109
|
+
p.forceRelease();
|
|
1110
|
+
});
|
|
1111
|
+
this.geometryAssets.clear();
|
|
1112
|
+
this.materialAssets.forEach((p) => {
|
|
1043
1113
|
p.forceRelease();
|
|
1044
1114
|
});
|
|
1045
|
-
this.
|
|
1115
|
+
this.materialAssets.clear();
|
|
1116
|
+
this.textureAssets.forEach((p) => {
|
|
1117
|
+
p.forceRelease();
|
|
1118
|
+
});
|
|
1119
|
+
this.textureAssets.clear();
|
|
1120
|
+
// let pointers = Array.from(this.assetPointer.values());
|
|
1121
|
+
// pointers.forEach((p) =>
|
|
1122
|
+
// {
|
|
1123
|
+
// p.forceRelease();
|
|
1124
|
+
// });
|
|
1125
|
+
// this.assetPointer.clear();
|
|
1046
1126
|
}
|
|
1047
1127
|
}
|
|
1048
|
-
const assetManager = new LYAssetManager();
|
|
1049
1128
|
|
|
1050
1129
|
class Delegate {
|
|
1051
1130
|
constructor() {
|
|
@@ -1662,26 +1741,31 @@ class Viewport {
|
|
|
1662
1741
|
}
|
|
1663
1742
|
this.isRenderStateDirty = false;
|
|
1664
1743
|
}
|
|
1665
|
-
renderAsImage(width = 1024, height = 1024) {
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1744
|
+
async renderAsImage(width = 1024, height = 1024) {
|
|
1745
|
+
return new Promise((resolve, reject) => {
|
|
1746
|
+
try {
|
|
1747
|
+
if (this.postProcessing) {
|
|
1748
|
+
this.postProcessing.render();
|
|
1749
|
+
}
|
|
1750
|
+
else {
|
|
1751
|
+
this.renderer.render(this.app.world.scene, this.app.camera);
|
|
1752
|
+
}
|
|
1753
|
+
const offscreenCanvas = document.createElement('canvas');
|
|
1754
|
+
offscreenCanvas.width = width;
|
|
1755
|
+
offscreenCanvas.height = height;
|
|
1756
|
+
const context = offscreenCanvas.getContext('2d');
|
|
1757
|
+
if (!context) {
|
|
1758
|
+
throw Error("Can not create context");
|
|
1759
|
+
}
|
|
1760
|
+
context.drawImage(this.renderer.domElement, 0, 0, width, height);
|
|
1761
|
+
const ret = offscreenCanvas.toDataURL('image/jpeg');
|
|
1762
|
+
offscreenCanvas.remove();
|
|
1763
|
+
resolve(ret);
|
|
1764
|
+
}
|
|
1765
|
+
catch (error) {
|
|
1766
|
+
reject(error);
|
|
1767
|
+
}
|
|
1768
|
+
});
|
|
1685
1769
|
}
|
|
1686
1770
|
destroy() {
|
|
1687
1771
|
var _a;
|
|
@@ -2085,6 +2169,12 @@ const DefaultAppParam = {
|
|
|
2085
2169
|
renderParam: DefaultRenderParam,
|
|
2086
2170
|
cameraParam: DefaultCameraParam,
|
|
2087
2171
|
postProcessParam: DefaultPostProcessParam,
|
|
2172
|
+
classes: {
|
|
2173
|
+
assetManagerClass: AssetManager,
|
|
2174
|
+
controllerClass: Controller,
|
|
2175
|
+
worldClass: World,
|
|
2176
|
+
viewportClass: Viewport,
|
|
2177
|
+
}
|
|
2088
2178
|
};
|
|
2089
2179
|
|
|
2090
2180
|
class ThreeJsApp {
|
|
@@ -2103,14 +2193,8 @@ class ThreeJsApp {
|
|
|
2103
2193
|
get controller() {
|
|
2104
2194
|
return this._controller;
|
|
2105
2195
|
}
|
|
2106
|
-
get
|
|
2107
|
-
return
|
|
2108
|
-
}
|
|
2109
|
-
get viewportClass() {
|
|
2110
|
-
return Viewport;
|
|
2111
|
-
}
|
|
2112
|
-
get controllerClass() {
|
|
2113
|
-
return Controller;
|
|
2196
|
+
get assetManager() {
|
|
2197
|
+
return this._assetManager;
|
|
2114
2198
|
}
|
|
2115
2199
|
get appParam() {
|
|
2116
2200
|
return this._appParam;
|
|
@@ -2124,11 +2208,18 @@ class ThreeJsApp {
|
|
|
2124
2208
|
this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
|
|
2125
2209
|
this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRenderParam;
|
|
2126
2210
|
this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
|
|
2211
|
+
this._appParam.classes = appParam.classes ? appParam.classes : {
|
|
2212
|
+
assetManagerClass: AssetManager,
|
|
2213
|
+
controllerClass: Controller,
|
|
2214
|
+
worldClass: World,
|
|
2215
|
+
viewportClass: Viewport,
|
|
2216
|
+
};
|
|
2127
2217
|
this._clock = new Clock();
|
|
2128
2218
|
this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
|
|
2129
|
-
this._world = new this.worldClass(this);
|
|
2130
|
-
this._viewport = new this.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
|
|
2131
|
-
this._controller = new this.controllerClass(this);
|
|
2219
|
+
this._world = new this._appParam.classes.worldClass(this);
|
|
2220
|
+
this._viewport = new this._appParam.classes.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
|
|
2221
|
+
this._controller = new this._appParam.classes.controllerClass(this);
|
|
2222
|
+
this._assetManager = new this._appParam.classes.assetManagerClass(this);
|
|
2132
2223
|
this.viewport.renderer.setAnimationLoop(() => {
|
|
2133
2224
|
this.tick();
|
|
2134
2225
|
});
|
|
@@ -2150,6 +2241,7 @@ class ThreeJsApp {
|
|
|
2150
2241
|
this.world.destroy();
|
|
2151
2242
|
this.controller.destroy();
|
|
2152
2243
|
this.viewport.destroy();
|
|
2244
|
+
this._assetManager.clearAssets();
|
|
2153
2245
|
}
|
|
2154
2246
|
updateCamera(param) {
|
|
2155
2247
|
const previousCam = this.camera;
|
|
@@ -2170,8 +2262,8 @@ class ThreeJsApp {
|
|
|
2170
2262
|
// }
|
|
2171
2263
|
this.camera.updateProjectionMatrix();
|
|
2172
2264
|
}
|
|
2173
|
-
renderAsImage(width = 1024, height = 1024) {
|
|
2174
|
-
return this.viewport.renderAsImage(width, height);
|
|
2265
|
+
async renderAsImage(width = 1024, height = 1024) {
|
|
2266
|
+
return await this.viewport.renderAsImage(width, height);
|
|
2175
2267
|
}
|
|
2176
2268
|
}
|
|
2177
2269
|
|
|
@@ -2227,7 +2319,7 @@ class Actor extends BaseObject {
|
|
|
2227
2319
|
get isVisible() {
|
|
2228
2320
|
return this.rootComponent ? this.rootComponent.isVisible : false;
|
|
2229
2321
|
}
|
|
2230
|
-
constructor(myThreeObject = null) {
|
|
2322
|
+
constructor(app, myThreeObject = null) {
|
|
2231
2323
|
super();
|
|
2232
2324
|
this._name = "Actor";
|
|
2233
2325
|
this._rootComponent = null;
|
|
@@ -2236,17 +2328,18 @@ class Actor extends BaseObject {
|
|
|
2236
2328
|
this.onDoubleClickedEvent = [];
|
|
2237
2329
|
this.onHoverBeginEvent = [];
|
|
2238
2330
|
this.onHoverEndEvent = [];
|
|
2331
|
+
this.app = app;
|
|
2239
2332
|
this.constructRootComponent(myThreeObject);
|
|
2240
2333
|
}
|
|
2241
2334
|
constructRootComponent(myThreeObject = null) {
|
|
2242
2335
|
let tObject = myThreeObject ? myThreeObject : new Group();
|
|
2243
2336
|
if (tObject.isMesh) {
|
|
2244
2337
|
let mesh = tObject;
|
|
2245
|
-
this._rootComponent = new MeshComponent(mesh);
|
|
2338
|
+
this._rootComponent = new MeshComponent(this.app, mesh.geometry, mesh.material);
|
|
2246
2339
|
this.rootComponent.parentActor = this;
|
|
2247
2340
|
}
|
|
2248
2341
|
else {
|
|
2249
|
-
this._rootComponent = new SceneComponent(tObject);
|
|
2342
|
+
this._rootComponent = new SceneComponent(this.app, tObject);
|
|
2250
2343
|
this.rootComponent.parentActor = this;
|
|
2251
2344
|
}
|
|
2252
2345
|
}
|
|
@@ -2579,8 +2672,8 @@ class LightComponent extends SceneComponent {
|
|
|
2579
2672
|
set intensity(intensity) {
|
|
2580
2673
|
this.threeObject.intensity = intensity;
|
|
2581
2674
|
}
|
|
2582
|
-
constructor(light) {
|
|
2583
|
-
super(light);
|
|
2675
|
+
constructor(app, light) {
|
|
2676
|
+
super(app, light);
|
|
2584
2677
|
this.obj = light;
|
|
2585
2678
|
}
|
|
2586
2679
|
}
|
|
@@ -2604,9 +2697,9 @@ class DirectionalLightComponent extends LightComponent {
|
|
|
2604
2697
|
set castShadow(value) {
|
|
2605
2698
|
this.threeObject.castShadow = value;
|
|
2606
2699
|
}
|
|
2607
|
-
constructor(color = 0xffffff, intensity = 10) {
|
|
2700
|
+
constructor(app, color = 0xffffff, intensity = 10) {
|
|
2608
2701
|
let obj = new DirectionalLight(color, intensity);
|
|
2609
|
-
super(obj);
|
|
2702
|
+
super(app, obj);
|
|
2610
2703
|
this.obj = obj;
|
|
2611
2704
|
obj.castShadow = true;
|
|
2612
2705
|
}
|
|
@@ -2635,8 +2728,8 @@ class DirectionalLightComponent extends LightComponent {
|
|
|
2635
2728
|
}
|
|
2636
2729
|
|
|
2637
2730
|
class DirectionalLightActor extends Actor {
|
|
2638
|
-
constructor(color = 0xffffff, intensity = 1) {
|
|
2639
|
-
super();
|
|
2731
|
+
constructor(app, color = 0xffffff, intensity = 1) {
|
|
2732
|
+
super(app);
|
|
2640
2733
|
this.lightComponent = null;
|
|
2641
2734
|
this.lightComponent = this.rootComponent;
|
|
2642
2735
|
if (this.lightComponent) {
|
|
@@ -2646,7 +2739,7 @@ class DirectionalLightActor extends Actor {
|
|
|
2646
2739
|
this.lightComponent.castShadow = true;
|
|
2647
2740
|
}
|
|
2648
2741
|
constructRootComponent() {
|
|
2649
|
-
this.lightComponent = new DirectionalLightComponent();
|
|
2742
|
+
this.lightComponent = new DirectionalLightComponent(this.app);
|
|
2650
2743
|
this.rootComponent = this.lightComponent;
|
|
2651
2744
|
this.lightComponent.castShadow = true;
|
|
2652
2745
|
this.rootComponent.parentActor = this;
|
|
@@ -2654,15 +2747,15 @@ class DirectionalLightActor extends Actor {
|
|
|
2654
2747
|
}
|
|
2655
2748
|
|
|
2656
2749
|
class BoxComponent extends MeshComponent {
|
|
2657
|
-
constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial()) {
|
|
2658
|
-
super(new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
|
|
2750
|
+
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial()) {
|
|
2751
|
+
super(app, new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
|
|
2659
2752
|
}
|
|
2660
2753
|
}
|
|
2661
2754
|
|
|
2662
2755
|
class BoxActor extends Actor {
|
|
2663
|
-
constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshBasicMaterial()) {
|
|
2664
|
-
super();
|
|
2665
|
-
this.addComponent(new BoxComponent(width, height, depth, widthSegments, heightSegments, depthSegments, material));
|
|
2756
|
+
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshBasicMaterial()) {
|
|
2757
|
+
super(app);
|
|
2758
|
+
this.addComponent(new BoxComponent(this.app, width, height, depth, widthSegments, heightSegments, depthSegments, material));
|
|
2666
2759
|
}
|
|
2667
2760
|
}
|
|
2668
2761
|
|
|
@@ -2687,9 +2780,9 @@ class SkyComponent extends SceneComponent {
|
|
|
2687
2780
|
this.obj.userData["LYObject"] = this;
|
|
2688
2781
|
}
|
|
2689
2782
|
}
|
|
2690
|
-
constructor(skyparam) {
|
|
2783
|
+
constructor(app, skyparam) {
|
|
2691
2784
|
let obj = new SkyMesh();
|
|
2692
|
-
super(obj);
|
|
2785
|
+
super(app, obj);
|
|
2693
2786
|
this.skyParam = DefaultSkyParam;
|
|
2694
2787
|
this.sunPosition = new Vector3();
|
|
2695
2788
|
this.obj = obj;
|
|
@@ -2711,11 +2804,14 @@ class SkyComponent extends SceneComponent {
|
|
|
2711
2804
|
this.threeObject.sunPosition.value.copy(this.sunPosition);
|
|
2712
2805
|
(_b = (_a = this.world) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.markRenderStateDirty();
|
|
2713
2806
|
}
|
|
2807
|
+
destroyObject() {
|
|
2808
|
+
ThreeObjectLibrary.disposeMeshResource(this.obj);
|
|
2809
|
+
}
|
|
2714
2810
|
}
|
|
2715
2811
|
|
|
2716
2812
|
class SkyActor extends Actor {
|
|
2717
|
-
constructor() {
|
|
2718
|
-
super();
|
|
2813
|
+
constructor(app) {
|
|
2814
|
+
super(app);
|
|
2719
2815
|
this._name = "SkyActor";
|
|
2720
2816
|
this.skyComponent = null;
|
|
2721
2817
|
this.name = "DirectionalLightActor";
|
|
@@ -2724,15 +2820,15 @@ class SkyActor extends Actor {
|
|
|
2724
2820
|
this.setScale(45000, 45000, 45000);
|
|
2725
2821
|
}
|
|
2726
2822
|
constructRootComponent() {
|
|
2727
|
-
this.skyComponent = new SkyComponent();
|
|
2823
|
+
this.skyComponent = new SkyComponent(this.app);
|
|
2728
2824
|
this.rootComponent = this.skyComponent;
|
|
2729
2825
|
this.rootComponent.parentActor = this;
|
|
2730
2826
|
}
|
|
2731
2827
|
}
|
|
2732
2828
|
|
|
2733
2829
|
class PlaneComponent extends MeshComponent {
|
|
2734
|
-
constructor(width, height, material, widthSegments = 1, heightSegments = 1) {
|
|
2735
|
-
super(new PlaneGeometry(width, height, widthSegments, heightSegments), material);
|
|
2830
|
+
constructor(app, width, height, material, widthSegments = 1, heightSegments = 1) {
|
|
2831
|
+
super(app, new PlaneGeometry(width, height, widthSegments, heightSegments), material);
|
|
2736
2832
|
}
|
|
2737
2833
|
}
|
|
2738
2834
|
|
|
@@ -2740,9 +2836,9 @@ class PlaneActor extends Actor {
|
|
|
2740
2836
|
get planeComponent() {
|
|
2741
2837
|
return this._planeComponent;
|
|
2742
2838
|
}
|
|
2743
|
-
constructor(width, height, material = new MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
|
|
2744
|
-
super();
|
|
2745
|
-
this._planeComponent = new PlaneComponent(width, height, material, widthSegments, heightSegments);
|
|
2839
|
+
constructor(app, width, height, material = new MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
|
|
2840
|
+
super(app);
|
|
2841
|
+
this._planeComponent = new PlaneComponent(this.app, width, height, material, widthSegments, heightSegments);
|
|
2746
2842
|
this._planeComponent.setRotation(Math.PI * 0.5 * -1, 0, 0);
|
|
2747
2843
|
this.addComponent(this._planeComponent);
|
|
2748
2844
|
this._planeComponent.receiveShadow = true;
|
|
@@ -2756,8 +2852,8 @@ class PlaneActor extends Actor {
|
|
|
2756
2852
|
}
|
|
2757
2853
|
|
|
2758
2854
|
class SphereComponent extends MeshComponent {
|
|
2759
|
-
constructor(radius, material = new MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
|
|
2760
|
-
super(new SphereGeometry(radius, widthSegments, heightSegments), material);
|
|
2855
|
+
constructor(app, radius, material = new MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
|
|
2856
|
+
super(app, new SphereGeometry(radius, widthSegments, heightSegments), material);
|
|
2761
2857
|
}
|
|
2762
2858
|
}
|
|
2763
2859
|
|
|
@@ -2771,9 +2867,9 @@ class LabelComponent extends SceneComponent {
|
|
|
2771
2867
|
this.obj.userData["LYObject"] = this;
|
|
2772
2868
|
}
|
|
2773
2869
|
}
|
|
2774
|
-
constructor(domElement, center = new Vector2(0.5, 1)) {
|
|
2870
|
+
constructor(app, domElement, center = new Vector2(0.5, 1)) {
|
|
2775
2871
|
let obj = new CSS2DObject(domElement);
|
|
2776
|
-
super(obj);
|
|
2872
|
+
super(app, obj);
|
|
2777
2873
|
this.obj = obj;
|
|
2778
2874
|
obj.center = center;
|
|
2779
2875
|
}
|
|
@@ -3000,4 +3096,4 @@ class TransformGizmo extends Pawn {
|
|
|
3000
3096
|
}
|
|
3001
3097
|
}
|
|
3002
3098
|
|
|
3003
|
-
export { Actor, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson,
|
|
3099
|
+
export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, LabelComponent, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, ThreeJsApp, ThreeObjectLibrary, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|