Kevin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started to add a notification div

Browse Source 
We just need to correctly implement Jquery and we will be able to show notifications in the game
Also updated npm modules
This commit is contained in:
LJ5O
2024-01-08 23:34:32 +01:00
parent e1f711e03c
commit 02cf36a131
6 changed files with 163 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -5,9 +5,35 @@
<title>My first three.js app</title> <title>My first three.js app</title>
<style> <style>
body { margin: 0; } body { margin: 0; }
#notification_bar {
position: absolute;
top:0;
right: 0;
height: 80px;
width: 0;
/*width: 320px; 320 is the expended value, when showed by Jquery*/
background-color: #1C232A;
opacity: 0; /* Set to 0.9 when showed */
z-index: 100;
border-left: 24px solid #2E86AB;
}
#notification_bar p{
margin: 6px;
color: #EAEAEA;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}
</style> </style>
</head> </head>
<body> <body>
<div id="notification_bar">
<p><!-- Text added here by JS --></p>
</div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

99
package-lock.json generated
View File

@@ -9,9 +9,11 @@
"version": "1.0.0", "version": "1.0.0",
"license": "SEE LICENSE IN LICENSE", "license": "SEE LICENSE IN LICENSE",
"dependencies": { "dependencies": {
"jquery": "^3.7.1",
"three": "^0.158.0" "three": "^0.158.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-inject": "^5.0.5",
"vite": "^4.5.0" "vite": "^4.5.0"
} }
}, },
@@ -367,6 +369,62 @@
"node": ">=12" "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": { "node_modules/esbuild": {
"version": "0.18.20", "version": "0.18.20",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -404,6 +462,12 @@
"@esbuild/win32-x64": "0.18.20" "@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": { "node_modules/fsevents": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "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": "^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": { "node_modules/nanoid": {
"version": "3.3.7", "version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -442,6 +523,18 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true "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": { "node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -501,9 +594,9 @@
"integrity": "sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==" "integrity": "sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ=="
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.5.0", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",

2
package.json
View File

@@ -9,9 +9,11 @@
"author": "", "author": "",
"license": "SEE LICENSE IN LICENSE", "license": "SEE LICENSE IN LICENSE",
"dependencies": { "dependencies": {
"jquery": "^3.7.1",
"three": "^0.158.0" "three": "^0.158.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-inject": "^5.0.5",
"vite": "^4.5.0" "vite": "^4.5.0"
} }
} }

14
src/main.js
View File

@@ -3,6 +3,20 @@ import { getCamera } from './cameras/PerspectiveCamera.js';
import {addAssetsOnScene} from './utils/addAssetsOnScene.js'; import {addAssetsOnScene} from './utils/addAssetsOnScene.js';
import * as PlayerMovement from './utils/playerMovement.js'; import * as PlayerMovement from './utils/playerMovement.js';
import * as Animations from './utils/animateMesh.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(); 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 THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader

13
src/utils/addAssetsOnScene.js
View File

@@ -374,6 +374,17 @@ export async function addAssetsOnScene(scene){
scene.add(signPlane); 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 ADDING GRASS
-------------------- */ -------------------- */
@@ -382,7 +393,7 @@ export async function addAssetsOnScene(scene){
const grass3 = await loadModel('src/objects/models/grass/grass3.gltf'); const grass3 = await loadModel('src/objects/models/grass/grass3.gltf');
const grass4 = await loadModel('src/objects/models/grass/grass4.gltf'); const grass4 = await loadModel('src/objects/models/grass/grass4.gltf');
const grass5 = await loadModel('src/objects/models/grass/grass5.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 => { grassModels.forEach(item => {
//Prepare models before placing them //Prepare models before placing them

13
src/vite.config.js Normal file
View File

@@ -0,0 +1,13 @@
import { defineConfig } from 'vite';
import inject from "@rollup/plugin-inject";
export default defineConfig({
plugins: [
inject({
jQuery: 'jquery',
}),
],
optimizeDeps: {
include: ['jquery'],
},
});