Decal — WIP
The cientos package provides an abstraction of the Decal Geometry, <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.
Debug Mode
It is crucial to use debug mode to position elements accurately. Without debug mode, you won't be able to see the exact placement and orientation of the decals, making it difficult to achieve the desired results.
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 datas of decal(s)
WARNING
Debug mode requires the camera controller OrbitControls. It must be present in the scope of <TresCanvas>, if not, add it temporarily to add Decal(s).
When you use debug mode on one <Decal>, you cannot use it on another <Decal>.
// 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 for a better experience. When you remove debug mode, your settings will be restored.
See decalsDatas part to see the contents of the Decal's datas object of the demo.
Decal Datas
Partie ou on explique la structure d'un objet exporté par le debug mode
JSON object for examples : Minimal, Various materials, Mesh prop
decalsDatas
JSON object for example : Model
modelDatas
Usage
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.
See decalsDatas part to see the contents of the Decal's datas object of the demo.
Various materials
If the 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.
See decalsDatas 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.
See decalsDatas part to see the contents of the Decal's datas object of the demo.
Model
<Decal> can be applied to an imported model!
See modelDatas part to see the contents of the Decal datas object of the demo.
Props
| Prop | Description | Default |
|---|---|---|
| debug | boolean — Debug mode (Useful for positioning Decal) | false |
| map | Texture or null — The color map. The map should be applied to the <Decal> when no material is applied as a child. (See usages for more details) | null |
| mesh | Mesh or null — Define the surface to which the decal must attach using the mesh prop. (See Mesh Prop part for more details) | null |
| data | number[] — Position of the decal. Transformed into Vector3 | [-9999,-9999,-9999] |
| 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. Sorting is from lowest to highest. | Math.round(Math.random() * 100) |