From 02cf36a131fb4b85f5feb10a3d6b51f474646612 Mon Sep 17 00:00:00 2001 From: LJ5O <75009579+LJ5O@users.noreply.github.com> Date: Mon, 8 Jan 2024 23:34:32 +0100 Subject: [PATCH] Started to add a notification div We just need to correctly implement Jquery and we will be able to show notifications in the game Also updated npm modules --- index.html | 26 +++++++++ package-lock.json | 99 +++++++++++++++++++++++++++++++++-- package.json | 2 + src/main.js | 14 +++++ src/utils/addAssetsOnScene.js | 13 ++++- src/vite.config.js | 13 +++++ 6 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 src/vite.config.js diff --git a/index.html b/index.html index 88ef966..72c7182 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,35 @@ My first three.js app +
+

+
+ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0fbcc4f..d9e7b58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,11 @@ "version": "1.0.0", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "jquery": "^3.7.1", "three": "^0.158.0" }, "devDependencies": { + "@rollup/plugin-inject": "^5.0.5", "vite": "^4.5.0" } }, @@ -367,6 +369,62 @@ "node": ">=12" } }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@rollup/plugin-inject": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz", + "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -404,6 +462,12 @@ "@esbuild/win32-x64": "0.18.20" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -418,6 +482,23 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" + }, + "node_modules/magic-string": { + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -442,6 +523,18 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -501,9 +594,9 @@ "integrity": "sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==" }, "node_modules/vite": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", - "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "dev": true, "dependencies": { "esbuild": "^0.18.10", diff --git a/package.json b/package.json index 4e69389..de3af19 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,11 @@ "author": "", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "jquery": "^3.7.1", "three": "^0.158.0" }, "devDependencies": { + "@rollup/plugin-inject": "^5.0.5", "vite": "^4.5.0" } } diff --git a/src/main.js b/src/main.js index d488bef..469b540 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,20 @@ import { getCamera } from './cameras/PerspectiveCamera.js'; import {addAssetsOnScene} from './utils/addAssetsOnScene.js'; import * as PlayerMovement from './utils/playerMovement.js'; import * as Animations from './utils/animateMesh.js'; + +/*TODO*/ +import $ from 'jquery' + +function showNotification(HTMLText, color){ + $("#notification_bar p").html(HTMLText); + $("#notification_bar").css( 'opacity', 0.9 ).animate({ + width:320 + }, 500); +} + +showNotification("oui") +/*TODO*/ + let Clock = new THREE.Clock(); THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader diff --git a/src/utils/addAssetsOnScene.js b/src/utils/addAssetsOnScene.js index ce44fa9..c480a68 100644 --- a/src/utils/addAssetsOnScene.js +++ b/src/utils/addAssetsOnScene.js @@ -374,6 +374,17 @@ export async function addAssetsOnScene(scene){ scene.add(signPlane); } + /* -------------------- + ADDING LINK PLATES + -------------------- */ + + const linkPlate = await loadModel('src/objects/models/linkPlate.gltf'); + linkPlate.scene.scale.set(0.4,0.05,0.4); + linkPlate.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));//Must be standing up + alignGround(ground, linkPlate.scene); + linkPlate.scene.position.y = 2; + scene.add( linkPlate.scene ); + /* -------------------- ADDING GRASS -------------------- */ @@ -382,7 +393,7 @@ export async function addAssetsOnScene(scene){ const grass3 = await loadModel('src/objects/models/grass/grass3.gltf'); const grass4 = await loadModel('src/objects/models/grass/grass4.gltf'); const grass5 = await loadModel('src/objects/models/grass/grass5.gltf'); - const grassModels = [grass1,grass2,grass3,grass4,grass5];//https://threejs.org/docs/#api/en/objects/InstancedMesh + const grassModels = [grass1,grass2,grass3,grass4,grass5];// Planned for later : https://threejs.org/docs/#api/en/objects/InstancedMesh grassModels.forEach(item => { //Prepare models before placing them diff --git a/src/vite.config.js b/src/vite.config.js new file mode 100644 index 0000000..eb7aa1d --- /dev/null +++ b/src/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import inject from "@rollup/plugin-inject"; + +export default defineConfig({ + plugins: [ + inject({ + jQuery: 'jquery', + }), + ], + optimizeDeps: { + include: ['jquery'], + }, +}); \ No newline at end of file