Skip to content

HolographicMaterial

A simple to use holographic material for TresJS

Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla three.js. This enchanting three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.

While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.

INFO

This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.

Usage

vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { HolographicMaterial, Sphere } from '@tresjs/cientos'

</script>
<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <Sphere :scale="0.5">
      <HolographicMaterial />
    </Sphere>
    <TresAmbientLight />
  </TresCanvas>
</template>

Replace a mesh's material

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

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

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>

Props

PropDescriptionTypedefault
fresnelAmountValue of the Fresnel effect. Ranges from 0.0 to 1.0.Number0.45
fresnelOpacityOpacity of the Fresnel effect. Ranges from 0.0 to 1.0.Number1.0
scanlineSizeSize of the scanlines. Ranges from 1 to 15.Number8.0
hologramBrightnessBrightness of the hologram. Ranges from 0.0 to 2.0.Number1.2
signalSpeedSpeed of the signal effect. Ranges from 0.0 to 2.0.Number0.45
hologramColorSpecifies the color of the hologram.String"#00d5ff"
enableBlinkingEnables or disables the blinking effect.Booleantrue
hologramOpacitySpecifies the opacity of the hologram.Number1.0
blinkFresnelOnlyEnables or disables the blinking effect for the Fresnel only.Booleantrue
enableAdditiveEnables or disables the Additive Blend Mode.Booleantrue
sideSpecifies side for the material, as String.THREE.FrontSide, THREE.BackSide, THREE.DoubleSideFrontSide