Cientos

Appearance

MeshGlassMaterial ^3.2.0 ​

The cientos package provides a new<MeshGlassMaterial /> component that makes a geometry look like glass. This is achieved by re-defining the MeshPhysicalMaterial so all the default props can be passed normally.

Usage ​

You can use it like you normally do with TresJs ​

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

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusKnotGeometry :args="[1, 0.4, 256, 20]" />
      <MeshGlassMaterial />
    </TresMesh>
    <TresMesh :position="[0, 0, -1]">
      <TresPlaneGeometry :args="[5, 5]" />
      <TresMeshBasicMaterial :color="0xFF1111" />
    </TresMesh>
    <TresGridHelper :args="[10, 10]" />
    <TresAmbientLight />
    <TresDirectionalLight :position="[2, 2, 2]" />
    <OrbitControls />
  </TresCanvas>
</template>

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

vue
<script setup lang="ts">
import { ref, shallowRef, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { MeshGlassMaterial, Box } from '@tresjs/cientos'

const glassMaterialRef = shallowRef()
const boxRef = shallowRef()

watch(glassMaterialRef, value => {
  // For good practice we dispose the old material
  boxRef.value.instance.material.dispose()

  // We assign the new MeshGlassMaterialClass
  boxRef.value.instance.material = value.MeshGlassMaterialClass
})
</script>
<template>
  <TresMesh>
    <TresTorusGeometry />
    <MeshGlassMaterial ref="glassMaterialRef" />
  </TresMesh>
  <!-- Mesh to be replaced -->
  <TresMesh ref="boxRef">
    <TresBoxGeometry />
    <MeshBasicMaterial  />
  </TresMesh>
</template>

Tips ​

For more fine tuning effects you can provide an environment map texture as an envMap and play with the intensity to achieve a more realistic effect

Also, another good option is to provide a normal texture as clearcoatNormalMap to add different results

You can find more information in the official ThreeJs docs. You can play with this example and be inspired. Also worth checking is this blog