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
75897e6
commit 7a2d29f
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <script setup lang="ts"> | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { OrbitControls, useGLTF } from '@tresjs/cientos' | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas clear-color="#82DBC5"> | ||
| <TresPerspectiveCamera :position="[3, 3, 3]" /> | ||
| <OrbitControls make-default /> | ||
|
|
||
| <TresAmbientLight /> | ||
| <TresDirectionalLight :position="[0, 2, 4]" /> | ||
| <TresGridHelper /> | ||
| </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,152 @@ | ||
| # Decal | ||
|
|
||
| <!-- <DocsDemo> | ||
| <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. | ||
|
|
||
| Thanks to its debugging tool 🛠️, it's much easier to position and orientate Decals on objects, models and so on. It also offers a simple way of exporting the data from your `<Decal>` so you can see it permanently on an element. | ||
|
|
||
| ::: info | ||
| This component is still under development, so please report any problems or suggestions on the [@tresjs/cientos](https://github.com/Tresjs/cientos) repository on GitHub. | ||
| ::: | ||
|
|
||
| ## Usage | ||
|
|
||
| ::: info | ||
| In most cases where the `<Decal>` component is used, it is best to use `v-bind` and insert an array object containing data of the `[positions, orientations, sizes, normals]` of a Decal (this data can be recovered using the [debug mode](#debug-mode)). | ||
| ::: | ||
|
|
||
| ::: warning | ||
| If you modify the position of a parent of `Decal(s)` after having already exported their position(s), you will have to re-export the data with the new positions via [debug mode](#debug-mode). | ||
| ::: | ||
|
|
||
| ### Minimal | ||
|
|
||
| The minimal version is very easy to set up: you just need to insert a `<Decal>` component with a map props for the Texture and a call to `v-bind`. | ||
|
|
||
| *The default material is [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial)*. | ||
|
|
||
| <!-- <DocsDemo> | ||
| <DecalDemoBasic /> | ||
| </DocsDemo> | ||
| <<< @/.vitepress/theme/components/DecalDemoBasic.vue{3-4,6-7,16-17} --> | ||
|
|
||
| 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). | ||
|
|
||
| <!-- <DocsDemo> | ||
| <DecalDemoMaterial /> | ||
| </DocsDemo> --> | ||
|
|
||
| <!-- <<< @/.vitepress/theme/components/DecalDemoMaterial.vue{3-4,6-7,18-23} --> | ||
|
|
||
| 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 />`. As in the example below ⬇️ | ||
| ::: | ||
|
|
||
| <!-- <DocsDemo> | ||
| <DecalDemoMeshProp /> | ||
| </DocsDemo> --> | ||
|
|
||
| <!-- <<< @/.vitepress/theme/components/DecalDemoMeshProp.vue{2,4-5,7,9-10,18,22-23} --> | ||
|
|
||
| See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo. | ||
|
|
||
| ### Model | ||
| `<Decal>` can be applied to an imported model! | ||
|
|
||
| <!-- <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. | ||
|
|
||
| ### Debug Mode | ||
| Description | ||
|
|
||
| ::: warning | ||
| 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" /> | ||
| ``` | ||
| ::: | ||
|
|
||
| ::: 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. | ||
| ::: | ||
|
|
||
| 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). | ||
|
|
||
| <!-- <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 | ||
|
|
||
| Demo | ||
|
|
||
| Code | ||
| ### SurfaceSampler Example | ||
| Description | ||
|
|
||
| Demo | ||
|
|
||
| Code | ||
|
|
||
| ## 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 --> | ||
| ::: | ||
|
|
||
| JSON object for example : [Model](#model) | ||
| :::details modelDatas | ||
| <!-- <<< @/.vitepress/theme/assets/decal/modelDatas.json --> | ||
| ::: | ||
|
|
||
| ## Props | ||
|
|
||
| | Prop | Description | Default | | ||
| | :---------------- | :--------------------------------------------------- | ------------------------- | | ||
| | **debug** | `boolean` — Debug mode (Useful for positioning Decal) | `false` | | ||
| | **map** | [`Texture`](https://threejs.org/docs/#api/en/textures/Texture) or `null` — The color map. The map should be applied to the `<Decal>` when no material is applied as a child. (See [usages](#usage) for more details) | `null` | | ||
| | **mesh** | [`Mesh`](https://threejs.org/docs/#api/en/objects/Mesh) or `null` — Define the surface to which the decal must attach using the mesh prop. (See [Mesh Prop](#mesh-prop) part for more details) | `null` | | ||
| | **position** | `number[]` — Position of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3) | `[-9999,-9999,-9999]` | | ||
| | **orientation** | `number[]` — Orientation of the decal. Transformed into [`Euler`](https://threejs.org/docs/#api/en/math/Euler) | `[0,0,0]` | | ||
| | **size** | `number[]` — Size of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3) | `[1,1,1]` | | ||
| | **normal** | `number[]` — Normal of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3) | `[0,0,0]` | | ||
| | **polygonOffsetFactor** | `number` — Sets the polygon offset factor | `-10` | | ||
| | **depthTest** | `boolean` — Whether to have depth test enabled when rendering this material. | `true` | | ||
| | **depthWrite** | `boolean` — Whether rendering this material has any effect on the depth buffer. | `false` | | ||
| | **order** | `number` — This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. <br /> **Sorting is from lowest to highest.** | `Math.round(Math.random() * 100)` | |
Binary file not shown.
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,202 @@ | ||
| { | ||
| "glb": { | ||
| "position": [ | ||
| -13.54854422606721, | ||
| 18.384044556860996, | ||
| 6.358383097269183 | ||
| ], | ||
| "orientation": [ | ||
| -0.6272934257338958, | ||
| 0.9807035105497516, | ||
| 0.5421646053685236 | ||
| ], | ||
| "size": [ | ||
| 5, | ||
| 5, | ||
| 5 | ||
| ], | ||
| "normal": [ | ||
| 0.8308890361799289, | ||
| 0.3266044944856527, | ||
| 0.4505029564140062 | ||
| ] | ||
| }, | ||
| "sphere": [ | ||
| { | ||
| "position": [ | ||
| 4.489425484731065, | ||
| 1.1314086645569787, | ||
| 8.758887782140448 | ||
| ], | ||
| "orientation": [ | ||
| -0.11068618405775012, | ||
| 0.48832627129794015, | ||
| 0.05209418487650464 | ||
| ], | ||
| "size": [ | ||
| 10, | ||
| 10, | ||
| 10 | ||
| ], | ||
| "normal": [ | ||
| 0.46914844383249255, | ||
| 0.0975496356837158, | ||
| 0.8777151053887161 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| -3.1276832469914044, | ||
| 3.522540787003642, | ||
| -8.755249592588946 | ||
| ], | ||
| "orientation": [ | ||
| -2.8360042783451482, | ||
| -0.28160486130708523, | ||
| -3.054147839505262 | ||
| ], | ||
| "size": [ | ||
| 10, | ||
| 10, | ||
| 10 | ||
| ], | ||
| "normal": [ | ||
| -0.27789765270100525, | ||
| 0.2890038976574822, | ||
| -0.9161056935539998 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| 7.225254173070432, | ||
| -6.567586674064216, | ||
| -1.839877818312452 | ||
| ], | ||
| "orientation": [ | ||
| 1.9122951877748846, | ||
| 0.8347952567068291, | ||
| -1.005661019577059 | ||
| ], | ||
| "size": [ | ||
| 5, | ||
| 5, | ||
| 5 | ||
| ], | ||
| "normal": [ | ||
| 0.7411590770619058, | ||
| -0.6325626901555187, | ||
| -0.2248280799009708 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| -9.145761655322616, | ||
| -0.48365392283013975, | ||
| 3.9003224195390835 | ||
| ], | ||
| "orientation": [ | ||
| 0.20500804908501977, | ||
| -1.071073020592291, | ||
| 0.47722193677771846 | ||
| ], | ||
| "size": [ | ||
| 6, | ||
| 6, | ||
| 6 | ||
| ], | ||
| "normal": [ | ||
| -0.8777151823679018, | ||
| -0.09754963724792012, | ||
| 0.4691482994892766 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| -3.9923799018412947, | ||
| -9.04773853615535, | ||
| -1.1838677095555976 | ||
| ], | ||
| "orientation": [ | ||
| 1.7254622619327877, | ||
| -0.4698957926052585, | ||
| 1.9024125813461839 | ||
| ], | ||
| "size": [ | ||
| 10, | ||
| 10, | ||
| 10 | ||
| ], | ||
| "normal": [ | ||
| -0.4527933749117019, | ||
| -0.8809723068406046, | ||
| -0.13735339171645689 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| 7.614105777099155, | ||
| 4.447629116105464, | ||
| -4.558882283691162 | ||
| ], | ||
| "orientation": [ | ||
| -2.295928095238506, | ||
| 0.8924584523609037, | ||
| 2.420719932655658 | ||
| ], | ||
| "size": [ | ||
| 10, | ||
| 10, | ||
| 10 | ||
| ], | ||
| "normal": [ | ||
| 0.7786167771458316, | ||
| 0.46962835188758084, | ||
| -0.4161791987238105 | ||
| ] | ||
| }, | ||
| { | ||
| "position": [ | ||
| -3.076385701843403, | ||
| 9.27649407708185, | ||
| 2.059685927826127 | ||
| ], | ||
| "orientation": [ | ||
| -1.3797816849381217, | ||
| -0.22733995932927845, | ||
| -0.8617006769310226 | ||
| ], | ||
| "size": [ | ||
| 5, | ||
| 5, | ||
| 5 | ||
| ], | ||
| "normal": [ | ||
| -0.22538672781607227, | ||
| 0.9565494703780344, | ||
| 0.18497008851126578 | ||
| ] | ||
| } | ||
| ], | ||
| "box": { | ||
| "position": [ | ||
| -0.3328145803203455, | ||
| 5, | ||
| -0.03354545117475283 | ||
| ], | ||
| "orientation": [ | ||
| -1.57069632679523, | ||
| 0, | ||
| 0 | ||
| ], | ||
| "size": [ | ||
| 5, | ||
| 5, | ||
| 5 | ||
| ], | ||
| "normal": [ | ||
| 0, | ||
| 1, | ||
| 0 | ||
| ] | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.