2 changed files with 402 additions and 157 deletions
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<div class="gui-row"> |
|||
<div class="gui-item-name"></div> |
|||
<div class="gui-item">X</div> |
|||
<div class="gui-item">Y</div> |
|||
<div class="gui-item">Z</div> |
|||
</div> |
|||
<div class="gui-row"> |
|||
<div class="gui-item-name"> |
|||
<component :is="renderIcon('element Rank')"></component> |
|||
</div> |
|||
<template v-if="!object3DIsNull"> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="position.x" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="position.y" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="position.z" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<div class="gui-row"> |
|||
<div class="gui-item-name"> |
|||
<component :is="renderIcon('element RefreshLeft')"></component> |
|||
</div> |
|||
<template v-if="!object3DIsNull"> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="radianX" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="radianY" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="radianZ" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<div class="gui-row"> |
|||
<div class="gui-item-name"> |
|||
<component :is="renderIcon('element ScaleToOriginal')"></component> |
|||
</div> |
|||
<template v-if="!object3DIsNull"> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="scale.x" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="scale.y" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
<div class="gui-item"> |
|||
<el-input-number v-model="scale.z" size="small" :precision="3" :controls="false" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import _ from 'lodash' |
|||
import { renderIcon } from '@/utils/webutils.js' |
|||
import { markRaw } from 'vue' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
object3D: null, |
|||
object3DIsNull: true, |
|||
isBindable: false, |
|||
position: { x: 0, y: 0, z: 0 }, |
|||
rotation: { x: 0, y: 0, z: 0 }, |
|||
scale: { x: 1, y: 1, z: 1 } |
|||
} |
|||
}, |
|||
mounted() { |
|||
window['cc'] = this |
|||
}, |
|||
methods: { |
|||
renderIcon, |
|||
refreshData(object3D) { |
|||
|
|||
if (!object3D) { |
|||
object3D = this.object3D |
|||
} |
|||
if (!object3D) { |
|||
return |
|||
} |
|||
|
|||
this.isBindable = false |
|||
this.$nextTick(() => { |
|||
this.isBindable = true |
|||
}) |
|||
|
|||
this.position.x = object3D.position.x |
|||
this.position.y = object3D.position.y |
|||
this.position.z = object3D.position.z |
|||
|
|||
this.rotation.x = object3D.rotation.x |
|||
this.rotation.y = object3D.rotation.y |
|||
this.rotation.z = object3D.rotation.z |
|||
|
|||
this.scale.x = object3D.scale.x |
|||
this.scale.y = object3D.scale.y |
|||
this.scale.z = object3D.scale.z |
|||
}, |
|||
attachObject3D(object3D) { |
|||
if (!object3D) { |
|||
this.detach() |
|||
return |
|||
} |
|||
this.object3D = markRaw(object3D) |
|||
|
|||
this.refreshData(object3D) |
|||
|
|||
this.object3DIsNull = false |
|||
|
|||
|
|||
}, |
|||
detach() { |
|||
console.log('detach Object3D') |
|||
this.object3D = null |
|||
this.object3DIsNull = true |
|||
} |
|||
}, |
|||
watch: { |
|||
position: { |
|||
deep: true, |
|||
handler(newVal) { |
|||
if (!this.object3DIsNull && this.isBindable) { |
|||
this.object3D.position.x = newVal.x |
|||
this.object3D.position.y = newVal.y |
|||
this.object3D.position.z = newVal.z |
|||
} |
|||
} |
|||
}, |
|||
rotation: { |
|||
deep: true, |
|||
handler(newVal) { |
|||
if (!this.object3DIsNull && this.isBindable) { |
|||
this.object3D.rotation.x = newVal.x |
|||
this.object3D.rotation.y = newVal.y |
|||
this.object3D.rotation.z = newVal.z |
|||
} |
|||
} |
|||
}, |
|||
scale: { |
|||
deep: true, |
|||
handler(newVal) { |
|||
if (!this.object3DIsNull && this.isBindable) { |
|||
this.object3D.scale.x = newVal.x |
|||
this.object3D.scale.y = newVal.y |
|||
this.object3D.scale.z = newVal.z |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// 弧度转角度 |
|||
radianX: { |
|||
get() { |
|||
return Math.round(this.rotation.x * 180 / Math.PI) |
|||
}, |
|||
set(newVal) { |
|||
this.rotation.x = newVal * Math.PI / 180 |
|||
} |
|||
}, |
|||
radianY: { |
|||
get() { |
|||
return Math.round(this.rotation.y * 180 / Math.PI) |
|||
}, |
|||
set(newVal) { |
|||
this.rotation.y = newVal * Math.PI / 180 |
|||
} |
|||
}, |
|||
radianZ: { |
|||
get() { |
|||
return Math.round(this.rotation.z * 180 / Math.PI) |
|||
}, |
|||
set(newVal) { |
|||
this.rotation.z = newVal * Math.PI / 180 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="less"> |
|||
.gui-toolbar { |
|||
color: #fff; |
|||
|
|||
.el-input-number.is-without-controls .el-input__wrapper { |
|||
padding-left: 2px; |
|||
padding-right: 2px; |
|||
} |
|||
|
|||
.gui-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
gap: 3px; |
|||
padding: 3px 0; |
|||
|
|||
.gui-item-name { |
|||
width: 26px; |
|||
align-self: stretch; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.el-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.gui-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
|
|||
.el-input-number { |
|||
width: 100%; |
|||
|
|||
.el-input__wrapper { |
|||
background-color: #424242; |
|||
box-shadow: none |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue