MeshReflectionMaterial

The cientos package provides a <MeshReflectionMaterial /> component for making floors or walls that reflect the objects in your Scene.

The component is based on the excellent Drei component of the same name.

It extends THREE.MeshStandardMaterial and accepts all the same props.

Usage

<script setup lang="ts">
import { MeshReflectionMaterial, UseSVG as MySVG, OrbitControls, useTexture } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const normalMapSrc = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/textures/rock/normal.jpg'
const { state: normalMap } = useTexture(normalMapSrc)
const svgSrc = '/logo.svg'
</script>

<template>
  <Suspense>
    <TresCanvas clear-color="white">
      <TresMesh :rotation-x="-Math.PI / 2">
        <TresPlaneGeometry :args="[30, 30]" />
        <MeshReflectionMaterial
          :roughness="0"
          :normal-map="normalMap"
        />
      </TresMesh>
      <TresPerspectiveCamera :position="[0, 2, 20]" />
      <OrbitControls />
      <MySVG
        :src="svgSrc"
        :position="[-8.0, 4, 0]"
        :scale="0.04"
        :depth="1"
      />
    </TresCanvas>
  </Suspense>
</template>

Props

No props are required.