-
-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add useSampler and sampler * chore: add git ignore for .d.ts files * docs: add sampler and use sampler docs * chore: change name useSampler for useSurfaceSampler
- Loading branch information
1 parent
d69e971
commit 826833c
Showing
13 changed files
with
387 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
import { TresCanvas } from '@tresjs/core' | ||
import { OrbitControls, Sampler } from '@tresjs/cientos' | ||
</script> | ||
|
||
<template> | ||
<TresCanvas clear-color="#82DBC5"> | ||
<TresPerspectiveCamera :position="[0, 0.5, 5]" /> | ||
<OrbitControls /> | ||
|
||
<Sampler :count="50"> | ||
<TresMesh> | ||
<TresTorusGeometry /> | ||
</TresMesh> | ||
|
||
<TresInstancedMesh :args="[null!, null!, 1000]"> | ||
<TresBoxGeometry :args="[0.1, 0.1, 0.1]" /> | ||
<TresMeshNormalMaterial /> | ||
</TresInstancedMesh> | ||
</Sampler> | ||
<TresGridHelper :args="[10, 10]" /> | ||
</TresCanvas> | ||
</template> |
33 changes: 33 additions & 0 deletions
33
docs/.vitepress/theme/components/UseSurfaceSamplerDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<script setup lang="ts"> | ||
import { ref, watch } from 'vue' | ||
import { TresCanvas } from '@tresjs/core' | ||
import { OrbitControls, useSurfaceSampler } from '@tresjs/cientos' | ||
const torusRef = ref() | ||
const instancesRef = ref() | ||
watch(torusRef, (value) => { | ||
useSurfaceSampler(value, 50, instancesRef.value, 'color') | ||
}) | ||
</script> | ||
|
||
<template> | ||
<TresCanvas clear-color="#82DBC5"> | ||
<TresPerspectiveCamera :position="[0, 0.5, 5]" /> | ||
<OrbitControls /> | ||
|
||
<TresMesh ref="torusRef"> | ||
<TresTorusGeometry /> | ||
</TresMesh> | ||
|
||
<TresInstancedMesh | ||
ref="instancesRef" | ||
:args="[null!, null!, 1_000]" | ||
> | ||
<TresSphereGeometry :args="[0.1, 32, 32]" /> | ||
<TresMeshNormalMaterial /> | ||
</TresInstancedMesh> | ||
|
||
<TresGridHelper :args="[10, 10]" /> | ||
</TresCanvas> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# Sampler <Badge type="warning" text="^3.7.0" /> | ||
|
||
Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points. | ||
|
||
<DocsDemo> | ||
<SamplerDemo /> | ||
</DocsDemo> | ||
|
||
## Usage | ||
|
||
`Experience.vue` | ||
|
||
<<< @/.vitepress/theme/components/SamplerDemo.vue{4,12-21} | ||
|
||
## Props | ||
|
||
| Props | Description | | ||
|--------------|--------------------------------------------------------------------| | ||
| mesh | **Mesh** Surface mesh from which to sample | | ||
| count | **Number** Number of samples | | ||
| instanceMesh | **InstanceMesh** InstanceMesh to scatter | | ||
| weight | **String** A vertex attribute to be used as a weight when sampling | | ||
| transform | **Function** A function that can be used as a custom sampling | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# useSurfaceSampler <Badge type="warning" text="^3.7.0" /> | ||
|
||
A hook to obtain the result of the <Sampler /> as a buffer. Useful for driving anything other than InstancedMesh via the Sampler. | ||
|
||
<DocsDemo> | ||
<UseSurfaceSamplerDemo /> | ||
</DocsDemo> | ||
|
||
## Usage | ||
|
||
<<< @/.vitepress/theme/components/UseSurfaceSamplerDemo.vue{4,10,19-29} | ||
|
||
## Props | ||
|
||
| Props | Description | | ||
|--------------|--------------------------------------------------------------------| | ||
| mesh | **Mesh** Surface mesh from which to sample | | ||
| count | **Number** Number of samples | | ||
| instanceMesh | **InstanceMesh** InstanceMesh to scatter | | ||
| weight | **String** A vertex attribute to be used as a weight when sampling | | ||
| transform | **Function** A function that can be used as a custom sampling | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<script setup lang="ts"> | ||
import { ref, shallowReactive } from 'vue' | ||
import { TresCanvas } from '@tresjs/core' | ||
import { OrbitControls, Sampler, useTweakPane } from '@tresjs/cientos' | ||
import { SRGBColorSpace, ACESFilmicToneMapping } from 'three' | ||
import type { Mesh } from 'three' | ||
const gl = { | ||
clearColor: '#82DBC5', | ||
shadows: true, | ||
alpha: false, | ||
outputColorSpace: SRGBColorSpace, | ||
toneMapping: ACESFilmicToneMapping, | ||
} | ||
const torusRef = ref<Mesh>() | ||
const instancesRef = ref<Mesh>() | ||
const state = shallowReactive({ | ||
count: 1, | ||
}) | ||
const { pane } = useTweakPane() | ||
pane.addInput(state, 'count', { | ||
label: 'samplers', | ||
min: 1, | ||
max: 50, | ||
step: 1, | ||
}) | ||
</script> | ||
|
||
<template> | ||
<TresLeches /> | ||
<TresCanvas v-bind="gl"> | ||
<TresPerspectiveCamera :position="[0, 0.5, 5]" /> | ||
<OrbitControls /> | ||
|
||
<Sampler :count="state.count"> | ||
<TresMesh ref="torusRef"> | ||
<TresTorusGeometry /> | ||
</TresMesh> | ||
|
||
<TresInstancedMesh | ||
ref="instancesRef" | ||
:args="[null!, null!, 1000]" | ||
> | ||
<TresBoxGeometry | ||
:args="[0.1, 0.1, 0.1]" | ||
/> | ||
<TresMeshNormalMaterial /> | ||
</TresInstancedMesh> | ||
</Sampler> | ||
<TresGridHelper | ||
:args="[10, 10]" | ||
/> | ||
</TresCanvas> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<script setup lang="ts"> | ||
import { TresCanvas } from '@tresjs/core' | ||
import { OrbitControls, useSurfaceSampler } from '@tresjs/cientos' | ||
const torusRef = ref() | ||
const instancesRef = ref() | ||
watch(torusRef, (value) => { | ||
useSurfaceSampler(value, 50, instancesRef.value, 'color') | ||
}) | ||
</script> | ||
|
||
<template> | ||
<TresCanvas clear-color="#82DBC5"> | ||
<TresPerspectiveCamera :position="[0, 0.5, 5]" /> | ||
<OrbitControls /> | ||
|
||
<TresMesh | ||
ref="torusRef" | ||
> | ||
<TresTorusGeometry /> | ||
</TresMesh> | ||
|
||
<TresInstancedMesh | ||
ref="instancesRef" | ||
:args="[null!, null!, 1_000]" | ||
> | ||
<TresSphereGeometry | ||
:args="[0.1, 32, 32]" | ||
/> | ||
<TresMeshNormalMaterial /> | ||
</TresInstancedMesh> | ||
|
||
<TresGridHelper | ||
:args="[10, 10]" | ||
/> | ||
</TresCanvas> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<!-- eslint-disable max-len --> | ||
<script setup lang="ts"> | ||
import { ref, watchEffect } from 'vue' | ||
import type { InstancedMesh, Mesh } from 'three' | ||
import type { useSurfaceSamplerProps } from '.' | ||
import { useSurfaceSampler } from '.' | ||
const props = defineProps<useSurfaceSamplerProps>() | ||
const samplerRef = ref() | ||
const instancedRef = ref() | ||
const meshToSampleRef = ref() | ||
watchEffect(() => { | ||
instancedRef.value = props.instanceMesh ?? samplerRef.value?.children.find((c: any ) => c.hasOwnProperty('instanceMatrix')) as InstancedMesh | ||
meshToSampleRef.value = props.mesh ?? (samplerRef.value?.children.find((c: any) => c.type === 'Mesh') as Mesh) | ||
useSurfaceSampler(meshToSampleRef.value, props.count, instancedRef.value, props.weight, props.transform) | ||
}) | ||
defineExpose({ | ||
samplerRef, | ||
}) | ||
</script> | ||
|
||
<template> | ||
<TresGroup ref="samplerRef"> | ||
<slot /> | ||
</TresGroup> | ||
</template> |
Oops, something went wrong.