10 changed files with 1367 additions and 934 deletions
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<div class="section-canvas"> |
|
||||
<div class="section-top-toolbar section-toolbar"> |
|
||||
<el-button type="primary" :icon="renderIcon('element TopLeft')" link></el-button> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable /> |
|
||||
</div> |
|
||||
<div class="section-content"></div> |
|
||||
<div class="section-bottom-toolbar section-toolbar"> |
|
||||
<div class="section-toolbar-left"> |
|
||||
<el-button type="primary" :icon="renderIcon('fa MousePointer')" link></el-button> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-button type="primary" :icon="renderIcon('element Aim')" link></el-button> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-button type="primary" :icon="renderIcon('antd LineOutlined')" link></el-button> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-button type="primary" :icon="renderIcon('icon5 BandageSharp')" link></el-button> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-button type="primary" :icon="renderIcon('antd InsertRowLeftOutlined')" link></el-button> |
|
||||
</div> |
|
||||
<div class="section-toolbar-right"> |
|
||||
<el-input v-model="searchKeyword" size="small" style="width: 110px" placeholder="Search"> |
|
||||
<template #prefix> |
|
||||
<component :is="renderIcon('element Search')"></component> |
|
||||
</template> |
|
||||
</el-input> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-text type="warning">1</el-text> |
|
||||
<span class="section-toolbar-line"></span> |
|
||||
<el-text type="danger">0</el-text> |
|
||||
<div class="infor"> |
|
||||
X=14.091,Y=12.397 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { renderIcon } from '@/utils/webutils.ts' |
|
||||
|
|
||||
export default { |
|
||||
name: 'Model2DEditor', |
|
||||
components: { |
|
||||
renderIcon |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
currentLevel: '', |
|
||||
searchKeyword: '', |
|
||||
sectionLeftSearch: '', |
|
||||
sectionRightSize: 0, |
|
||||
sectionBottomSize: 0, |
|
||||
hideRight: false, |
|
||||
hideBottom: false, |
|
||||
calcRightPanel: null, |
|
||||
calcBottomPanel: null |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
renderIcon |
|
||||
}, |
|
||||
computed: { |
|
||||
allLevels() { |
|
||||
return designer.allLevels |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<div class="section-canvas"> |
||||
|
<div class="section-top-toolbar section-toolbar"> |
||||
|
<span class="section-toolbar-line" style="margin-left: 85px;"></span> |
||||
|
<el-button :icon="renderIcon('antd ClusterOutlined')" link></el-button> |
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-cascader placeholder="选择楼层" size="small" v-model="view.currentLevel" :options="allLevels" filterable /> |
||||
|
</div> |
||||
|
<div class="section-content"> |
||||
|
<ThreeJsEditor v-if="view.currentLevel" :key="view.currentLevel" /> |
||||
|
</div> |
||||
|
<div class="section-bottom-toolbar section-toolbar"> |
||||
|
<div class="section-toolbar-left"> |
||||
|
<el-button title="鼠标状态 (ESC)" :icon="renderIcon('fa MousePointer')" link |
||||
|
:type="oper.currentMode==='normal'?'primary':''" |
||||
|
@click="()=>oper.currentMode = 'normal'"></el-button> |
||||
|
|
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-button title="框选模式 (T)" :icon="renderIcon('FullScreen')" link |
||||
|
:type="oper.currentMode==='selectByRec'?'primary':''" |
||||
|
@click="()=>oper.currentMode = 'selectByRec'"></el-button> |
||||
|
|
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-button title="物理流动线 (Z)" :icon="renderIcon('antd EnterOutlined')" link |
||||
|
:type="oper.currentMode==='ALink'?'primary':''" |
||||
|
@click="()=>oper.currentMode = 'ALink'"></el-button> |
||||
|
|
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-button title="逻辑关联 (X)" :icon="renderIcon('antd LinkOutlined')" link |
||||
|
:type="oper.currentMode==='SLink'?'primary':''" |
||||
|
@click="()=>oper.currentMode = 'SLink'"></el-button> |
||||
|
|
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-button title="测量工具" :icon="renderIcon('fa Ruler')" link |
||||
|
:type="oper.currentMode==='Ruler'?'primary':''" |
||||
|
@click="()=>oper.currentMode = 'Ruler'"></el-button> |
||||
|
</div> |
||||
|
<div class="section-toolbar-right"> |
||||
|
<el-input v-model="view.searchKeyword" size="small" style="width: 110px; margin-right: 5px;" |
||||
|
placeholder="Search"> |
||||
|
<template #prefix> |
||||
|
<component :is="renderIcon('element Search')"></component> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
<el-text type="warning">00001</el-text> |
||||
|
<span class="section-toolbar-line"></span> |
||||
|
<el-text type="danger">00011</el-text> |
||||
|
<div v-if="editorState.ready"> |
||||
|
{{ editorState.camera.position.x.toFixed(2) }},{{ editorState.camera.position.y.toFixed(2) }},{{ editorState.camera.position.z.toFixed(2) |
||||
|
}} |
||||
|
</div> |
||||
|
<div class="infor"> |
||||
|
X=14.091,Y=12.397 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Model2DEditorJs from './Model2DEditorJs.js' |
||||
|
|
||||
|
export default Model2DEditorJs |
||||
|
</script> |
||||
@ -0,0 +1,40 @@ |
|||||
|
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, |
||||
|
}, |
||||
|
} |
||||
@ -0,0 +1,330 @@ |
|||||
|
<template> |
||||
|
<div class="canvas-container" ref="canvasContainer" tabindex="1" /> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import * as THREE from 'three' |
||||
|
import $ from 'jquery' |
||||
|
import Stats from 'three/examples/jsm/libs/stats.module' |
||||
|
import { |
||||
|
ref, |
||||
|
onMounted, |
||||
|
nextTick, |
||||
|
reactive, |
||||
|
watch, |
||||
|
getCurrentInstance, |
||||
|
onUnmounted, |
||||
|
onBeforeUnmount, |
||||
|
defineExpose |
||||
|
} from 'vue' |
||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' |
||||
|
|
||||
|
// DOM refs |
||||
|
const canvasContainer = ref(null) |
||||
|
|
||||
|
// 窗口大小关联 |
||||
|
let resizeObserver |
||||
|
|
||||
|
// Three.js 场景相关 |
||||
|
let scene, camera, renderer, controls |
||||
|
let statsControls, axesHelper, gridHelper |
||||
|
|
||||
|
const state = designer.editorState |
||||
|
|
||||
|
function initMode2DCamera() { |
||||
|
if (camera) { |
||||
|
scene.remove(camera) |
||||
|
} |
||||
|
|
||||
|
// ============================ 创建正交相机 |
||||
|
const viewerDom = canvasContainer.value |
||||
|
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 |
||||
|
camera = cameraNew |
||||
|
scene.add(camera) |
||||
|
|
||||
|
// ============================ 创建控制器 |
||||
|
const controlsNew = new OrbitControls( |
||||
|
camera, |
||||
|
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 |
||||
|
controls = controlsNew |
||||
|
controlsNew.addEventListener('change', syncCameraState) |
||||
|
|
||||
|
camera.updateProjectionMatrix() |
||||
|
|
||||
|
syncCameraState() |
||||
|
} |
||||
|
|
||||
|
function initThree() { |
||||
|
const viewerDom = canvasContainer.value |
||||
|
|
||||
|
// 场景 |
||||
|
scene = new THREE.Scene() |
||||
|
scene.background = new THREE.Color(0xeeeeee) |
||||
|
|
||||
|
// 渲染器 |
||||
|
renderer = new THREE.WebGLRenderer({ |
||||
|
logarithmicDepthBuffer: true, |
||||
|
antialias: true, |
||||
|
alpha: true, |
||||
|
precision: 'mediump', |
||||
|
premultipliedAlpha: true, |
||||
|
preserveDrawingBuffer: false, |
||||
|
powerPreference: 'high-performance' |
||||
|
}) |
||||
|
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) |
||||
|
|
||||
|
// 创建正交摄像机 |
||||
|
initMode2DCamera() |
||||
|
|
||||
|
// 辅助线 |
||||
|
axesHelper = new THREE.AxesHelper(5) |
||||
|
scene.add(axesHelper) |
||||
|
|
||||
|
gridHelper = new THREE.GridHelper(500, 500) |
||||
|
gridHelper.material = new THREE.LineBasicMaterial({ |
||||
|
color: 0x888888, |
||||
|
opacity: 1, |
||||
|
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) |
||||
|
|
||||
|
// 性能监控 |
||||
|
statsControls = new Stats() |
||||
|
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) |
||||
|
camera.position.z = 5 |
||||
|
|
||||
|
animate() |
||||
|
} |
||||
|
|
||||
|
// 动画循环 |
||||
|
function animate() { |
||||
|
requestAnimationFrame(animate) |
||||
|
renderView() |
||||
|
} |
||||
|
|
||||
|
function renderView() { |
||||
|
statsControls?.update() |
||||
|
renderer?.render(scene, camera) |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const editor = getCurrentInstance() |
||||
|
nextTick(() => { |
||||
|
initThree() |
||||
|
|
||||
|
const viewerDom = canvasContainer.value |
||||
|
if (resizeObserver) { |
||||
|
resizeObserver.unobserve(viewerDom) |
||||
|
} |
||||
|
resizeObserver = new ResizeObserver(handleResize) |
||||
|
resizeObserver.observe(viewerDom) |
||||
|
|
||||
|
state.ready = true |
||||
|
|
||||
|
window['editor'] = editor |
||||
|
window['renderer'] = renderer |
||||
|
window['scene'] = scene |
||||
|
window['camera'] = camera |
||||
|
window['renderer'] = renderer |
||||
|
window['controls'] = controls |
||||
|
|
||||
|
viewerDom?.focus() |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
onBeforeUnmount(() => { |
||||
|
state.ready = false |
||||
|
|
||||
|
cleanupThree() |
||||
|
|
||||
|
const viewerDom = canvasContainer.value |
||||
|
if (resizeObserver) { |
||||
|
resizeObserver.unobserve(viewerDom) |
||||
|
} |
||||
|
|
||||
|
delete window['editor'] |
||||
|
delete window['renderer'] |
||||
|
delete window['scene'] |
||||
|
delete window['camera'] |
||||
|
delete window['renderer'] |
||||
|
delete window['controls'] |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
function handleResize(entries) { |
||||
|
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 (camera instanceof THREE.PerspectiveCamera) { |
||||
|
camera.aspect = width / height |
||||
|
camera.updateProjectionMatrix() |
||||
|
|
||||
|
} else if (camera instanceof THREE.OrthographicCamera) { |
||||
|
camera.left = width / -2 |
||||
|
camera.right = width / 2 |
||||
|
camera.top = height / 2 |
||||
|
camera.bottom = height / -2 |
||||
|
camera.updateProjectionMatrix() |
||||
|
} |
||||
|
renderer.setSize(width, height) |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
watch(() => state.camera.position.y, (newVal) => { |
||||
|
if (state.ready) { |
||||
|
updateGridVisibility() |
||||
|
} |
||||
|
}, { deep: true }) |
||||
|
|
||||
|
/** |
||||
|
* 根据可视化范围更新网格的透明度 |
||||
|
*/ |
||||
|
function updateGridVisibility() { |
||||
|
const cameraDistance = state.camera.position.y |
||||
|
const maxVisibleDistance = 60 // 网格完全可见的最大距离 |
||||
|
const fadeStartDistance = 10 // 开始淡出的距离 |
||||
|
|
||||
|
// 计算透明度（0~1） |
||||
|
let opacity = 1 |
||||
|
if (cameraDistance > fadeStartDistance) { |
||||
|
opacity = 1 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance), 1) |
||||
|
} |
||||
|
|
||||
|
// 修改网格材质透明度 |
||||
|
gridHelper.material.opacity = opacity |
||||
|
gridHelper.material.transparent = opacity < 1 |
||||
|
console.log('opacity', opacity) |
||||
|
} |
||||
|
|
||||
|
function cleanupThree() { |
||||
|
// 移除旧模型 |
||||
|
if (scene) { |
||||
|
scene.traverse((obj) => { |
||||
|
// 释放几何体 |
||||
|
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 = [] |
||||
|
} |
||||
|
|
||||
|
if (statsControls) { |
||||
|
statsControls.dom.remove() |
||||
|
} |
||||
|
|
||||
|
if (renderer) { |
||||
|
renderer.dispose() |
||||
|
renderer.forceContextLoss() |
||||
|
console.log('WebGL disposed, memory:', renderer.info.memory) |
||||
|
renderer.domElement = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function getEffectiveViewDistance() { |
||||
|
// 1. 获取相机到目标的距离 |
||||
|
const targetDistance = controls.target.distanceTo(camera.position) |
||||
|
|
||||
|
// 2. 计算当前视口高度（世界单位） |
||||
|
const viewHeight = (camera.top - camera.bottom) / camera.zoom |
||||
|
|
||||
|
// 3. 计算等效的透视相机距离 |
||||
|
// 假设我们希望匹配一个虚拟的透视相机（通常使用45度fov作为参考） |
||||
|
const referenceFOV = 45 // 参考视场角 |
||||
|
return viewHeight / (2 * Math.tan(THREE.MathUtils.degToRad(referenceFOV) / 2)) |
||||
|
} |
||||
|
|
||||
|
function syncCameraState() { |
||||
|
if (camera) { |
||||
|
state.camera.position.x = camera.position.x |
||||
|
state.camera.position.y = getEffectiveViewDistance() |
||||
|
state.camera.position.z = camera.position.z |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue