NgtsMeshReflectorMaterial

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-mesh-reflector-material',
    template: `
        <ngt-canvas [camera]="{ position: [0, 2, 5], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'mesh-reflector-material-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class MeshReflectorMaterial {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsMeshReflectorMaterial } from 'angular-three-soba/materials';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh [position]="[0, 1, 0]">
            <ngt-torus-knot-geometry *args="[0.5, 0.2, 128, 32]" />
            <ngt-mesh-standard-material color="#ff6b6b" [metalness]="0.5" [roughness]="0.2" />
        </ngt-mesh>

        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]">
            <ngt-plane-geometry *args="[10, 10]" />
            <ngts-mesh-reflector-material
                [options]="{
                    resolution: 512,
                    mirror: 0.75,
                    mixBlur: 10,
                    mixStrength: 2,
                    color: '#a0a0a0',
                    metalness: 0.5,
                    roughness: 1,
                }"
            />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsMeshReflectorMaterial],
})
export class SceneGraph {
    protected readonly Math = Math;
}

NgtsMeshReflectorMaterial is a port of Drei’s MeshReflectorMaterial that creates realistic reflections on a planar surface. It supports blur, depth-based effects, distortion, and mirror-like reflections.

The parent mesh should be a flat plane for best results.

Usage

import { NgtsMeshReflectorMaterial } from 'angular-three-soba/materials';

<ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]">
    <ngt-plane-geometry *args="[10, 10]" />
    <ngts-mesh-reflector-material
        [options]="{
            blur: [300, 100],
            resolution: 1024,
            mixBlur: 1,
            mixStrength: 50,
            mirror: 0.5,
            color: '#a0a0a0'
        }"
    />
</ngt-mesh>

Floor Reflection Example

@Component({
    template: `
        <!-- Reflective floor -->
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, -1, 0]">
            <ngt-plane-geometry *args="[50, 50]" />
            <ngts-mesh-reflector-material
                [options]="{
                    blur: [400, 100],
                    resolution: 1024,
                    mixBlur: 1,
                    mixStrength: 15,
                    depthScale: 1,
                    minDepthThreshold: 0.85,
                    color: '#151515',
                    metalness: 0.6,
                    roughness: 1
                }"
            />
        </ngt-mesh>

        <!-- Objects to reflect -->
        <ngt-mesh [position]="[0, 0, 0]">
            <ngt-box-geometry />
            <ngt-mesh-standard-material color="orange" />
        </ngt-mesh>
    `
})
export class ReflectiveFloor {
    Math = Math;
}

The reflection quality depends on the resolution setting. Higher values produce sharper reflections but require more GPU resources.

Options

options input accepts any properties from THREE.MeshStandardMaterial in addition to the following:

Properties

name	type	description
resolution	number	Resolution of the reflection render target.
mixBlur	number	Amount of blur mixing applied to the reflection.
mixStrength	number	Strength of the reflection mix.
blur	[number, number] | number	Blur amount as [x, y] or a single value.
mirror	number	Mirror reflection intensity (0 = no mirror, 1 = full mirror).
minDepthThreshold	number	Minimum depth threshold for depth-based effects.
maxDepthThreshold	number	Maximum depth threshold for depth-based effects.
depthScale	number	Scale factor for depth-based effects.
depthToBlurRatioBias	number	Bias ratio between depth and blur effects.
distortion	number	Distortion intensity applied to the reflection.
mixContrast	number	Contrast adjustment for the reflection mix.
reflectorOffset	number	Offset of the reflector plane along its normal.
distortionMap	THREE.Texture	Optional texture to apply distortion effects.