diff --git a/package.json b/package.json index dbf7f92..cfa3fc1 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,9 @@ "vue3-menus": "^1.1.2" }, "devDependencies": { + "@babylonjs/core": "^8.9.0", + "@babylonjs/inspector": "^8.9.0", + "@babylonjs/loaders": "^8.9.0", "@element-plus/icons-vue": "^2.3.1", "@rolldown/pluginutils": "1.0.0-beta.8-commit.56abf23", "@tsconfig/node22": "^22.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae89d39..0faa17e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,15 @@ importers: specifier: ^1.1.2 version: 1.1.2 devDependencies: + '@babylonjs/core': + specifier: ^8.9.0 + version: 8.9.0 + '@babylonjs/inspector': + specifier: ^8.9.0 + version: 8.9.0(@babylonjs/addons@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/core@8.9.0)(@babylonjs/gui-editor@8.9.0(@babylonjs/core@8.9.0)(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5))(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/loaders@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0))(@babylonjs/materials@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/serializers@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5) + '@babylonjs/loaders': + specifier: ^8.9.0 + version: 8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0) '@element-plus/icons-vue': specifier: ^2.3.1 version: 2.3.1(vue@3.5.14(typescript@5.8.3)) @@ -281,6 +290,57 @@ packages: resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==} engines: {node: '>=6.9.0'} + '@babylonjs/addons@8.9.0': + resolution: {integrity: sha512-GdGPKtu9XMHm5IJl2INMEbGAyKqNJoUeQtz9Tscg8lA0WEulnBwjtWGGQsjCse1aq4WMY4VcGp1lbTlwa9kCNQ==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + + '@babylonjs/core@8.9.0': + resolution: {integrity: sha512-ZHMDsjFZqeSejtJ+sR2OjUHjk4gjgfjX/iDdZKJMHhst4T/P2pTRl/zcpuxYijqe6P03KV35n5INhShRXV/psw==} + + '@babylonjs/gui-editor@8.9.0': + resolution: {integrity: sha512-rV9mWRBLd6dqhJwSbaBQgUplGr5dHnLMHqes919gS7bBbnqA/S9MBeZC88QVWgaAoX4gXZXTLK3aNOQ1x2Sfiw==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + '@babylonjs/gui': ^8.0.0 + '@types/react': '>=16.7.3' + '@types/react-dom': '>=16.0.9' + + '@babylonjs/gui@8.9.0': + resolution: {integrity: sha512-6wR0Iw6BueluwAOH4cAisS/kKluTNVOj0qUkhsAkKEWHAvWeTDnL0BaHSunOF48KJS3bEAMTk7NSYK2ODLt+sw==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + + '@babylonjs/inspector@8.9.0': + resolution: {integrity: sha512-PZDTV1f5pSTUKu/Bh+CZp1KnWHF79ElwNZ2oaZASDsXk9eOX/MYj390GXTYrQMtG8gsIjZRdoGkoPq277WK+WA==} + peerDependencies: + '@babylonjs/addons': ^8.0.0 + '@babylonjs/core': ^8.0.0 + '@babylonjs/gui': ^8.0.0 + '@babylonjs/gui-editor': ^8.0.0 + '@babylonjs/loaders': ^8.0.0 + '@babylonjs/materials': ^8.0.0 + '@babylonjs/serializers': ^8.0.0 + '@types/react': '>=16.7.3' + '@types/react-dom': '>=16.0.9' + + '@babylonjs/loaders@8.9.0': + resolution: {integrity: sha512-6Pm1qGGmMMg8x7LweOYRkTNt7O8UO+qi1pgg9oEN4NxH1GtcCzerEvn6jQxxALNVG7NZOVBdTbo5clfbuP0Ylg==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + babylonjs-gltf2interface: ^8.0.0 + + '@babylonjs/materials@8.9.0': + resolution: {integrity: sha512-AbQRABnxbuAj3eKjB+7Ar3MQ/C8dWwqQh1Z3Ryx+tVqyDJbzjNJkjtwzKxgULYSku0k3vi4viY7ugNGx5Jvnog==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + + '@babylonjs/serializers@8.9.0': + resolution: {integrity: sha512-E5/B1vP1kPdFs+d62LbW/B4uLckdvDACnvFtEc6bFFHPslM2zncs3IF35Bl2RZSKmFJHsv5VRCKnQfVW+8U1Iw==} + peerDependencies: + '@babylonjs/core': ^8.0.0 + babylonjs-gltf2interface: ^8.0.0 + '@ctrl/tinycolor@3.6.1': resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} engines: {node: '>=10'} @@ -452,6 +512,22 @@ packages: '@floating-ui/utils@0.2.9': resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} + '@fortawesome/fontawesome-common-types@6.7.2': + resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==} + engines: {node: '>=6'} + + '@fortawesome/fontawesome-svg-core@6.7.2': + resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==} + engines: {node: '>=6'} + + '@fortawesome/free-regular-svg-icons@6.7.2': + resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==} + engines: {node: '>=6'} + + '@fortawesome/free-solid-svg-icons@6.7.2': + resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==} + engines: {node: '>=6'} + '@intlify/core-base@9.2.2': resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==} engines: {node: '>= 14'} @@ -543,56 +619,67 @@ packages: resolution: {integrity: sha512-46OzWeqEVQyX3N2/QdiU/CMXYDH/lSHpgfBkuhl3igpZiaB3ZIfSjKuOnybFVBQzjsLwkus2mjaESy8H41SzvA==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.41.0': resolution: {integrity: sha512-lfgW3KtQP4YauqdPpcUZHPcqQXmTmH4nYU0cplNeW583CMkAGjtImw4PKli09NFi2iQgChk4e9erkwlfYem6Lg==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.41.0': resolution: {integrity: sha512-nn8mEyzMbdEJzT7cwxgObuwviMx6kPRxzYiOl6o/o+ChQq23gfdlZcUNnt89lPhhz3BYsZ72rp0rxNqBSfqlqw==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.41.0': resolution: {integrity: sha512-l+QK99je2zUKGd31Gh+45c4pGDAqZSuWQiuRFCdHYC2CSiO47qUWsCcenrI6p22hvHZrDje9QjwSMAFL3iwXwQ==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loongarch64-gnu@4.41.0': resolution: {integrity: sha512-WbnJaxPv1gPIm6S8O/Wg+wfE/OzGSXlBMbOe4ie+zMyykMOeqmgD1BhPxZQuDqwUN+0T/xOFtL2RUWBspnZj3w==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-powerpc64le-gnu@4.41.0': resolution: {integrity: sha512-eRDWR5t67/b2g8Q/S8XPi0YdbKcCs4WQ8vklNnUYLaSWF+Cbv2axZsp4jni6/j7eKvMLYCYdcsv8dcU+a6QNFg==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.41.0': resolution: {integrity: sha512-TWrZb6GF5jsEKG7T1IHwlLMDRy2f3DPqYldmIhnA2DVqvvhY2Ai184vZGgahRrg8k9UBWoSlHv+suRfTN7Ua4A==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.41.0': resolution: {integrity: sha512-ieQljaZKuJpmWvd8gW87ZmSFwid6AxMDk5bhONJ57U8zT77zpZ/TPKkU9HpnnFrM4zsgr4kiGuzbIbZTGi7u9A==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.41.0': resolution: {integrity: sha512-/L3pW48SxrWAlVsKCN0dGLB2bi8Nv8pr5S5ocSM+S0XCn5RCVCXqi8GVtHFsOBBCSeR+u9brV2zno5+mg3S4Aw==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.41.0': resolution: {integrity: sha512-XMLeKjyH8NsEDCRptf6LO8lJk23o9wvB+dJwcXMaH6ZQbbkHu2dbGIUindbMtRN6ux1xKi16iXWu6q9mu7gDhQ==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.41.0': resolution: {integrity: sha512-m/P7LycHZTvSQeXhFmgmdqEiTqSV80zn6xHaQ1JSqwCtD1YGtwEK515Qmy9DcB2HK4dOUVypQxvhVSy06cJPEg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.41.0': resolution: {integrity: sha512-4yodtcOrFHpbomJGVEqZ8fzD4kfBeCbpsUy5Pqk4RluXOdsWdjLnjhiKy2w3qzcASWd04fp52Xz7JKarVJ5BTg==} @@ -640,6 +727,14 @@ packages: '@types/node@22.15.21': resolution: {integrity: sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==} + '@types/react-dom@19.1.5': + resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==} + peerDependencies: + '@types/react': ^19.0.0 + + '@types/react@19.1.5': + resolution: {integrity: sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g==} + '@types/sizzle@2.3.9': resolution: {integrity: sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==} @@ -833,6 +928,9 @@ packages: axios@1.9.0: resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==} + babylonjs-gltf2interface@8.9.0: + resolution: {integrity: sha512-3Ob/5OS618JEUQ1ojRfv3xk+vFuztBpn3rmXUh7TBknwzzz75DneUCoRCeWZz1log0b6qkYPRnxAtAPEvZZrhg==} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -1849,6 +1947,52 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 + '@babylonjs/addons@8.9.0(@babylonjs/core@8.9.0)': + dependencies: + '@babylonjs/core': 8.9.0 + + '@babylonjs/core@8.9.0': {} + + '@babylonjs/gui-editor@8.9.0(@babylonjs/core@8.9.0)(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)': + dependencies: + '@babylonjs/core': 8.9.0 + '@babylonjs/gui': 8.9.0(@babylonjs/core@8.9.0) + '@types/react': 19.1.5 + '@types/react-dom': 19.1.5(@types/react@19.1.5) + + '@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0)': + dependencies: + '@babylonjs/core': 8.9.0 + + '@babylonjs/inspector@8.9.0(@babylonjs/addons@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/core@8.9.0)(@babylonjs/gui-editor@8.9.0(@babylonjs/core@8.9.0)(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5))(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/loaders@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0))(@babylonjs/materials@8.9.0(@babylonjs/core@8.9.0))(@babylonjs/serializers@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)': + dependencies: + '@babylonjs/addons': 8.9.0(@babylonjs/core@8.9.0) + '@babylonjs/core': 8.9.0 + '@babylonjs/gui': 8.9.0(@babylonjs/core@8.9.0) + '@babylonjs/gui-editor': 8.9.0(@babylonjs/core@8.9.0)(@babylonjs/gui@8.9.0(@babylonjs/core@8.9.0))(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5) + '@babylonjs/loaders': 8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0) + '@babylonjs/materials': 8.9.0(@babylonjs/core@8.9.0) + '@babylonjs/serializers': 8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0) + '@fortawesome/fontawesome-svg-core': 6.7.2 + '@fortawesome/free-regular-svg-icons': 6.7.2 + '@fortawesome/free-solid-svg-icons': 6.7.2 + '@types/react': 19.1.5 + '@types/react-dom': 19.1.5(@types/react@19.1.5) + + '@babylonjs/loaders@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0)': + dependencies: + '@babylonjs/core': 8.9.0 + babylonjs-gltf2interface: 8.9.0 + + '@babylonjs/materials@8.9.0(@babylonjs/core@8.9.0)': + dependencies: + '@babylonjs/core': 8.9.0 + + '@babylonjs/serializers@8.9.0(@babylonjs/core@8.9.0)(babylonjs-gltf2interface@8.9.0)': + dependencies: + '@babylonjs/core': 8.9.0 + babylonjs-gltf2interface: 8.9.0 + '@ctrl/tinycolor@3.6.1': {} '@dimforge/rapier3d-compat@0.12.0': {} @@ -1943,6 +2087,20 @@ snapshots: '@floating-ui/utils@0.2.9': {} + '@fortawesome/fontawesome-common-types@6.7.2': {} + + '@fortawesome/fontawesome-svg-core@6.7.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.7.2 + + '@fortawesome/free-regular-svg-icons@6.7.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.7.2 + + '@fortawesome/free-solid-svg-icons@6.7.2': + dependencies: + '@fortawesome/fontawesome-common-types': 6.7.2 + '@intlify/core-base@9.2.2': dependencies: '@intlify/devtools-if': 9.2.2 @@ -2090,6 +2248,14 @@ snapshots: dependencies: undici-types: 6.21.0 + '@types/react-dom@19.1.5(@types/react@19.1.5)': + dependencies: + '@types/react': 19.1.5 + + '@types/react@19.1.5': + dependencies: + csstype: 3.1.3 + '@types/sizzle@2.3.9': {} '@types/stats.js@0.17.4': {} @@ -2349,6 +2515,8 @@ snapshots: transitivePeerDependencies: - debug + babylonjs-gltf2interface@8.9.0: {} + balanced-match@1.0.2: {} birpc@2.3.0: {} diff --git a/src/designer/model3DView/Model3DView.vue b/src/designer/model3DView/Model3DView.vue index 2118fb5..39c74a1 100644 --- a/src/designer/model3DView/Model3DView.vue +++ b/src/designer/model3DView/Model3DView.vue @@ -216,7 +216,7 @@ function initThree() { statsControls.dom.style.top = 'unset' viewerDom.appendChild(statsControls.dom) - // // 创建几何体和材质 + // // 创建几何体和材质做测试用 // const geometry = new THREE.BoxGeometry(1, 1, 1) // const material = new THREE.MeshStandardMaterial({ // color: 0xcccccc, @@ -240,8 +240,6 @@ function initThree() { controls.enabled = !event.value }) tcontrols.setMode('translate') - // tcontrols.size = 1 - // tcontrols.space = 'local' scene.add(tcontrols.getHelper()) } @@ -291,15 +289,6 @@ function initGUI() { camera.rotation.z = val }) cameraRotationFolder.close() - - // 相机位置 - // const cameraFolder = gui.addFolder('相机位置') - // cameraFolder.add(state.cameraPosition, 0, -10, 10).name('X') - // cameraFolder.add(state.cameraPosition, 1, -10, 10).name('Y') - // cameraFolder.add(state.cameraPosition, 2, 5, 30).name('Z').onChange(() => { - // camera.position.set(...state.cameraPosition) - // }) - // cameraFolder.open() } function handleResize(entries) { @@ -326,24 +315,6 @@ function handleResize(entries) { } } -function initMode2DCamera() { - // const controlsNew = new OrbitControls( - // cameraNew, - // renderer?.domElement - // ) - // controlsNew.enableDamping = false - // controlsNew.enableZoom = true - // controlsNew.enableRotate = false - // controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移 - // controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动 - // controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' } - // controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件 - // controlsNew.panSpeed = 1 - // controlsNew.keyPanSpeed = 20 // normal 7 - // controlsNew.minDistance = 0.1 - // controlsNew.maxDistance = 1000 -} - function initMode3DCamera() { if (camera) { scene.remove(camera) @@ -354,15 +325,9 @@ function initMode3DCamera() { // 渲染相机 const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 0.1, 2000) //设置相机位置 - // cameraNew.position.set(4, 2, -3); - // cameraNew.position.set(30, 30, 30) cameraNew.position.set(5, 5, 5) - // 2.4,30,1.5; - // cameraNew.position.set(2.4, 20, 1.5) //设置相机方向 cameraNew.lookAt(0, 0, 0) - // -1.57,0,1.57 - // cameraNew.rotation.set(-1.57, 0, 1.57) camera = cameraNew scene.add(camera) @@ -372,15 +337,19 @@ function initMode3DCamera() { controlsNew.enableDamping = false controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动 controlsNew.minDistance = 2 + controlsNew.addEventListener('change', syncCameraState) controls = controlsNew controls.update() camera.updateProjectionMatrix() - reloadState() + syncCameraState() } -function reloadState() { +/** + * 重新加载相机状态到全局状态 + */ +function syncCameraState() { if (camera) { state.camera.position.x = camera.position.x state.camera.position.y = camera.position.y @@ -395,17 +364,6 @@ function reloadState() { function renderView() { statsControls?.update() renderer?.render(scene, camera) - - if (camera) { - // 同步相机位置和旋转到 cameraTransform 对象 - state.camera.position.x = camera.position.x - state.camera.position.y = camera.position.y - state.camera.position.z = camera.position.z - - state.camera.rotation.x = camera.rotation.x - state.camera.rotation.y = camera.rotation.y - state.camera.rotation.z = camera.rotation.z - } } function handleTextureUpload(file) { diff --git a/tsconfig.app.json b/tsconfig.app.json index 029eb1a..1fa207c 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -37,7 +37,10 @@ "@/*": [ "./src/*" ] - } + }, + "types": [ + "babylonjs" + ] }, "extends": "@vue/tsconfig/tsconfig.dom.json", "include": [