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, SVG as MySVG, OrbitControls } from '@tresjs/cientos'
import { TresCanvas, useTexture } from '@tresjs/core'

const normalMapSrc = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/textures/rock/normal.jpg'
const normalMap = await 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.