85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
<template>
|
|
<n-collapse-item name="casingDamageDisaster" title="套管损坏灾害">
|
|
<n-space vertical>
|
|
<n-space>
|
|
<n-button :disabled="hasDamage" type="primary" @click="applyDamage">
|
|
生成套管损害模型
|
|
</n-button>
|
|
<n-button :disabled="!hasDamage" type="error" @click="clearDamage">
|
|
移除套管损害模型
|
|
</n-button>
|
|
</n-space>
|
|
</n-space>
|
|
</n-collapse-item>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {onUnmounted, ref} from 'vue';
|
|
import {NButton, NCollapseItem, NSpace} from 'naive-ui';
|
|
import {useBus} from '@/hooks';
|
|
import {ParametricCylinder} from '@deep/engine';
|
|
import * as THREE from 'three/webgpu';
|
|
|
|
const bus = useBus();
|
|
const hasDamage = ref(false);
|
|
|
|
let damageCylinder: ParametricCylinder | null = null;
|
|
|
|
/**
|
|
* 应用损坏效果 - 生成套管损害圆柱体
|
|
*/
|
|
const applyDamage = () => {
|
|
const viewer = bus.getViewer();
|
|
|
|
const position = {x: 1.3, y: 1.1, z: 1.5};
|
|
|
|
const cylinder = new ParametricCylinder({
|
|
radiusTop: 0.155,
|
|
radiusBottom: 0.155,
|
|
height: 0.2,
|
|
//------ 圆柱上下不闭合 开始------
|
|
openEnded: true,
|
|
//------ 圆柱上下不闭合 结束------
|
|
//------ 圆柱细分优化 开始------
|
|
radialSegments: 96,
|
|
//------ 圆柱细分优化 结束------
|
|
material: new THREE.MeshBasicMaterial({
|
|
color: '#ff0000',
|
|
side: THREE.DoubleSide,
|
|
}),
|
|
});
|
|
cylinder.renderOrder = 1;
|
|
cylinder.position.set(position.x, position.y, position.z);
|
|
viewer!.scene.add(cylinder);
|
|
|
|
damageCylinder = cylinder;
|
|
hasDamage.value = true;
|
|
|
|
console.log('已生成套管损害圆柱体模型');
|
|
};
|
|
|
|
/**
|
|
* 清除损坏
|
|
*/
|
|
const clearDamage = () => {
|
|
const viewer = bus.getViewer();
|
|
|
|
if (damageCylinder) {
|
|
viewer!.scene.remove(damageCylinder);
|
|
damageCylinder.dispose();
|
|
damageCylinder = null;
|
|
}
|
|
|
|
hasDamage.value = false;
|
|
console.log('已清除套管损害模型');
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
clearDamage();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|