bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added initital code for 3d elements

Browse source
This commit is contained in:
Bart van der Braak 2023-07-27 16:45:26 +02:00
parent 1a366172fc
commit 353d51971b
8 changed files with 218 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package.json
View file

@ -17,20 +17,24 @@
"@sveltejs/kit": "^1.20.4",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"autoprefixer": "^10.4.14",
"tailwindcss": "^3.3.2"
"vite": "^4.4.2"
},
"type": "module"
"type": "module",
"dependencies": {
"@types/three": "^0.154.0",
"three": "^0.154.0"
}
}

47
pnpm-lock.yaml
View file

@ -4,6 +4,14 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
'@types/three':
specifier: ^0.154.0
version: 0.154.0
three:
specifier: ^0.154.0
version: 0.154.0
devDependencies:
'@skeletonlabs/skeleton':
specifier: ^1.10.0
@ -478,6 +486,10 @@ packages:
- supports-color
dev: true
/@tweenjs/tween.js@18.6.4:
resolution: {integrity: sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==}
dev: false
/@types/cookie@0.5.1:
resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
dev: true
@ -498,6 +510,25 @@ packages:
resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
dev: true
/@types/stats.js@0.17.0:
resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
dev: false
/@types/three@0.154.0:
resolution: {integrity: sha512-IioqpGhch6FdLDh4zazRn3rXHj6Vn2nVOziJdXVbJFi9CaI65LtP9qqUtpzbsHK2Ezlox8NtsLNHSw3AQzucjA==}
dependencies:
'@tweenjs/tween.js': 18.6.4
'@types/stats.js': 0.17.0
'@types/webxr': 0.5.2
fflate: 0.6.10
lil-gui: 0.17.0
meshoptimizer: 0.18.1
dev: false
/@types/webxr@0.5.2:
resolution: {integrity: sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==}
dev: false
/@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.45.0)(typescript@5.1.6):
resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -1142,6 +1173,10 @@ packages:
reusify: 1.0.4
dev: true
/fflate@0.6.10:
resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
dev: false
/file-entry-cache@6.0.1:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
engines: {node: ^10.12.0 || >=12.0.0}
@ -1386,6 +1421,10 @@ packages:
type-check: 0.4.0
dev: true
/lil-gui@0.17.0:
resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
dev: false
/lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
@ -1440,6 +1479,10 @@ packages:
engines: {node: '>= 8'}
dev: true
/meshoptimizer@0.18.1:
resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
dev: false
/micromatch@4.0.5:
resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
engines: {node: '>=8.6'}
@ -2109,6 +2152,10 @@ packages:
any-promise: 1.3.0
dev: true
/three@0.154.0:
resolution: {integrity: sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==}
dev: false
/to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}

89
src/lib/components/Tools.svelte Normal file
View file

@ -0,0 +1,89 @@
<script lang="ts">
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import * as THREE from 'three';
let camera: THREE.PerspectiveCamera,
scene: THREE.Scene,
renderer: THREE.WebGLRenderer,
cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
const toolsData = [
{ name: 'Git', info: 'Short note about Git and its usage.' },
{ name: 'DBeaver', info: 'Short note about DBeaver and its usage.' },
{ name: 'Notion', info: 'Short note about Notion and its usage.' },
{ name: 'Insomnia', info: 'Short note about Insomnia and its usage.' },
{ name: 'Cyberduck', info: 'Short note about Cyberduck and its usage.' },
{ name: 'Mullvad VPN', info: 'Short note about Mullvad VPN and its usage.' },
{ name: 'Maccy', info: 'Short note about Maccy and its usage.' }
];
onMount(() => {
init();
addTools();
animate();
});
const init = () => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
};
const addTool = (name: string, x: number, y: number, z: number) => {
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
cube = new THREE.Mesh(geometry, material);
cube.position.set(x, y, z);
scene.add(cube);
cube.userData.name = name;
cube.userData.info = toolsData.find((tool) => tool.name === name)?.info || '';
cube.addEventListener('click', () => {
alert(`${cube.userData.name}: ${cube.userData.info}`);
});
};
const addTools = () => {
addTool('Git', -2, 0, 0);
addTool('DBeaver', 0, 0, 0);
addTool('Notion', 2, 0, 0);
addTool('Insomnia', -2, 2, 0);
addTool('Cyberduck', 0, 2, 0);
addTool('Mullvad VPN', 2, 2, 0);
addTool('Maccy', 0, 4, 0);
};
const render = () => {
renderer.clear();
renderer.render(scene, camera);
};
const isMeshType = (object?: THREE.Object3D): object is THREE.Mesh => {
return object?.type === 'Mesh';
};
const animate = () => {
if (!browser) {
return;
}
requestAnimationFrame(animate);
scene.traverse((object: THREE.Object3D) => {
if (isMeshType(object) && object.isMesh) {
object.rotation.x += 0.005;
object.rotation.y += 0.005;
}
});
render();
};
</script>

5
src/routes/+page.svelte
View file

@ -1,8 +1,11 @@
<!-- About.svelte -->
<script lang='ts'>
import { calculateAge } from '$lib/calculate-age';
</script>
<svelte:head>
<title>hellob.art &mdash; home</title>
</svelte:head>
<main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-4">About Me</h2>

4
src/routes/blog/+page.svelte
View file

@ -1,3 +1,7 @@
<svelte:head>
<title>hellob.art &mdash; blog</title>
</svelte:head>
<main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-8">Blog posts</h2>
</main>

4
src/routes/blog/[slug]/+page.svelte
View file

@ -3,5 +3,9 @@
export let data;
</script>
<svelte:head>
<title>hellob.art &mdash; {data.title}</title>
</svelte:head>
<!-- <h1>{data.title}</h1>
<div>{@html data.content}</div> -->

4
src/routes/projects/+page.svelte
View file

@ -33,6 +33,10 @@
];
</script>
<svelte:head>
<title>hellob.art &mdash; projects</title>
</svelte:head>
<main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-8">My Projects</h2>
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">

56
src/routes/tools/+page.svelte
View file

@ -1,5 +1,61 @@
<script lang="ts">
import { browser } from '$app/environment';
import * as THREE from 'three';
if (browser) {
let camera: THREE.PerspectiveCamera;
let scene: THREE.Scene;
let renderer: THREE.WebGLRenderer;
let cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
const renderContainerId = 'renderOne';
const init = () => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const renderContainer = document.getElementById(renderContainerId);
if (renderContainer) {
renderContainer.appendChild(renderer.domElement);
console.log('success')
}
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
};
const render = () => {
renderer.clear();
renderer.render(scene, camera);
};
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.005;
cube.rotation.y += 0.005;
render();
};
init();
animate();
}
</script>
<svelte:head>
<title>hellob.art &mdash; tools</title>
</svelte:head>
<main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-8">DevOps</h2>
<section id="renderOne"> </section>
<h2 class="text-3xl font-bold mb-8">MacOS</h2>
<h2 class="text-3xl font-bold mb-8">Other</h2>
</main>