- ![]()
+
-
+
+
模型名称
@@ -33,19 +33,110 @@
import { ref, reactive } from 'vue'
import { inject } from 'vue'
import Dialog from '@/components/dialog/baseDialog.vue'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { debounce } from '@/utils'
+import { ModelApi } from '@/api/model/index'
+import { ElMessage } from 'element-plus'
const baseDialog: any = ref(null)
const eventBus: any = inject('bus')
const viewPointHeight: any = ref(1.8)
var rowData: any = reactive([])
+var imageData: any = ref(null)
var newData: any = reactive({
name: ''
})
eventBus.on('imagePopDialog', (data) => {
- console.log(data, 'data')
rowData = data
+ rowData.name = data.modelName
baseDialog.value?.open()
+ setTimeout(() => {
+ initThreeJS()
+ loadModel()
+ animate()
+ })
})
+//----------------模型预览---------------
+const threeCanvas = ref(null)
+let scene, camera, renderer, model, controls
+
+const initThreeJS = () => {
+ // 创建场景
+ scene = new THREE.Scene()
+ scene.background = new THREE.Color(0xbfd1e5)
+ // scene.fog = new THREE.Fog(0xbfd1e5, 200, 1000)
+
+ // 创建相机
+ camera = new THREE.PerspectiveCamera(
+ 75,
+ threeCanvas.value.clientWidth / threeCanvas.value.clientHeight,
+ 0.1,
+ 1000
+ )
+ camera.position.set(0, 1, 5)
+ camera.lookAt(0, 0, 0)
+
+ // 创建渲染器并添加到DOM中
+ renderer = new THREE.WebGLRenderer({
+ preserveDrawingBuffer: true,
+ antialias: true
+ })
+ renderer.setSize(threeCanvas.value.clientWidth, threeCanvas.value.clientHeight)
+ renderer.setPixelRatio(window.devicePixelRatio)
+ threeCanvas.value.appendChild(renderer.domElement)
+
+ // 控制器
+ controls = new OrbitControls(camera, renderer.domElement)
+ controls.enableDamping = true // 启用阻尼，增加平滑度
+ controls.dampingFactor = 0.05 // 阻尼系数，默认为0.25
+ controls.screenSpacePanning = false // 平移时是否在屏幕空间中移动，默认false，即在世界空间中移动
+ controls.minDistance = 1 // 最小距离，默认无限制
+ controls.maxDistance = 500 // 最大距离，默认无限制
+ controls.enableZoom = true // 是否可以缩放，默认true
+ controls.zoomSpeed = 1.0 // 缩放速度，默认1.0
+ controls.rotateSpeed = 1.0 // 旋转速度，默认1.0
+ controls.addEventListener('change', render) // 监听控制器变化进行重渲染
+
+ // 添加环境光和点光源
+ const ambientLight = new THREE.AmbientLight(0x404040, 1) // 环境光
+ scene.add(ambientLight)
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
+ scene.add(directionalLight)
+ const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1)
+ scene.add(light)
+ const pointLight = new THREE.PointLight(0xffffff, 0.8) // 点光源
+ pointLight.position.set(10, 10, 10)
+ pointLight.lookAt(0, 0, 0)
+ scene.add(pointLight)
+}
+const loadModel = () => {
+ const loader = new GLTFLoader()
+ loader.load(
+ 'http://127.0.0.1:8848' + rowData.data, // 模型路径
+ function (gltf) {
+ // onLoad回调函数
+ model = gltf.scene
+ model.position.set(0, 0, 0)
+ scene.add(model) // 将模型添加到场景中
+ },
+ undefined, // onProgress回调函数，可选参数，用于处理加载进度等，这里不使用所以设置为undefined或提供具体实现函数。
+ function (error) {
+ // onError回调函数，处理加载错误等。
+ console.error('An error happened while loading the model', error)
+ }
+ )
+}
+const render = () => {
+ renderer.render(scene, camera) // 重渲染当前场景和相机状态，通常用于控制器监听事件中调用
+}
+
+const animate = () => {
+ requestAnimationFrame(animate) // 循环调用animate函数实现动画效果。
+ controls.update() // 更新控制器状态
+ renderer.render(scene, camera) // 渲染场景和相机。
+}
const clangeViewPointHeight = () => {}
const viewPointHeightInput = () => {
@@ -57,16 +148,37 @@ const viewPointHeightInput = () => {
}
}
const closeCallBack = (e) => {
+ renderer.domElement.remove() // 从DOM中移除渲染器。
+ imageData.value = null
+ rowData = []
+ newData.name = ''
//打开系统设置弹框
eventBus.emit('settingPop', true)
}
+
+var posterLoading: any = ref(false)
const setImage = (e) => {
- baseDialog.value?.close()
+ renderer.render(scene, camera) // 确保场景已渲染
+ const canvas = renderer.domElement
+
+ canvas.toBlob((blob) => {
+ imageData.value = blob
+ ElMessage.warning('点击保存是会应用当前图片')
+ }, 'image/png')
}
const close = (e) => {
baseDialog.value?.close()
}
const save = (e) => {
+ const formData = new FormData()
+ formData.append('modelId', rowData.id)
+ newData.name && formData.append('modelName', newData.name)
+ imageData.value && formData.append('file', imageData.value)
+ ModelApi.updatePoster(formData).then((res) => {
+ if (res.code == 0 || res.code == 200) {
+ ElMessage.success('添加成功')
+ }
+ })
baseDialog.value?.close()
}
diff --git a/src/renderer/src/views/components/propertyBox/model copy.vue b/src/renderer/src/views/components/propertyBox/model copy.vue
new file mode 100644
index 0000000..67de218
--- /dev/null
+++ b/src/renderer/src/views/components/propertyBox/model copy.vue
@@ -0,0 +1,525 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/src/views/components/propertyBox/model.vue b/src/renderer/src/views/components/propertyBox/model.vue
index 02c5331..45d4ff6 100644
--- a/src/renderer/src/views/components/propertyBox/model.vue
+++ b/src/renderer/src/views/components/propertyBox/model.vue
@@ -8,26 +8,413 @@
+
+
+
+ {{ t('model.title') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ category.name }}
+
+
+
+
+
+
+
+
+
+
+ 加载失败
+
+ {{ model.name }}
+ 加载中...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载失败
+
+
+ {{ model.modelName }}
+
+ 加载中...
+