Location>code7788 >text

threejs implements specular reflection, only reflects the specified object, and the background is transparent

Popularity:190 ℃/2025-01-18 08:13:10
import { Reflector } from 'three/examples/jsm/objects/';
import { transparentMirrorShader } from '../'

//Create a specular plane
createMirrorPlane() {
    //Create a circular geometry
    const radius = 640; //radius of circle
    const segments = 256; //The number of subdivisions of the circle. The more subdivisions, the smoother the circle will be.
    const geometry = new (radius, segments);

    //Create Reflector
    const reflector = new Reflector(geometry, {
        color: 0x000000, //Set reflection color
        textureWidth:  * , //reflection texture width
        textureHeight:  * , //Reflection texture height
        shader: transparentMirrorShader,
        clipBias: 0.000 //Crop offset
    });

    const subModelNameList = ['wall', 'Skybox']
     = ;
     = function (renderer, scene, camera) {
        const scene1 = ();
        (child => {
            if (! && ! &&  && (ele => (ele))) {
                if (['wall'].some(ele => (ele))) {
                     = true;
                } else {
                     = false;
                }
            }
        });
        
        (renderer, scene1, camera);
    }

    //Set position and rotation
    (0, -0.01, 0);
     = - / 2;

     = 'Specular Reflection Plane';

     = true;

    //Add to scene
    this.(reflector);
},
export const transparentMirrorShader = {
    uniforms: {
        'color': {
            value: null
        },

        'tDiffuse': {
            value: null
        },

        'textureMatrix': {
            value: null
        }

    },

    vertexShader: /* glsl */`
        uniform mat4 textureMatrix;
        varying vec4 vUv;

        #include <common>
        #include <logdepthbuf_pars_vertex>

        void main() {

            vUv = textureMatrix * vec4( position, 1.0 );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

            #include <logdepthbuf_vertex>

        }`,

    fragmentShader: /* glsl */`
        uniform vec3 color;
        uniform sampler2D tDiffuse;
        varying vec4 vUv;

        #include <logdepthbuf_pars_fragment>

        float blendOverlay( float base, float blend ) {

            return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );

        }

        vec3 blendOverlay( vec3 base, vec3 blend ) {

            return vec3( blendOverlay( ,  ), blendOverlay( ,  ), blendOverlay( ,  ) );

        }

        void main() {

            #include <logdepthbuf_fragment>

            vec4 base = texture2DProj( tDiffuse, vUv );

            //Check if there is a valid reflection texture, make it transparent if not
            if ( < 0.1) {
                discard;
            }

            gl_FragColor = vec4( blendOverlay( , color ), 1 );

            #include <tonemapping_fragment>
            #include <encodings_fragment>

        }`
}