-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b683fa0
commit 3755b76
Showing
3 changed files
with
92 additions
and
0 deletions.
There are no files selected for viewing
54 changes: 54 additions & 0 deletions
54
docs/.vitepress/theme/components/three/HalftoneThreeDemo.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,54 @@ | ||
| <script lang="ts" setup> | ||
| import { OrbitControls } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { EffectComposer, Halftone } from '@tresjs/post-processing/three' | ||
| import { useRouteDisposal } from '../../composables/useRouteDisposal' | ||
| // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components | ||
| const { effectComposer } = useRouteDisposal() | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas | ||
| clear-color="#121212" | ||
| :alpha="false" | ||
| :shadows="true" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[3, 2, 4]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls /> | ||
| <TresMesh | ||
| :position="[1, 0.5, 1]" | ||
| > | ||
| <TresBoxGeometry /> | ||
| <TresMeshStandardMaterial | ||
| color="hotpink" | ||
| /> | ||
| </TresMesh> | ||
| <TresMesh | ||
| :position="[-1.5, 0.75, 0]" | ||
| > | ||
| <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" /> | ||
| <TresMeshNormalMaterial /> | ||
| <TresMeshStandardMaterial | ||
| color="aqua" | ||
| /> | ||
| </TresMesh> | ||
|
|
||
| <TresGridHelper /> | ||
| <TresAmbientLight :intensity="0.9" /> | ||
| <TresDirectionalLight | ||
| :position="[-10, 5, 8]" | ||
| :intensity="2" | ||
| /> | ||
|
|
||
| <Suspense> | ||
| <EffectComposer ref="effectComposer"> | ||
| <Halftone :shape="1" :radius="4" :rotateR="Math.PI / 12" :rotateG="Math.PI / 3" :rotateB="Math.PI / 6" :scatter="0" :blending="1" :greyscale="false" /> | ||
| </EffectComposer> | ||
| </Suspense> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # Halftone | ||
|
|
||
| <DocsDemo> | ||
| <HalftoneThreeDemo /> | ||
| </DocsDemo> | ||
|
|
||
| Halftone is an effect that simulates the halftone printing technique, which uses dots of varying sizes and spacing to create the illusion of continuous tone images. This effect can be used to give your 3D scenes a unique, comic book-like appearance. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { EffectComposer, Halftone } from '@tresjs/post-processing/three' | ||
| </script> | ||
| <template> | ||
| <EffectComposer> | ||
| <Halftone :shape="1" :radius="4" :rotateR="Math.PI / 12" :rotateG="Math.PI / 3" :rotateB="Math.PI / 6" :scatter="0" :blending="1" :greyscale="false" /> | ||
| </EffectComposer> | ||
| </template> | ||
| ``` | ||
| ## Props | ||
|
|
||
| ## Props | ||
|
|
||
| | Prop | Description | Default | | ||
| |---------------|---------------------------------------------------------------------------------------------------|---------| | ||
| | `shape` | The shape of the halftone dots. Can be `1` (Dot), `2` (Ellipse), `3` (Line), or `4` (Square). | `1` | | ||
| | `radius` | The radius of the halftone dots. | `4` | | ||
| | `rotateR` | The rotation of the red channel. | `0` | | ||
| | `rotateG` | The rotation of the green channel. | `0` | | ||
| | `rotateB` | The rotation of the blue channel. | `0` | | ||
| | `scatter` | The scatter of the halftone dots. | `0` | | ||
| | `blending` | The blending mode of the halftone effect. | `1` | | ||
| | `greyscale` | If true, the halftone effect will be in greyscale. | `false` | | ||
| | `blendingMode`| The blending mode used for the halftone effect. | `1` | |