|
|
|
@ -5,11 +5,16 @@ |
|
|
|
<span>文件上传</span> |
|
|
|
</div> |
|
|
|
<div class="main-content"> |
|
|
|
<Split class="model3d-content" :direction="'horizontal'"> |
|
|
|
<SplitArea class="model3d-canvas" :size="70"> |
|
|
|
<!-- Three.js 渲染画布 --> |
|
|
|
<div class="canvas-container" ref="canvasContainer"></div> |
|
|
|
|
|
|
|
</SplitArea> |
|
|
|
<SplitArea class="model3d-gui" :size="30"> |
|
|
|
<!-- 右侧面板 --> |
|
|
|
<div class="gui-panel" ref="guiPanel"></div> |
|
|
|
</SplitArea> |
|
|
|
</Split> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -23,6 +28,8 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader' |
|
|
|
import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js' |
|
|
|
import Stats from 'three/examples/jsm/libs/stats.module' |
|
|
|
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js' |
|
|
|
import Split from '@/components/split/split.vue' |
|
|
|
import SplitArea from '@/components/split/split-area.vue' |
|
|
|
|
|
|
|
// DOM refs |
|
|
|
const canvasContainer = ref(null) |
|
|
|
@ -364,11 +371,12 @@ function handleFileUpload(event) { |
|
|
|
// modelGroup.scale.set(1, 1, 1) |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
<style scoped lang="less"> |
|
|
|
.model3d-view { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-grow: 1; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.dialog-container { |
|
|
|
display: flex; |
|
|
|
@ -386,19 +394,28 @@ function handleFileUpload(event) { |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
.model3d-content{ |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.canvas-container { |
|
|
|
flex: 3; |
|
|
|
width: 100%; |
|
|
|
height:100%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.gui-panel { |
|
|
|
flex: 1; |
|
|
|
border-left: 1px solid #ccc; |
|
|
|
background: #fff; |
|
|
|
padding: 10px; |
|
|
|
background: #111; |
|
|
|
width: 100%; |
|
|
|
height:100%; |
|
|
|
overflow-y: auto; |
|
|
|
:deep(.lil-gui.root){ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|