ljq/TkAstral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(resize): 三维视口Resize监听放入sdk中；3DTiles模型新增视口Resize时的自动处理

Browse Source
This commit is contained in:
ErSan 2025-10-05 22:08:51 +08:00
parent 2029cbfa30
commit 87acdc4896
6 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/editor/src/views/editor/layouts/viewport/Viewport.vue
View File

@ -53,17 +53,6 @@ onMounted(async () => {
// 注册astral editor内置插件
installBuiltinPlugin(window.viewer);
//监听视窗变化（节流）
let timer: NodeJS.Timeout | null = null;
const resizeObserver = new ResizeObserver(() => {
if (timer) return;
timer = setTimeout(function () {
Hooks.useDispatchSignal("sceneResize", viewportRef.value.offsetWidth, viewportRef.value.offsetHeight);
timer = null;
}, 16)
});
resizeObserver.observe(viewportRef.value);
})
onBeforeUnmount(() => {

11
packages/editor/src/views/preview/index.vue
View File

@ -44,17 +44,6 @@ onMounted(async () => {
await nextTick();
//监听视窗变化（节流）
let timer: NodeJS.Timeout | null = null;
const resizeObserver = new ResizeObserver(() => {
if (timer) return;
timer = setTimeout(() => {
Hooks.useDispatchSignal("sceneResize", viewportRef.value.offsetWidth, viewportRef.value.offsetHeight);
timer = null;
}, 16)
});
resizeObserver.observe(viewportRef.value);
await init();
});

2
packages/sdk/lib/core/preview/Preview.ts
View File

@ -155,7 +155,7 @@ export default class Preview extends THREE.EventDispatcher<PreviewerEventMap> {
// 粒子系统
particleSystem: new ParticleSystem(this),
// 3d tiles管理器
tilesManage: new TilesManage(this.scene),
tilesManage: new TilesManage(this.scene,this.camera,this.renderer),
}
}

15
packages/sdk/lib/core/viewer/Viewer.ts
View File

@ -236,6 +236,17 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
this.initEvent();
//监听视窗变化（节流）
let timer: NodeJS.Timeout | null = null;
const resizeObserver = new ResizeObserver(() => {
if (timer) return;
timer = setTimeout(() => {
useDispatchSignal("sceneResize", this.container.offsetWidth, this.container.offsetHeight);
timer = null;
}, 16)
});
resizeObserver.observe(this.container);
useDispatchSignal("viewerInitCompleted", this);
}
@ -478,7 +489,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
// 拖拽
dragControl: new Drag(this),
// 3d tiles管理器
tilesManage: new TilesManage(this.scene),
tilesManage: new TilesManage(this.scene,this.camera,this.renderer),
}
if (this.enableEdit) {
@ -786,7 +797,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
}
/**
* 更新宽高比
* 更新相机宽高比
*/
updateAspectRatio() {
for (const uuid in App.cameras) {

2
packages/sdk/lib/core/viewer/modules/Signals.ts
View File

@ -436,6 +436,8 @@ export class Signals {
this.viewer.modules.viewHelper.update();
this.viewer.modules.tilesManage.resize();
App.csm.updateFrustums();
this.render();
}

16
packages/sdk/lib/core/viewer/modules/TilesManage.ts
View File

@ -6,12 +6,14 @@
*/
import {TilesRenderer} from "3d-tiles-renderer";
import type {PriorityQueue} from "3d-tiles-renderer";
import {Mesh, Sphere, Vector3, Quaternion, Material, Scene} from 'three';
import {Mesh, Sphere, Vector3, Quaternion, Material, Scene, PerspectiveCamera, WebGLRenderer} from 'three';
import { MeshBVH,StaticGeometryGenerator,/*CENTER*/ } from 'three-mesh-bvh';
import Tiles from "@/core/objects/Tile.ts";
export class TilesManage {
private scene:Scene;
private camera: PerspectiveCamera;
private renderer: WebGLRenderer;
protected _tilesMergeMesh:Mesh | null = null;
@ -34,8 +36,10 @@ export class TilesManage {
needRender = false;
constructor(scene:Scene) {
constructor(scene:Scene,camera:PerspectiveCamera,renderer:WebGLRenderer) {
this.scene = scene;
this.camera = camera;
this.renderer = renderer;
}
/**
@ -136,6 +140,14 @@ export class TilesManage {
tiles.dispose();
}
resize(){
for (const tiles of this.tilesMap.values()) {
tiles.forEach(_tiles => {
_tiles.renderer.setResolutionFromRenderer(this.camera, this.renderer);
});
}
}
update() {
for (const tiles of this.tilesMap.values()) {
tiles.forEach(tile => tile.update());