Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: decal (WIP) #577

Open
wants to merge 36 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
2814365
feat(cientos): Add first version Decal component
damienmontastier Mar 7, 2024
66e4403
Merge branch 'Tresjs:main' into feature/282-add-decal-component
damienmontastier Mar 7, 2024
5154631
feat(cientos): Add first version Decal component console.log
damienmontastier Mar 7, 2024
224d9df
feat(cientos/decal): pre-alpha with corrections
damienmontastier Mar 10, 2024
f7865fd
feat(cientos/decal): add logos, datas json, reorder
damienmontastier Mar 10, 2024
34fa040
feat(cientos/decal): clean up
damienmontastier Mar 11, 2024
672ba67
feat(cientos/decal): clean up v2
damienmontastier Mar 11, 2024
1c67ff5
feat(cientos/decal): clean up, start writing documenation
damienmontastier Mar 12, 2024
690894c
feat(cientos/decal): writing documenation and examples
damienmontastier Mar 12, 2024
64c5a45
feat(cientos/decal): little test
damienmontastier Mar 12, 2024
5f74e76
update
damienmontastier Dec 14, 2024
6ac2810
wip decal debug
damienmontastier Dec 18, 2024
075c61e
wip debug
damienmontastier Dec 18, 2024
0bc13f8
wip debug
damienmontastier Dec 19, 2024
930ca96
wip debug
damienmontastier Dec 21, 2024
2b16a10
wip debug
damienmontastier Dec 21, 2024
aef6f45
wip debug
damienmontastier Dec 21, 2024
ae9ac2a
first version
damienmontastier Dec 21, 2024
8322071
first version
damienmontastier Dec 21, 2024
3ef9aeb
lint index decal
damienmontastier Dec 21, 2024
29d29d5
importDecals from export
damienmontastier Dec 21, 2024
c763288
importDecals from export
damienmontastier Dec 21, 2024
e39b300
fix some issue, add utils file
damienmontastier Dec 21, 2024
0760662
wip ts
damienmontastier Dec 30, 2024
6af05f3
Merge branch 'main' into feature/282-add-decal-component
damienmontastier Dec 30, 2024
cdce104
wip lint fix
damienmontastier Dec 30, 2024
70aee8b
fix eslint and array decals
damienmontastier Dec 30, 2024
8001924
fix eslint and array decals
damienmontastier Dec 30, 2024
cd0f160
fix eslint/ts
damienmontastier Jan 2, 2025
1b7eda9
Merge branch 'main' into feature/282-add-decal-component
damienmontastier Jan 2, 2025
67b6f40
fix eslint/ts
damienmontastier Jan 2, 2025
e573eec
fix eslint/ts
damienmontastier Jan 2, 2025
33aee9c
wip documentation
damienmontastier Jan 3, 2025
b85391e
merge
damienmontastier Jan 24, 2025
5db0c4b
merge main
damienmontastier Feb 13, 2025
260ba1b
add resizer component for debug, test with html abstraction
damienmontastier Feb 17, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(cientos/decal): writing documenation and examples
damienmontastier committed Mar 12, 2024
commit 690894c085b51447d4f82c9463ff673e48bbb6c7
22 changes: 22 additions & 0 deletions docs/.vitepress/theme/assets/decal/modelDatas.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"position": [
-0.05474001555325014,
1.5981405364412373,
1.3792617129067388
],
"orientation": [
-0.32190543590405507,
-0.015366481877823888,
-0.005124558646428661
],
"size": [
1,
1,
1
],
"normal": [
-0.01536587714023159,
0.31633734387448864,
0.9485223111187974
]
}
32 changes: 32 additions & 0 deletions docs/.vitepress/theme/components/DecalDemoDebug.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<script setup lang="ts">
import { TresCanvas, useTexture } from '@tresjs/core'
import { Decal, OrbitControls, Sphere } from '@tresjs/cientos'
import { TresLeches, useControls } from '@tresjs/leches'
import decalsDatas from '../assets/decal/basicDatas.json'
import '@tresjs/leches/styles'

const vueLogo = await useTexture(['/cientos/decal/vuejs-logo.png'])
const threejsLogo = await useTexture(['/cientos/decal/threejs-logo.png'])
const nuxtjsLogo = await useTexture(['/cientos/decal/nuxtjs-logo.png'])

useControls({})
</script>

<template>
<TresLeches class="top-0 important-left-4" />

<TresCanvas clearColor="#82DBC5">
<TresPerspectiveCamera :position="[5, 2.5, 5]" />
<OrbitControls make-default auto-rotate />

<Sphere :args="[1.75, 32, 16]">
<Decal v-bind="decalsDatas.three" :map="threejsLogo" />
<Decal v-bind="decalsDatas.vue" :map="vueLogo" />
<Decal debug :map="nuxtjsLogo" />
</Sphere>

<TresAmbientLight :intensity="1.25" />
<TresDirectionalLight :intensity="1.5" :position="[-2, -1.5, 2]" />
<TresDirectionalLight :intensity="1.5" :position="[2, 1.5, 2]" />
</TresCanvas>
</template>
33 changes: 33 additions & 0 deletions docs/.vitepress/theme/components/DecalDemoModel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup lang="ts">
import { shallowRef } from 'vue'
import { TresCanvas, useTexture } from '@tresjs/core'
import { Decal, OrbitControls, useGLTF } from '@tresjs/cientos'
import modelDatas from '../assets/decal/modelDatas.json'

const modelRef = shallowRef(null);

const model = await useGLTF('/cientos/decal/LeePerrySmith.glb')
modelRef.value = model.nodes.LeePerrySmith

const vueLogo = await useTexture(['/cientos/decal/vuejs-logo.png'])
</script>

<template>
<TresCanvas clearColor="#82DBC5">
<TresPerspectiveCamera :position="[1.5, 2.5, 6.5]" />
<OrbitControls make-default />

<Suspense>
<TresMesh :scale="[.65, .65, .65]" :geometry="modelRef.geometry">
<TresMeshPhysicalMaterial :roughness=".5" />

<Decal v-bind="modelDatas" :map="vueLogo">
<TresMeshPhysicalMaterial :roughness=".2" />
</Decal>
</TresMesh>
</Suspense>

<TresAmbientLight :intensity="1.25" />
<TresDirectionalLight :intensity="1.5" :position="[2, 1.5, 2]" />
</TresCanvas>
</template>
67 changes: 46 additions & 21 deletions docs/guide/abstractions/decal.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Decal

<DocsDemo>
<DecalDemo />
<DecalDemoMaterial />
</DocsDemo>

The `cientos` package provides an abstraction of the [Decal Geometry](https://threejs.org/docs/#examples/en/geometries/DecalGeometry), `<Decal>` is versatile, such as enhancing models with unique details, dynamically altering visual environments, or seamlessly covering seams. This geometry generates a decal mesh that seamlessly integrates into your scene.
@@ -34,7 +34,7 @@ The minimal version is very easy to set up: you just need to insert a `<Decal>`

<<< @/.vitepress/theme/components/DecalDemoBasic.vue{3-4,6-7,16-17}

See [datas](#datas) part to see the contents of the Decal's datas object.
See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo.

### Various materials
If the [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial) doesn't suit you, you can assign the material you want to the `<Decal>`. You can now make them react to light 💡, simply by choosing the material that allows it, in this case the [MeshPhysicalMaterial](https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial).
@@ -45,13 +45,13 @@ If the [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicM

<<< @/.vitepress/theme/components/DecalDemoMaterial.vue{3-4,6-7,18-23}

See [datas](#datas) part to see the contents of the Decal's datas object.
See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo.

### Mesh Prop
Define the surface to which the decal must attach using the mesh prop.

::: warning
Shapes from [@tresjs/cientos](https://github.com/Tresjs/cientos) repository such as `<Sphere>`, `<Box>`, etc. do not work at the moment. You need to go through the method of using a `<TresMesh />` containing a `<TresGeometry />`.
Shapes from [@tresjs/cientos](https://github.com/Tresjs/cientos) repository such as `<Sphere>`, `<Box>`, etc. do not work at the moment. You need to go through the method of using a `<TresMesh />` containing a `<TresGeometry />`. As in the example below ⬇️
:::

<DocsDemo>
@@ -60,32 +60,53 @@ Shapes from [@tresjs/cientos](https://github.com/Tresjs/cientos) repository such

<<< @/.vitepress/theme/components/DecalDemoMeshProp.vue{2,4-5,7,9-10,18,22-23}

See [datas](#datas) part to see the contents of the Decal's datas object.
See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo.

### With GLB Model
Description
### Model
`<Decal>` can be applied to an imported model!

Demo
<DocsDemo>
<DecalDemoModel />
</DocsDemo>

<<< @/.vitepress/theme/components/DecalDemoModel.vue{2-5,7,9-10,12,20-28}

See [modelDatas](#decal-datas) part to see the contents of the Decal datas object of the demo.

Code
### Debug Mode
Description

::: warning
Debug mode work obligatory with Orbit Control (Si vous l'avez pas déjà ajouté, faite le)
Debug mode requires the camera controller [OrbitControls](/guide/controls/orbit-controls.html). It must be present in the scope of `<TresCanvas>`, if not, add it temporarily for your tests.
<br><br>
When you use debug mode on one `<Decal>`, you cannot use it on another `<Decal>`.

```vue
// BAD ❌
<Decal debug :map="texture1" />
<Decal debug :map="texture2" />

// GOOD ✅
<Decal debug :map="texture1" />
<Decal :map="texture2" />
```
:::

::: warning
Seulement un debug peut être ajouté par mesh (Voir example en dessous)
::: info
Debug mode automatically disables the `enableDamping` and `autoRotate` properties of [OrbitControls](/guide/controls/orbit-controls.html) for a better experience. When you remove debug mode, your settings will be restored.
:::

::: warning
Partie ou on explique la structure d'un objet exporté par le debug mode
:::
Dans notre cas, nous avons repris les examples précédents pour la positions des Decals du logo de Vue.js et Three.js, mais un nouveau `<Decal>` à été ajouté en debug mode avec en texture le logo de Nuxt.js. La ligne bleue lorsque vous survollez votre élement vous permez de savoir ou le `<Decal>` va être projeté, il vous suffit de cliquer et la texture que vous avez renseigné en prop de `<Decal debug>` sera projecté sur l'élement (La sphère dans notre cas).

Demo

Code
<DocsDemo>
<DecalDemoDebug />
</DocsDemo>

<<< @/.vitepress/theme/components/DecalDemoDebug.vue{2-6,8-10,12,16,22-26}

See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo.

### V-For
Description

@@ -99,17 +120,21 @@ Demo

Code

## Datas
## Decal Datas

Partie ou on explique la structure d'un objet exporté par le debug mode

JSON object for examples : [Minimal](#minimal), [Various materials](#various-materials), [Mesh prop](#mesh-prop)
:::details decalsDatas
<<< @/.vitepress/theme/assets/decal/basicDatas.json
:::

## Props


JSON object for example : [Model](#model)
:::details modelDatas
<<< @/.vitepress/theme/assets/decal/modelDatas.json
:::

## Props

| Prop | Description | Default |
| :---------------- | :--------------------------------------------------- | ------------------------- |
4 changes: 2 additions & 2 deletions playground/src/pages/abstractions/Decal.vue
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ useControls({})
<OrbitControls auto-rotate make-default />

<!-- BASIC EXAMPLE -->
<Sphere :position="[0, 0, 0]" :args="[10, 32, 16]">
<!-- <Sphere :position="[0, 0, 0]" :args="[10, 32, 16]">
<TresMeshPhysicalMaterial color="white" :roughness=".5" />

<Decal debug :map="nuxtLogo" :size="[5, 5, 5]">
@@ -65,7 +65,7 @@ useControls({})
<Decal v-for="(decal, index) in datas.sphere" v-bind="decal" :key="`sphere-decal-${index}`">
<TresMeshPhysicalMaterial :roughness=".2" :map="getTexture(index)" />
</Decal>
</Sphere>
</Sphere> -->
<!-- BASIC EXAMPLE -->

<!-- EXAMPLE WITH A MODEL GLB -->