babylon.js 引入

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",

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: {}

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) {

tsconfig.app.json

@@ -37,7 +37,10 @@
       "@/*": [
         "./src/*"
       ]
-    }
+    },
+    "types": [
+      "babylonjs"
+    ]
   },
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": [