bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-28 23:39:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add orbit control scene without transform

Browse source
This commit is contained in:
Bart van der Braak 2023-07-30 00:35:52 +02:00
parent f84989021c
commit 9827c6039c
6 changed files with 52 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/lib/components/gltf/Github3d.svelte
View file

@ -1,29 +0,0 @@
<!-- src/lib/components/gltf/Github3d.svelte -->
<!--
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --transform
-->
<script>
import { Group } from 'three'
import { T, forwardEventHandlers } from '@threlte/core'
import { useGltf } from '@threlte/extras'
export const ref = new Group()
const gltf = useGltf('./github-transformed.glb', { useDraco: true })
const component = forwardEventHandlers()
</script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
{#await gltf}
<slot name="fallback" />
{:then gltf}
<T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
{:catch error}
<slot name="error" {error} />
{/await}
<slot {ref} />
</T>

45
src/lib/extrude-svg.ts
View file

@ -1,45 +0,0 @@
import type * as THREE from 'three';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
import type { SVGResult, SVGResultPaths } from 'three/examples/jsm/loaders/SVGLoader';
import { Mesh } from 'three/src/objects/Mesh';
import { Group } from 'three/src/objects/Group';
import { MeshNormalMaterial } from 'three/src/materials/MeshNormalMaterial';
import { ExtrudeGeometry } from 'three/src/geometries/ExtrudeGeometry';
/**
* Parses the provided SVG markup and extrudes it into a 3D model using THREE.js.
* @param svgMarkup - SVG markup to extrude.
* @return Group containing all of the extruded SVG paths.
* @throws Error If the SVG markup is empty.
*/
export function extrudeSvg(svgMarkup: string): Group {
if (!svgMarkup) {
throw new Error('SVG markup is empty');
}
const svgData: SVGResult = new SVGLoader().parse(svgMarkup);
const material: MeshNormalMaterial = new MeshNormalMaterial();
const svgGroup: Mesh[][] = svgData.paths.map(createShapeFromPath);
const group = new Group();
svgGroup.flat().forEach(mesh => group.add(mesh));
return group;
function createShapeFromPath(path: SVGResultPaths): Mesh[] {
const shapes: THREE.Shape[] = path.toShapes(true);
return shapes.map(shape => extrudeShape(shape, material));
}
function extrudeShape(shape: THREE.Shape, material: MeshNormalMaterial): Mesh {
const geometry = new ExtrudeGeometry(shape, {
depth: 20,
bevelEnabled: false
});
return new Mesh(geometry, material);
}
}