8 changed files with 563 additions and 106 deletions
@ -0,0 +1,336 @@ |
|||
import _ from 'lodash' |
|||
import * as THREE from 'three' |
|||
import { AxesHelper, GridHelper, OrthographicCamera, Scene, WebGLRenderer } from 'three' |
|||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' |
|||
import Stats from 'three/examples/jsm/libs/stats.module' |
|||
import type WorldModel from '@/designer/WorldModel.ts' |
|||
import $ from 'jquery' |
|||
import { watch } from 'vue' |
|||
|
|||
/** |
|||
* 编辑器对象 |
|||
* 这是非双向绑定的设计器对象，不记录状态，只记录全局使用到的对象，(实体类使用) |
|||
*/ |
|||
export default class Viewport { |
|||
viewerDom: HTMLElement |
|||
scene: Scene |
|||
camera: OrthographicCamera |
|||
renderer: WebGLRenderer |
|||
axesHelper: AxesHelper |
|||
gridHelper: GridHelper |
|||
statsControls: Stats |
|||
controls: OrbitControls |
|||
worldModel: WorldModel |
|||
|
|||
/** |
|||
* 监听窗口大小变化 |
|||
*/ |
|||
resizeObserver?: ResizeObserver |
|||
|
|||
unwatchList: (() => void)[] = [] |
|||
|
|||
state: ViewportState = { |
|||
currentFloor: null, |
|||
isReady: false, |
|||
cursorMode: 'normal', |
|||
camera: { |
|||
position: { x: 0, y: 0, z: 0 }, |
|||
rotation: { x: 0, y: 0, z: 0 } |
|||
} |
|||
} |
|||
|
|||
constructor(worldModel: WorldModel) { |
|||
this.worldModel = worldModel |
|||
} |
|||
|
|||
/** |
|||
* 初始化 THREE 渲染器 |
|||
*/ |
|||
initThree(viewerDom: HTMLElement) { |
|||
this.viewerDom = viewerDom |
|||
this.worldModel.registerViewport(this) |
|||
|
|||
// 场景
|
|||
const scene = this.worldModel.getSceneByFloor(this.state.currentFloor) |
|||
this.scene = scene |
|||
|
|||
// 渲染器
|
|||
const renderer = new THREE.WebGLRenderer({ |
|||
logarithmicDepthBuffer: true, |
|||
antialias: true, |
|||
alpha: true, |
|||
precision: 'mediump', |
|||
premultipliedAlpha: true, |
|||
preserveDrawingBuffer: false, |
|||
powerPreference: 'high-performance' |
|||
}) |
|||
//@ts-ignore
|
|||
renderer.outputEncoding = THREE.SRGBColorSpace |
|||
renderer.clearDepth() |
|||
renderer.shadowMap.enabled = true |
|||
renderer.toneMapping = THREE.ACESFilmicToneMapping |
|||
renderer.setPixelRatio(window.devicePixelRatio) |
|||
renderer.setSize(viewerDom.getBoundingClientRect().width, viewerDom.getBoundingClientRect().height) |
|||
viewerDom.appendChild(renderer.domElement) |
|||
this.renderer = renderer |
|||
|
|||
// 创建正交摄像机
|
|||
this.initMode2DCamera() |
|||
|
|||
// 辅助线
|
|||
this.axesHelper = new THREE.AxesHelper(3) |
|||
this.scene.add(this.axesHelper) |
|||
|
|||
this.gridHelper = new THREE.GridHelper(500, 500) |
|||
const gridHelper = this.gridHelper |
|||
gridHelper.material = new THREE.LineBasicMaterial({ |
|||
color: 0x888888, |
|||
opacity: 0.8, |
|||
transparent: true |
|||
}) |
|||
|
|||
scene.add(gridHelper) |
|||
|
|||
// 光照
|
|||
const ambientLight = new THREE.AmbientLight(0xffffff, 1.5) |
|||
scene.add(ambientLight) |
|||
|
|||
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) |
|||
directionalLight.position.set(5, 5, 5).multiplyScalar(3) |
|||
directionalLight.castShadow = true |
|||
scene.add(directionalLight) |
|||
|
|||
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1) |
|||
scene.add(hemisphereLight) |
|||
|
|||
// 性能监控
|
|||
const statsControls = new Stats() |
|||
this.statsControls = statsControls |
|||
statsControls.showPanel(0) |
|||
statsControls.dom.style.position = 'absolute' |
|||
statsControls.dom.style.top = '2px' |
|||
statsControls.dom.style.left = '0' |
|||
viewerDom.appendChild(statsControls.dom) |
|||
$(statsControls.dom).children().css('height', '28px') |
|||
|
|||
// 创建几何体和材质
|
|||
const geometry = new THREE.BoxGeometry(1, 1, 1) |
|||
const material = new THREE.MeshStandardMaterial({ |
|||
color: 0xcccccc, |
|||
metalness: 0.9, |
|||
roughness: 0.1 |
|||
}) |
|||
|
|||
const cube = new THREE.Mesh(geometry, material) |
|||
scene.add(cube) |
|||
this.camera.position.z = 5 |
|||
|
|||
this.animate() |
|||
|
|||
const unWatchFn = watch(() => this.state.camera.position.y, (newVal) => { |
|||
if (this.state.isReady) { |
|||
this.updateGridVisibility() |
|||
} |
|||
}) |
|||
this.unwatchList.push(unWatchFn) |
|||
|
|||
if (this.resizeObserver) { |
|||
this.resizeObserver.unobserve(this.viewerDom) |
|||
} |
|||
this.resizeObserver = new ResizeObserver(this.handleResize.bind(this)) |
|||
this.resizeObserver.observe(this.viewerDom) |
|||
|
|||
this.state.isReady = true |
|||
} |
|||
|
|||
/** |
|||
* 初始化2D相机 |
|||
*/ |
|||
initMode2DCamera() { |
|||
if (this.camera) { |
|||
this.scene.remove(this.camera) |
|||
} |
|||
|
|||
// ============================ 创建正交相机
|
|||
const viewerDom = this.viewerDom |
|||
const cameraNew = new THREE.OrthographicCamera( |
|||
viewerDom.clientWidth / -2, |
|||
viewerDom.clientWidth / 2, |
|||
viewerDom.clientHeight / 2, |
|||
viewerDom.clientHeight / -2, |
|||
1, |
|||
500 |
|||
) |
|||
cameraNew.position.set(0, 100, 0) |
|||
cameraNew.lookAt(0, 0, 0) |
|||
cameraNew.zoom = 30 |
|||
this.camera = cameraNew |
|||
this.scene.add(this.camera) |
|||
|
|||
// ============================ 创建控制器
|
|||
const controlsNew = new OrbitControls( |
|||
this.camera, |
|||
this.renderer.domElement |
|||
) |
|||
controlsNew.enableDamping = false |
|||
controlsNew.enableZoom = true |
|||
controlsNew.enableRotate = false |
|||
controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN } // 鼠标中键平移
|
|||
controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
|
|||
controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件
|
|||
controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' } |
|||
controlsNew.panSpeed = 1 |
|||
controlsNew.keyPanSpeed = 20 // normal 7
|
|||
controlsNew.minDistance = 0.1 |
|||
controlsNew.maxDistance = 1000 |
|||
this.controls = controlsNew |
|||
controlsNew.addEventListener('change', this.syncCameraState.bind(this)) |
|||
|
|||
this.camera.updateProjectionMatrix() |
|||
|
|||
this.syncCameraState() |
|||
} |
|||
|
|||
/** |
|||
* 动画循环 |
|||
*/ |
|||
animate() { |
|||
requestAnimationFrame(this.animate.bind(this)) |
|||
this.renderView() |
|||
} |
|||
|
|||
/** |
|||
* 渲染视图 |
|||
*/ |
|||
renderView() { |
|||
this.statsControls?.update() |
|||
this.renderer?.render(this.scene, this.camera) |
|||
} |
|||
|
|||
/** |
|||
* 同步相机状态到全局状态 |
|||
*/ |
|||
syncCameraState() { |
|||
if (this.camera) { |
|||
const camera = this.camera |
|||
|
|||
this.state.camera.position.x = camera.position.x |
|||
this.state.camera.position.y = this.getEffectiveViewDistance() |
|||
this.state.camera.position.z = camera.position.z |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 计算相机到目标的有效视距 |
|||
*/ |
|||
getEffectiveViewDistance() { |
|||
if (!this.camera) { |
|||
return 10 |
|||
} |
|||
const camera = this.camera |
|||
const viewHeight = (camera.top - camera.bottom) / camera.zoom |
|||
// 假设我们希望匹配一个虚拟的透视相机（通常使用45度fov作为参考）
|
|||
const referenceFOV = 45 // 参考视场角
|
|||
return viewHeight / (2 * Math.tan(THREE.MathUtils.degToRad(referenceFOV) / 2)) |
|||
} |
|||
|
|||
handleResize(entries: any) { |
|||
for (let entry of entries) { |
|||
// entry.contentRect包含了元素的尺寸信息
|
|||
console.log('Element size changed:', entry.contentRect) |
|||
|
|||
const width = entry.contentRect.width |
|||
const height = entry.contentRect.height |
|||
|
|||
if (this.camera instanceof THREE.PerspectiveCamera) { |
|||
this.camera.aspect = width / height |
|||
this.camera.updateProjectionMatrix() |
|||
|
|||
} else if (this.camera instanceof THREE.OrthographicCamera) { |
|||
this.camera.left = width / -2 |
|||
this.camera.right = width / 2 |
|||
this.camera.top = height / 2 |
|||
this.camera.bottom = height / -2 |
|||
this.camera.updateProjectionMatrix() |
|||
} |
|||
|
|||
this.renderer.setSize(width, height) |
|||
break |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据可视化范围更新网格的透明度 |
|||
*/ |
|||
updateGridVisibility() { |
|||
const cameraDistance = this.state.camera.position.y |
|||
const maxVisibleDistance = 60 // 网格完全可见的最大距离
|
|||
const fadeStartDistance = 15 // 开始淡出的距离
|
|||
|
|||
// 计算透明度（0~1）
|
|||
let opacity = 1 |
|||
if (cameraDistance > fadeStartDistance) { |
|||
opacity = 1 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance), 1) |
|||
} |
|||
|
|||
// 修改网格材质透明度
|
|||
this.gridHelper.material.opacity = opacity |
|||
this.gridHelper.visible = opacity > 0 |
|||
console.log('opacity', opacity) |
|||
} |
|||
|
|||
destroy() { |
|||
this.state.isReady = false |
|||
|
|||
if (this.unwatchList) { |
|||
_.forEach(this.unwatchList, (unWatchFn => { |
|||
unWatchFn() |
|||
})) |
|||
this.unwatchList = [] |
|||
} |
|||
|
|||
if (this.resizeObserver) { |
|||
this.resizeObserver.unobserve(this.viewerDom) |
|||
this.resizeObserver.disconnect() |
|||
this.resizeObserver = undefined |
|||
} |
|||
|
|||
this.worldModel.unregisterViewport(this) |
|||
|
|||
if (this.statsControls) { |
|||
this.statsControls.dom.remove() |
|||
} |
|||
|
|||
if (this.renderer) { |
|||
this.renderer.dispose() |
|||
this.renderer.forceContextLoss() |
|||
console.log('WebGL disposed, memory:', this.renderer.info.memory) |
|||
this.renderer.domElement = null |
|||
} |
|||
} |
|||
} |
|||
|
|||
export interface ViewportState { |
|||
/** |
|||
* 当前楼层 |
|||
*/ |
|||
currentFloor: string |
|||
|
|||
/** |
|||
* 是否准备完成 |
|||
*/ |
|||
isReady: boolean |
|||
|
|||
/** |
|||
* 鼠标模式 |
|||
*/ |
|||
cursorMode: 'normal' | 'ALink' | 'SLink' | 'PointCallback' | 'PointAdd' | 'LinkAdd' | 'LinkAdd2' | 'Ruler' | 'selectByRec', |
|||
|
|||
/** |
|||
* 相机状态 |
|||
*/ |
|||
camera: { |
|||
position: { x: number, y: number, z: number }, |
|||
rotation: { x: number, y: number, z: number } |
|||
} |
|||
} |
|||
@ -0,0 +1,130 @@ |
|||
import _ from 'lodash' |
|||
import Example1 from './example1' |
|||
import { markRaw, reactive } from 'vue' |
|||
import { Scene } from 'three' |
|||
import type Viewport from '@/designer/Viewport.ts' |
|||
import * as THREE from 'three' |
|||
|
|||
/** |
|||
* 世界模型 |
|||
*/ |
|||
export default class WorldModel { |
|||
data: any = null |
|||
allLevels: any = null |
|||
sceneMap = new Map<string, Scene>() |
|||
viewPorts: Viewport[] = [] |
|||
|
|||
constructor() { |
|||
this.init() |
|||
this.open() |
|||
} |
|||
|
|||
init() { |
|||
window['worldModel'] = this |
|||
} |
|||
|
|||
open() { |
|||
if (this.sceneMap.size > 0) { |
|||
// 释放旧场景
|
|||
this.sceneMap.forEach((scene: Scene) => { |
|||
this.sceneDispose(scene) |
|||
}) |
|||
} |
|||
if (this.viewPorts.length > 0) { |
|||
// 注销视口
|
|||
this.viewPorts.forEach((viewport: Viewport) => { |
|||
this.unregisterViewport(viewport) |
|||
}) |
|||
} |
|||
|
|||
system.msg('打开世界地图完成') |
|||
this.data = markRaw(Example1) |
|||
this.allLevels = reactive(this.data.allLevels) |
|||
} |
|||
|
|||
/** |
|||
* 获取当前楼层的场景, 如果没有则创建一个新的场景 |
|||
* @param floor |
|||
*/ |
|||
getSceneByFloor(floor: string) { |
|||
if (this.sceneMap.has(floor)) { |
|||
return this.sceneMap.get(floor) |
|||
} else { |
|||
const scene = this.createScene(floor) |
|||
|
|||
this.sceneMap.set(floor, scene) |
|||
return scene |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 创建一个新的场景 |
|||
*/ |
|||
createScene(floor: string) { |
|||
const scene = new Scene() |
|||
scene.background = new THREE.Color(0xeeeeee) |
|||
return scene |
|||
} |
|||
|
|||
/** |
|||
* 注册视口 |
|||
*/ |
|||
registerViewport(viewport: Viewport) { |
|||
this.viewPorts = this.viewPorts || [] |
|||
this.viewPorts.push(viewport) |
|||
} |
|||
|
|||
/** |
|||
* 注销视口 |
|||
*/ |
|||
unregisterViewport(viewport: Viewport) { |
|||
const index = this.viewPorts.indexOf(viewport) |
|||
if (index > -1) { |
|||
this.viewPorts.splice(index, 1) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 销毁场景, 释放全部 WebGL 资源 |
|||
*/ |
|||
sceneDispose(scene: Scene = null) { |
|||
// 移除旧模型
|
|||
if (!scene) { |
|||
return |
|||
} |
|||
|
|||
scene.traverse((obj: any) => { |
|||
// 释放几何体
|
|||
if (obj.geometry) { |
|||
obj.geometry.dispose() |
|||
} |
|||
|
|||
// 释放材质
|
|||
if (obj.material) { |
|||
if (Array.isArray(obj.material)) { |
|||
obj.material.forEach(m => m.dispose()) |
|||
} else { |
|||
obj.material.dispose() |
|||
} |
|||
} |
|||
|
|||
// 释放纹理
|
|||
if (obj.texture) { |
|||
obj.texture.dispose() |
|||
} |
|||
|
|||
// 释放渲染目标
|
|||
if (obj.renderTarget) { |
|||
obj.renderTarget.dispose() |
|||
} |
|||
|
|||
// 移除事件监听（如 OrbitControls）
|
|||
if (obj.dispose) { |
|||
obj.dispose() |
|||
} |
|||
}) |
|||
|
|||
// 清空场景
|
|||
scene.children = [] |
|||
} |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import { defineComponent, markRaw } from 'vue' |
|||
import Viewport from '@/designer/Viewport.ts' |
|||
|
|||
export default defineComponent({ |
|||
name: 'Model2DEditor', |
|||
data() { |
|||
const viewport = new Viewport(worldModel) |
|||
|
|||
return { |
|||
viewport: viewport, |
|||
view: { |
|||
searchKeyword: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
window['editor'] = this |
|||
}, |
|||
beforeMount() { |
|||
this.initByFloor('') |
|||
delete window['editor'] |
|||
}, |
|||
methods: { |
|||
renderIcon, |
|||
initByFloor(floor) { |
|||
const viewportOrigin = this.viewport |
|||
if (viewportOrigin && viewportOrigin.state.isReady) { |
|||
viewportOrigin.destroy() |
|||
this.viewport = null |
|||
return |
|||
} |
|||
|
|||
delete window['editor'] |
|||
delete window['viewport'] |
|||
delete window['scene'] |
|||
delete window['renderer'] |
|||
delete window['camera'] |
|||
delete window['renderer'] |
|||
delete window['controls'] |
|||
|
|||
if (!floor) { |
|||
return |
|||
} |
|||
|
|||
const viewerDom = this.$refs.canvasContainer |
|||
const viewport = markRaw(new Viewport(worldModel)) |
|||
this.viewport = viewport |
|||
|
|||
viewport.initThree(viewerDom) |
|||
|
|||
window['viewport'] = viewport |
|||
window['scene'] = viewport.scene |
|||
window['renderer'] = viewport.renderer |
|||
window['camera'] = viewport.camera |
|||
window['renderer'] = viewport.renderer |
|||
window['controls'] = viewport.controls |
|||
|
|||
viewerDom?.focus() |
|||
} |
|||
}, |
|||
watch: { |
|||
'state.currentFloor'(newVal, oldVal) { |
|||
this.initByFloor(newVal) |
|||
} |
|||
}, |
|||
computed: { |
|||
/** |
|||
* @returns {ViewportState|{}} |
|||
*/ |
|||
state() { |
|||
return this.viewport?.state || {} |
|||
}, |
|||
allLevels() { |
|||
return worldModel.allLevels |
|||
} |
|||
} |
|||
}) |
|||
@ -1,40 +0,0 @@ |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import { defineComponent } from 'vue' |
|||
import ThreeJsEditor from './ThreeJsEditor.vue' |
|||
|
|||
export default defineComponent({ |
|||
name: 'Model2DEditor', |
|||
components: { ThreeJsEditor }, |
|||
data() { |
|||
return { |
|||
oper: { |
|||
currentMode: 'normal' |
|||
}, |
|||
view: { |
|||
currentLevel: '', |
|||
searchKeyword: '' |
|||
} |
|||
} as IData |
|||
}, |
|||
methods: { |
|||
renderIcon |
|||
}, |
|||
computed: { |
|||
editorState() { |
|||
return designer.editorState |
|||
}, |
|||
allLevels() { |
|||
return designer.allLevels |
|||
} |
|||
} |
|||
}) |
|||
|
|||
export interface IData { |
|||
oper: { |
|||
currentMode: 'normal' | 'ALink' | 'SLink' | 'PointCallback' | 'PointAdd' | 'LinkAdd' | 'LinkAdd2' | 'Ruler' | 'selectByRec', |
|||
}, |
|||
view: { |
|||
currentLevel: string, |
|||
searchKeyword: string, |
|||
}, |
|||
} |
|||
@ -1,49 +0,0 @@ |
|||
<template> |
|||
<div class="canvas-container" ref="canvasContainer" tabindex="1" /> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue' |
|||
import Viewport from '@/designer/Viewport.ts' |
|||
|
|||
// DOM refs |
|||
const canvasContainer = ref<HTMLElement>(null) |
|||
|
|||
// Three.js 场景相关 |
|||
let viewport: Viewport |
|||
|
|||
onMounted(() => { |
|||
const instance = getCurrentInstance() |
|||
nextTick(() => { |
|||
const viewerDom = canvasContainer.value |
|||
if (!viewerDom) { |
|||
system.showErrorDialog('viewerDom is null') |
|||
return |
|||
} |
|||
|
|||
viewport = new Viewport(worldModel) |
|||
viewport.initThree(viewerDom) |
|||
|
|||
window['editor'] = instance |
|||
window['viewport'] = viewport |
|||
window['scene'] = viewport.scene |
|||
window['renderer'] = viewport.renderer |
|||
window['camera'] = viewport.camera |
|||
window['renderer'] = viewport.renderer |
|||
window['controls'] = viewport.controls |
|||
|
|||
viewerDom?.focus() |
|||
}) |
|||
}) |
|||
|
|||
onBeforeUnmount(() => { |
|||
viewport.destroy() |
|||
|
|||
delete window['editor'] |
|||
delete window['viewport'] |
|||
delete window['scene'] |
|||
delete window['renderer'] |
|||
delete window['camera'] |
|||
delete window['renderer'] |
|||
delete window['controls'] |
|||
}) |
|||
</script> |
|||
Loading…
Reference in new issue