From 96869a62e4acc54d9fcd57b68e306eff9952f27d Mon Sep 17 00:00:00 2001 From: goynov Date: Thu, 13 Mar 2025 18:02:48 +0200 Subject: [PATCH] scene designer --- package-lock.json | 140 ++++----- package.json | 4 +- src/components/AppHeader.vue | 4 +- .../SceneDesigner/SceneDesigner.vue | 269 ++++++++++++++++++ src/components/SceneDesigner/SvgAvatar.vue | 28 ++ src/components/SceneDesigner/SvgScene.vue | 25 ++ src/gameEngine/index.js | 7 + src/pages/scenarios/[[id]].vue | 43 +++ src/pages/scenarios/list.vue | 9 + src/plugins/lang.js | 30 +- 10 files changed, 483 insertions(+), 76 deletions(-) create mode 100644 src/components/SceneDesigner/SceneDesigner.vue create mode 100644 src/components/SceneDesigner/SvgAvatar.vue create mode 100644 src/components/SceneDesigner/SvgScene.vue create mode 100644 src/pages/scenarios/[[id]].vue create mode 100644 src/pages/scenarios/list.vue diff --git a/package-lock.json b/package-lock.json index ae2622c..a5ff448 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,8 +26,8 @@ "sharp": "^0.33.5", "three": "^0.169.0", "uuid": "^11.0.2", - "vue": "^3.4.31", - "vuetify": "^3.6.11" + "vue": "^3.5.13", + "vuetify": "^3.7.16" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", @@ -1544,53 +1544,53 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz", - "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz", + "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", - "@vue/shared": "3.5.12", + "@vue/shared": "3.5.13", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz", - "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz", + "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.12", - "@vue/shared": "3.5.12" + "@vue/compiler-core": "3.5.13", + "@vue/shared": "3.5.13" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz", - "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz", + "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==", "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", - "@vue/compiler-core": "3.5.12", - "@vue/compiler-dom": "3.5.12", - "@vue/compiler-ssr": "3.5.12", - "@vue/shared": "3.5.12", + "@vue/compiler-core": "3.5.13", + "@vue/compiler-dom": "3.5.13", + "@vue/compiler-ssr": "3.5.13", + "@vue/shared": "3.5.13", "estree-walker": "^2.0.2", "magic-string": "^0.30.11", - "postcss": "^8.4.47", + "postcss": "^8.4.48", "source-map-js": "^1.2.0" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz", - "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz", + "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.12", - "@vue/shared": "3.5.12" + "@vue/compiler-dom": "3.5.13", + "@vue/shared": "3.5.13" } }, "node_modules/@vue/devtools-api": { @@ -1601,53 +1601,53 @@ "license": "MIT" }, "node_modules/@vue/reactivity": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz", - "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz", + "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.12" + "@vue/shared": "3.5.13" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz", - "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz", + "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.12", - "@vue/shared": "3.5.12" + "@vue/reactivity": "3.5.13", + "@vue/shared": "3.5.13" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz", - "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz", + "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.12", - "@vue/runtime-core": "3.5.12", - "@vue/shared": "3.5.12", + "@vue/reactivity": "3.5.13", + "@vue/runtime-core": "3.5.13", + "@vue/shared": "3.5.13", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz", - "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz", + "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.12", - "@vue/shared": "3.5.12" + "@vue/compiler-ssr": "3.5.13", + "@vue/shared": "3.5.13" }, "peerDependencies": { - "vue": "3.5.12" + "vue": "3.5.13" } }, "node_modules/@vue/shared": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz", - "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", + "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", "license": "MIT" }, "node_modules/@vuetify/loader-shared": { @@ -5284,9 +5284,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.9.tgz", + "integrity": "sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==", "funding": [ { "type": "github", @@ -5601,9 +5601,9 @@ "license": "MIT" }, "node_modules/picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "license": "ISC" }, "node_modules/picomatch": { @@ -5726,9 +5726,9 @@ } }, "node_modules/postcss": { - "version": "8.4.47", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "funding": [ { "type": "opencollective", @@ -5745,8 +5745,8 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.1.0", + "nanoid": "^3.3.8", + "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, "engines": { @@ -7278,16 +7278,16 @@ } }, "node_modules/vue": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz", - "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", + "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.12", - "@vue/compiler-sfc": "3.5.12", - "@vue/runtime-dom": "3.5.12", - "@vue/server-renderer": "3.5.12", - "@vue/shared": "3.5.12" + "@vue/compiler-dom": "3.5.13", + "@vue/compiler-sfc": "3.5.13", + "@vue/runtime-dom": "3.5.13", + "@vue/server-renderer": "3.5.13", + "@vue/shared": "3.5.13" }, "peerDependencies": { "typescript": "*" @@ -7353,9 +7353,9 @@ } }, "node_modules/vuetify": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.2.tgz", - "integrity": "sha512-q0WTcRG977+a9Dqhb8TOaPm+Xmvj0oVhnBJhAdHWFSov3HhHTTxlH2nXP/GBTXZuuMHDbBeIWFuUR2/1Fx0PPw==", + "version": "3.7.16", + "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.16.tgz", + "integrity": "sha512-Few/cBtgJYgdkzi0LWmVy67G5uc2+q7oWcadbcTUPAtEtGYNh2AM28h01Fk+ScJgfxkA077//ZDff1rh3jYG/w==", "license": "MIT", "engines": { "node": "^12.20 || >=14.13" diff --git a/package.json b/package.json index edf395c..7466c1b 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,8 @@ "sharp": "^0.33.5", "three": "^0.169.0", "uuid": "^11.0.2", - "vue": "^3.4.31", - "vuetify": "^3.6.11" + "vue": "^3.5.13", + "vuetify": "^3.7.16" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 06c0df5..a80282c 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -8,7 +8,7 @@ Нов игрови обект - Нов сценарий + Нов сценарий Нова игра @@ -21,7 +21,7 @@ - + diff --git a/src/components/SceneDesigner/SceneDesigner.vue b/src/components/SceneDesigner/SceneDesigner.vue new file mode 100644 index 0000000..fce21c2 --- /dev/null +++ b/src/components/SceneDesigner/SceneDesigner.vue @@ -0,0 +1,269 @@ + + + + + \ No newline at end of file diff --git a/src/components/SceneDesigner/SvgAvatar.vue b/src/components/SceneDesigner/SvgAvatar.vue new file mode 100644 index 0000000..a94bbcd --- /dev/null +++ b/src/components/SceneDesigner/SvgAvatar.vue @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/src/components/SceneDesigner/SvgScene.vue b/src/components/SceneDesigner/SvgScene.vue new file mode 100644 index 0000000..a6ebdb8 --- /dev/null +++ b/src/components/SceneDesigner/SvgScene.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/src/gameEngine/index.js b/src/gameEngine/index.js index 509d96e..1219b95 100644 --- a/src/gameEngine/index.js +++ b/src/gameEngine/index.js @@ -35,6 +35,7 @@ class GameEngine { // renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap renderer.outputEncoding = THREE.sRGBEncoding; const controls = new OrbitControls( camera, renderer.domElement ); + //controls.enableZoom = true; //const controls = new MapControls( camera, renderer.domElement ); this.transformControls = new TransformControls( camera, renderer.domElement ); this.transformControls.addEventListener( 'dragging-changed', function ( event ) { @@ -64,6 +65,12 @@ class GameEngine { scene.background = bck; //new THREE.Color(0.7,0.7,0.7); scene.environment = texture; console.log('GameEngine started') + renderer.domElement.addEventListener('wheel', (event)=>{ + camera.zoom -= event.deltaY / 1000; + camera.zoom = Math.max(camera.zoom, .4); + controls.rotateSpeed = 1 / camera.zoom; + camera.updateProjectionMatrix(); + }) } $ = THREE; diff --git a/src/pages/scenarios/[[id]].vue b/src/pages/scenarios/[[id]].vue new file mode 100644 index 0000000..56f378b --- /dev/null +++ b/src/pages/scenarios/[[id]].vue @@ -0,0 +1,43 @@ + + + \ No newline at end of file diff --git a/src/pages/scenarios/list.vue b/src/pages/scenarios/list.vue new file mode 100644 index 0000000..8b00dca --- /dev/null +++ b/src/pages/scenarios/list.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/plugins/lang.js b/src/plugins/lang.js index 1f38be6..5f4ef4a 100644 --- a/src/plugins/lang.js +++ b/src/plugins/lang.js @@ -23,10 +23,36 @@ const lang = { darkMode: 'Тъмен режим', confirmDeletionOf: 'Потвърдете изтриването на', yes: 'Да', - no: 'Не' + no: 'Не', + createScenario: 'Създаване на сценарий', + editScenario: 'Редкатиране на сценарий', + addScene: 'Добавяне на сцена' }, en: { - + createGameObject: 'Add game object', + editGameObject: 'Edit game object', + name: 'Name', + fieldRequired: 'Field is required', + objectType: 'Object type', + objectFile: 'File', + panorama2d: 'Panorama picture', + environment3d: 'Environment', + object3d: '3D object', + object2d: '2D object (picture)', + audio: 'Audio', + player3d: 'Player', + saveAndPreview: 'Save and preview', + preview: 'Preview', + captureThumbnail: 'Save thumbnail', + publish: 'Publish', + gameObjects: 'Objects', + gameScenarios: 'Scenarios', + gameRules: 'Rules', + games: 'Games', + darkMode: 'Dark mode', + confirmDeletionOf: 'Confirm deletion of', + yes: 'Yes', + no: 'No' } }