feat(app): Add holographic material to cientos

[JaimeTorrealba]

No description provided.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[andretchen0]

Hey @JaimeTorrealba !

Looks great! Nice addition!

Just a few changes.

[andretchen0]

(non-blocking)

Cool effect! I like it!

Here's how the demo shows up for me:

Can we show it off more by zooming in on the face a little and centering it vertically?

And add a <Levioso />?

Maybe like this?

<script setup lang="ts">
import { shallowRef, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { HolographicMaterial, OrbitControls, useGLTF, Levioso } from '@tresjs/cientos'

const path = 'https://raw.githubusercontent.com/'
+ 'Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
const { scene } = await useGLTF(path)

const holographicMaterialRef = shallowRef()

watch(holographicMaterialRef, (value) => {
  scene.traverse((child) => {
    if (child.isMesh) {
      child.material.dispose()
      child.material = value.root
    }
  })
})
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 0, 6]" />
    <Levioso :speed="5">
      <primitive
        :object="scene"
        :position-y="-2.5"
      >
        <HolographicMaterial ref="holographicMaterialRef" />
      </primitive>
    </Levioso>
    <OrbitControls />
  </TresCanvas>
</template>

[andretchen0]

(non-blocking)

Maybe format as a header and change "threejs" to "TresJS"?

## A simple to use holographic material for TresJS

[andretchen0]

Change to:

This component ports Anderson Mancini's [threejs-vanilla-holographic-material](https://github.com/ektogamat/threejs-vanilla-holographic-material) to TresJS. All credit goes to him.

[andretchen0]

This adds the wrong demo, I think. It should be

<<< @/.vitepress/theme/components/HolographicMaterialDemo.vue

[andretchen0]

(non-blocking)

Are you using the <Sphere> to have something to attach the material to, so you can get the ref? Currently anyway, you can attach the material to the <primitive> and get the ref there.

      <primitive :object="scene">
        <HolographicMaterial ref="holographicMaterialRef" />
      </primitive>

[andretchen0]

(non-blocking)

I'd drop "Controls the" and "Specifies the" in the descriptions. The descriptions read fine without the extra words. And shorter descriptions makes them easier to scan.

E.g.,

• "Value of the Fresnel effect. Ranges from 0.0 to 1.0."
• "Opacity of the Fresnel effect. Ranges from 0.0 to 1.0."
• "Size of the scanlines. Ranges from 1 to 15."

[andretchen0]

props => Props

We've been capitalizing it in other pages.

[andretchen0]

This line (starting with enableBlinking) can be deleted. It was added to the table twice.

[andretchen0]

(non-blocking)

To me, it looks a little funny to have this long header floating between 2 code blocks. Maybe change to:

### Replace a mesh's material

You can also replace the material of an existing mesh like this:

[andretchen0]

@JaimeTorrealba @alvarosabu

Is this sufficient for the license?

I have zero legal knowledge, but reading over the MIT license from the repo, it sounds like the whole text needs to accompany Anderson Mancini's code.

Here's the salient bit:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

[JaimeTorrealba]

I already implemented all the feedbacks, as always thanks for take your time to do it, and the quality of them, it makes me grow as a professional and have a better library.

Btw the levioso advice it was just perfect 👍

[andretchen0]

I already implemented all the feedbacks, as always thanks for take your time to do it, and the quality of them, it makes me grow as a professional and have a better library.

That's really nice to hear. Thanks!