Skip to content

Commit 74aed64

Browse files
andretchen0andretchen0
committed
feat(MarchingCubes): add component, demo, docs
1 parent 3ead43e commit 74aed64

File tree

9 files changed

+93
-20
lines changed

9 files changed

+93
-20
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default defineConfig({
7676
{ text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
7777
{ text: 'Sampler', link: '/guide/abstractions/sampler' },
7878
{ text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
79+
{ text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
7980
],
8081
},
8182
{

‎docs/.vitepress/theme/components/MarchingCubesDemo.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { NoToneMapping, Vector3 } from 'three'
5+
6+
const rand = () => (Math.random() - 0.5) * 1.25
7+
const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
8+
</script>
9+
10+
<template>
11+
<TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
12+
<TresPerspectiveCamera />
13+
<OrbitControls />
14+
15+
<MarchingCubes :resolution="40" :max-poly-count="40000">
16+
<MarchingPlane plane-type="y" />
17+
<MarchingCube
18+
v-for="position, i of positions"
19+
:key="i"
20+
:position="position"
21+
/>
22+
<TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
23+
</MarchingCubes>
24+
25+
<TresAxesHelper />
26+
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
27+
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
28+
</TresCanvas>
29+
</template>

‎docs/component-list/components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default [
1717
},
1818
{ text: 'Sampler', link: '/guide/abstractions/sampler' },
1919
{ text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
20+
{ text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
2021
],
2122
},
2223
{

‎docs/guide/abstractions/marching-cubes.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# MarchingCubes
2+
3+
<DocsDemo>
4+
<MarchingCubesDemo />
5+
</DocsDemo>
6+
7+
`<MarchingCubes />` is a wrapper around [THREE's Marching Cubes](https://threejs.org/examples/#webgl_marchingcubes).
8+
9+
It includes 3 components:
10+
11+
* `<MarchingCubes />` – container element for `<MarchingCube />`s and `<MarchingPlane />`s
12+
* `<MarchingCube />` - an individual metaball
13+
* `<MarchingPlane />` – optional bounding plane that interacts with the metaballs
14+
15+
## Usage
16+
17+
<<< @/.vitepress/theme/components/MarchingCubesDemo.vue
18+
19+
## Props
20+
21+
| Prop | Description | Default |
22+
| :----| :---------- | ------- |
23+
| `resolution` | Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory. | `28` |
24+
| `maxPolyCount` | Maximum number of polygons to generate. | `10000` |
25+
| `enableUvs` | Whether UVs are enabled. | `false` |
26+
| `enableColors` | Whether vertex colors are enabled. | `false` |
27+
28+
## `<MarchingCube />` Props
29+
30+
| Prop | Description | Default |
31+
| :----| :---------- | ------- |
32+
| `strength` | How strongly this cube affects the marching cube field. | `0.5` |
33+
| `subtract` | How quickly strength moves to `0` over distance. | `12` |
34+
35+
## `<MarchingPlane />` Props
36+
37+
| Prop | Description | Default |
38+
| :----| :---------- | ------- |
39+
| `planeType` | Which axis the plane appears on. `'x' \| 'y' \| 'z'` | `'x'` |
40+
| `strength` | How strongly this plane affects the marching cube field. | `0.5` |
41+
| `subtract` | How quickly strength moves to `0` over distance. | `12` |

‎playground/vue/src/pages/abstractions/MarchingCubesDemo.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ const c = useControls({
3737
x: { value: 0, min: -1, max: 1, step: 0.1 },
3838
y: { value: 0, min: -1, max: 1, step: 0.1 },
3939
z: { value: 0, min: -1, max: 1, step: 0.1 },
40-
strength: { value: 0.5, min: -1, max: 5 },
40+
strength: { value: 0.5, min: -5, max: 5 },
4141
subtract: { value: 12, min: 0, max: 100 },
42+
enableColors: true,
4243
})
4344
</script>
4445

@@ -58,23 +59,24 @@ const c = useControls({
5859
:strength="c.strength.value.value"
5960
:subtract="c.subtract.value.value"
6061
/>
61-
<MarchingCube ref="r0" />
62-
<MarchingCube ref="r1" />
63-
<MarchingCube ref="r2" />
64-
<MarchingCube ref="r3" />
65-
<MarchingCube ref="r4" />
66-
<MarchingCube ref="r5" />
67-
<MarchingCube ref="r6" />
68-
<MarchingCube ref="r7" />
69-
<MarchingCube ref="r8" />
70-
<MarchingCube ref="r9" />
62+
<MarchingCube ref="r0" color="red" />
63+
<MarchingCube ref="r1" color="red" />
64+
<MarchingCube ref="r2" color="red" />
65+
<MarchingCube ref="r3" color="blue" />
66+
<MarchingCube ref="r4" color="blue" />
67+
<MarchingCube ref="r5" color="blue" />
68+
<MarchingCube ref="r6" color="green" />
69+
<MarchingCube ref="r7" color="green" />
70+
<MarchingCube ref="r8" color="green" />
71+
<MarchingCube ref="r9" color="green" />
7172

72-
<TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
73+
<TresMeshBasicMaterial v-if="c.enableColors.value.value" :vertex-colors="true" />
74+
<TresMeshPhongMaterial v-else specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
7375
</MarchingCubes>
7476
<TresAxesHelper />
7577

76-
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
77-
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
78+
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
79+
<TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
7880

7981
<OrbitControls :enable-pan="false" :zoom-speed="0.5" />
8082
</TresCanvas>

‎src/core/abstractions/MarchingCubes/MarchingCube.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<script setup lang="ts">
22
import { useLoop } from '@tresjs/core'
33
import { computed, inject, shallowRef } from 'vue'
4-
import MARCHING_CUBES_PROVIDE_KEY from './MARCHING_CUBES_PROVIDE_KEY'
4+
import { Color, type ColorRepresentation, Vector3 } from 'three'
55
import type { MarchingCubesApi } from './MarchingCubes.vue'
6-
import type { ColorRepresentation } from 'three'
7-
import { Color, Vector3 } from 'three'
6+
import { MARCHING_CUBES_PROVIDE_KEY } from './const'
87
98
interface MarchingCubeProps {
109
strength?: number

‎src/core/abstractions/MarchingCubes/MarchingCubes.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Material } from 'three'
33
import { MarchingCubes as MarchingCubesImpl } from 'three-stdlib'
44
import { computed, provide } from 'vue'
55
import { useLoop } from '@tresjs/core'
6-
import MARCHING_CUBES_PROVIDE_KEY from './MARCHING_CUBES_PROVIDE_KEY'
6+
import { MARCHING_CUBES_PROVIDE_KEY } from './const'
77
88
export interface MarchingCubesProps {
99
resolution?: number

‎src/core/abstractions/MarchingCubes/MarchingPlane.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { computed, inject, ref } from 'vue'
3-
import MARCHING_CUBES_PROVIDE_KEY from './MARCHING_CUBES_PROVIDE_KEY'
3+
import { MARCHING_CUBES_PROVIDE_KEY } from './const'
44
import type { MarchingCubesApi } from './MarchingCubes.vue'
55
import { useLoop } from '@tresjs/core'
66

‎src/core/abstractions/MarchingCubes/MARCHING_CUBES_PROVIDE_KEY.ts‎ renamed to ‎src/core/abstractions/MarchingCubes/const.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
const MARCHING_CUBES_PROVIDE_KEY = Symbol('marchingCubes')
22

3-
export default MARCHING_CUBES_PROVIDE_KEY
3+
export { MARCHING_CUBES_PROVIDE_KEY }

0 commit comments

Comments
 (0)