From d16d1d173f521c418aa41279fba9eb8e6f78183f Mon Sep 17 00:00:00 2001 From: Charles Doucet Date: Tue, 4 Feb 2025 09:50:38 -0500 Subject: [PATCH 1/3] wip: 3js integration with typescript --- package-lock.json | 66 ++++++++++++++++++- package.json | 4 ++ .../vertical-nav/project-data-cube.ts | 25 +++++++ src/components/vertical-nav/project-nav.ts | 5 +- 4 files changed, 96 insertions(+), 4 deletions(-) create mode 100644 src/components/vertical-nav/project-data-cube.ts diff --git a/package-lock.json b/package-lock.json index 3af827f..ede8db8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,10 @@ "": { "name": "webhub_vite", "version": "0.0.0", + "dependencies": { + "@types/three": "^0.173.0", + "three": "^0.173.0" + }, "devDependencies": { "typescript": "~5.6.2", "vite": "^6.0.5" @@ -703,6 +707,12 @@ "win32" ] }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -710,6 +720,38 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/stats.js": { + "version": "0.17.3", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", + "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==", + "license": "MIT" + }, + "node_modules/@types/three": { + "version": "0.173.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.173.0.tgz", + "integrity": "sha512-KtNjfI/CRB6JVKIVeZM1R3GYDX2wkoV2itNcQu2j4d7qkhjGOuB+s2oF6jl9mztycDLGMtrAnJQYxInC8Bb20A==", + "license": "MIT", + "dependencies": { + "@tweenjs/tween.js": "~23.1.3", + "@types/stats.js": "*", + "@types/webxr": "*", + "@webgpu/types": "*", + "fflate": "~0.8.2", + "meshoptimizer": "~0.18.1" + } + }, + "node_modules/@types/webxr": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.21.tgz", + "integrity": "sha512-geZIAtLzjGmgY2JUi6VxXdCrTb99A7yP49lxLr2Nm/uIK0PkkxcEi4OGhoGDO4pxCf3JwGz2GiJL2Ej4K2bKaA==", + "license": "MIT" + }, + "node_modules/@webgpu/types": { + "version": "0.1.54", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.54.tgz", + "integrity": "sha512-81oaalC8LFrXjhsczomEQ0u3jG+TqE6V9QHLA8GNZq/Rnot0KDugu3LhSYSlie8tSdooAN1Hov05asrUUp9qgg==", + "license": "BSD-3-Clause" + }, "node_modules/esbuild": { "version": "0.24.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz", @@ -751,6 +793,12 @@ "@esbuild/win32-x64": "0.24.2" } }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "license": "MIT" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -766,6 +814,12 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/meshoptimizer": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", + "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==", + "license": "MIT" + }, "node_modules/nanoid": { "version": "3.3.8", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", @@ -870,6 +924,12 @@ "node": ">=0.10.0" } }, + "node_modules/three": { + "version": "0.173.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.173.0.tgz", + "integrity": "sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw==", + "license": "MIT" + }, "node_modules/typescript": { "version": "5.6.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz", @@ -885,9 +945,9 @@ } }, "node_modules/vite": { - "version": "6.0.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz", - "integrity": "sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==", + "version": "6.0.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz", + "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 21b2c09..14c2668 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,9 @@ "devDependencies": { "typescript": "~5.6.2", "vite": "^6.0.5" + }, + "dependencies": { + "@types/three": "^0.173.0", + "three": "^0.173.0" } } diff --git a/src/components/vertical-nav/project-data-cube.ts b/src/components/vertical-nav/project-data-cube.ts new file mode 100644 index 0000000..9190fd3 --- /dev/null +++ b/src/components/vertical-nav/project-data-cube.ts @@ -0,0 +1,25 @@ +import * as THREE from 'three'; + +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); + +export const renderer = new THREE.WebGLRenderer(); +renderer.setSize( window.innerWidth, window.innerHeight ); +renderer.setAnimationLoop( animate ); +document.body.appendChild( renderer.domElement ); + +const geometry = new THREE.BoxGeometry( 1, 1, 1 ); +const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); +const cube = new THREE.Mesh( geometry, material ); +scene.add( cube ); + +camera.position.z = 5; + +function animate() { + + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + + renderer.render( scene, camera ); + +} \ No newline at end of file diff --git a/src/components/vertical-nav/project-nav.ts b/src/components/vertical-nav/project-nav.ts index 0b39540..a953186 100644 --- a/src/components/vertical-nav/project-nav.ts +++ b/src/components/vertical-nav/project-nav.ts @@ -1,4 +1,6 @@ -export type AboutProject = { +import {renderer} from "./project-data-cube.ts"; + +export type AboutProject = { readonly release: string; readonly platforms: string; readonly developer: string; @@ -16,6 +18,7 @@ export function projectInfo(about: AboutProject, links: RelatedLinks[]) { const section = document.createElement('section'); navWrapper?.appendChild(section); + section.appendChild(renderer.domElement); if (typeof about === "object" && typeof links === "object") { section.appendChild(sectionAboutTheGame(about)); From d6d6d524fce7a098adb4632dca85eee74c45dba8 Mon Sep 17 00:00:00 2001 From: Charles Doucet Date: Tue, 4 Feb 2025 11:02:03 -0500 Subject: [PATCH 2/3] feat: 3d canvas in the vertical nav --- .../vertical-nav/project-data-cube.ts | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/vertical-nav/project-data-cube.ts b/src/components/vertical-nav/project-data-cube.ts index 9190fd3..a936348 100644 --- a/src/components/vertical-nav/project-data-cube.ts +++ b/src/components/vertical-nav/project-data-cube.ts @@ -1,25 +1,30 @@ import * as THREE from 'three'; +// TO REVIEW +// @ts-ignore +import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; + const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); +const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 ); export const renderer = new THREE.WebGLRenderer(); -renderer.setSize( window.innerWidth, window.innerHeight ); +renderer.setSize( 230, 230 ); renderer.setAnimationLoop( animate ); -document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry( 1, 1, 1 ); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); -scene.add( cube ); -camera.position.z = 5; +const controls = new OrbitControls( camera, renderer.domElement ); +scene.add( cube ); -function animate() { +camera.position.z = 2; +controls.panSpeed = 0; +controls.rotateSpeed = 0.5; +controls.update(); - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; +//----------------------------------------------------------------------- +function animate() { renderer.render( scene, camera ); - } \ No newline at end of file From b8b9fc8b0741a85e966e4f2ae1efaa379305453b Mon Sep 17 00:00:00 2001 From: Charles Doucet Date: Tue, 4 Feb 2025 11:12:48 -0500 Subject: [PATCH 3/3] feat: integrate 3d viewer inside nav project function --- src/components/vertical-nav/project-nav.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/vertical-nav/project-nav.ts b/src/components/vertical-nav/project-nav.ts index a953186..700bf76 100644 --- a/src/components/vertical-nav/project-nav.ts +++ b/src/components/vertical-nav/project-nav.ts @@ -18,7 +18,8 @@ export function projectInfo(about: AboutProject, links: RelatedLinks[]) { const section = document.createElement('section'); navWrapper?.appendChild(section); - section.appendChild(renderer.domElement); + + section.appendChild(sectionData()); if (typeof about === "object" && typeof links === "object") { section.appendChild(sectionAboutTheGame(about)); @@ -33,6 +34,19 @@ export function projectInfo(about: AboutProject, links: RelatedLinks[]) { //----------------------------------------------------------------------- +function sectionData() { + const detailSection = document.createElement("div"); + const detailTitle = document.createElement("h4"); + + detailSection.className = "detail-section"; + detailTitle.textContent = "Tech Distribution"; + + detailSection.appendChild(detailTitle); + detailSection.appendChild(renderer.domElement); + + return detailSection; +} + function sectionAboutTheGame(about: AboutProject) { const detailSection = document.createElement('div'); const detailTitle = document.createElement("h4");