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

feat: working example of tools using 3d

Browse source
This commit is contained in:
Bart van der Braak 2023-07-27 22:25:38 +02:00
parent 353d51971b
commit a2426838df
3 changed files with 10 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/Tools.svelte
View file

@ -8,6 +8,8 @@
renderer: THREE.WebGLRenderer, renderer: THREE.WebGLRenderer,
cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>; cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
const renderContainerId = 'render';
const toolsData = [ const toolsData = [
{ name: 'Git', info: 'Short note about Git and its usage.' }, { name: 'Git', info: 'Short note about Git and its usage.' },
{ name: 'DBeaver', info: 'Short note about DBeaver and its usage.' }, { name: 'DBeaver', info: 'Short note about DBeaver and its usage.' },
@ -30,7 +32,10 @@
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); const renderContainer = document.getElementById(renderContainerId);
if (renderContainer) {
renderContainer.appendChild(renderer.domElement);
}
camera.position.z = 5; camera.position.z = 5;
}; };
@ -87,3 +92,4 @@
}; };
</script> </script>
<section id="render" />

2
src/routes/+layout.svelte
View file

@ -7,7 +7,7 @@
import Navigation from '../lib/components/Navigation.svelte'; import Navigation from '../lib/components/Navigation.svelte';
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
export let routes = [ let routes = [
{ url: '/', label: 'Home' }, { url: '/', label: 'Home' },
{ url: '/projects', label: 'Projects' }, { url: '/projects', label: 'Projects' },
{ url: '/tools', label: 'Tools' }, { url: '/tools', label: 'Tools' },

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

@ -1,52 +1,6 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'; import Tools from "$lib/components/Tools.svelte";
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> </script>
<svelte:head> <svelte:head>
@ -55,7 +9,7 @@
<main class="container mx-auto px-4 py-8 text-left"> <main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-8">DevOps</h2> <h2 class="text-3xl font-bold mb-8">DevOps</h2>
<section id="renderOne"> </section> <Tools />
<h2 class="text-3xl font-bold mb-8">MacOS</h2> <h2 class="text-3xl font-bold mb-8">MacOS</h2>
<h2 class="text-3xl font-bold mb-8">Other</h2> <h2 class="text-3xl font-bold mb-8">Other</h2>
</main> </main>