style(resize): 三维视口Resize监听放入sdk中;3DTiles模型新增视口Resize时的自动处理
This commit is contained in:
parent
2029cbfa30
commit
87acdc4896
@ -53,17 +53,6 @@ onMounted(async () => {
|
|||||||
|
|
||||||
// 注册astral editor内置插件
|
// 注册astral editor内置插件
|
||||||
installBuiltinPlugin(window.viewer);
|
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(() => {
|
onBeforeUnmount(() => {
|
||||||
|
|||||||
@ -44,17 +44,6 @@ onMounted(async () => {
|
|||||||
|
|
||||||
await nextTick();
|
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();
|
await init();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -155,7 +155,7 @@ export default class Preview extends THREE.EventDispatcher<PreviewerEventMap> {
|
|||||||
// 粒子系统
|
// 粒子系统
|
||||||
particleSystem: new ParticleSystem(this),
|
particleSystem: new ParticleSystem(this),
|
||||||
// 3d tiles管理器
|
// 3d tiles管理器
|
||||||
tilesManage: new TilesManage(this.scene),
|
tilesManage: new TilesManage(this.scene,this.camera,this.renderer),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -236,6 +236,17 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
|
|||||||
|
|
||||||
this.initEvent();
|
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);
|
useDispatchSignal("viewerInitCompleted", this);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -478,7 +489,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
|
|||||||
// 拖拽
|
// 拖拽
|
||||||
dragControl: new Drag(this),
|
dragControl: new Drag(this),
|
||||||
// 3d tiles管理器
|
// 3d tiles管理器
|
||||||
tilesManage: new TilesManage(this.scene),
|
tilesManage: new TilesManage(this.scene,this.camera,this.renderer),
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.enableEdit) {
|
if (this.enableEdit) {
|
||||||
@ -786,7 +797,7 @@ export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 更新宽高比
|
* 更新相机宽高比
|
||||||
*/
|
*/
|
||||||
updateAspectRatio() {
|
updateAspectRatio() {
|
||||||
for (const uuid in App.cameras) {
|
for (const uuid in App.cameras) {
|
||||||
|
|||||||
@ -436,6 +436,8 @@ export class Signals {
|
|||||||
|
|
||||||
this.viewer.modules.viewHelper.update();
|
this.viewer.modules.viewHelper.update();
|
||||||
|
|
||||||
|
this.viewer.modules.tilesManage.resize();
|
||||||
|
|
||||||
App.csm.updateFrustums();
|
App.csm.updateFrustums();
|
||||||
this.render();
|
this.render();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,12 +6,14 @@
|
|||||||
*/
|
*/
|
||||||
import {TilesRenderer} from "3d-tiles-renderer";
|
import {TilesRenderer} from "3d-tiles-renderer";
|
||||||
import type {PriorityQueue} 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 { MeshBVH,StaticGeometryGenerator,/*CENTER*/ } from 'three-mesh-bvh';
|
||||||
import Tiles from "@/core/objects/Tile.ts";
|
import Tiles from "@/core/objects/Tile.ts";
|
||||||
|
|
||||||
export class TilesManage {
|
export class TilesManage {
|
||||||
private scene:Scene;
|
private scene:Scene;
|
||||||
|
private camera: PerspectiveCamera;
|
||||||
|
private renderer: WebGLRenderer;
|
||||||
|
|
||||||
protected _tilesMergeMesh:Mesh | null = null;
|
protected _tilesMergeMesh:Mesh | null = null;
|
||||||
|
|
||||||
@ -34,8 +36,10 @@ export class TilesManage {
|
|||||||
|
|
||||||
needRender = false;
|
needRender = false;
|
||||||
|
|
||||||
constructor(scene:Scene) {
|
constructor(scene:Scene,camera:PerspectiveCamera,renderer:WebGLRenderer) {
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
this.camera = camera;
|
||||||
|
this.renderer = renderer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -136,6 +140,14 @@ export class TilesManage {
|
|||||||
tiles.dispose();
|
tiles.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resize(){
|
||||||
|
for (const tiles of this.tilesMap.values()) {
|
||||||
|
tiles.forEach(_tiles => {
|
||||||
|
_tiles.renderer.setResolutionFromRenderer(this.camera, this.renderer);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
for (const tiles of this.tilesMap.values()) {
|
for (const tiles of this.tilesMap.values()) {
|
||||||
tiles.forEach(tile => tile.update());
|
tiles.forEach(tile => tile.update());
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user