SSR PASS with rotating cube

bareBones.js

import * as THREE from "three"
import GUI from "lil-gui"

import {
    EffectComposer,
    EffectPass,
    RenderPass,
} from "postprocessing"
import { SSREffect } from "screen-space-reflections"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { TransformControls } from "three/examples/jsm/controls/TransformControls"

let params = {
    useComposer: false,
    addTransformControls: false
}
let renderDiv, scene, camera, controls, transformcontrols
let gui
let composer
const effects = {}

export const init = () => {
    gui = new GUI()
    renderDiv = document.getElementById("three-div")
    console.log("TEST PAGE")

    if (!renderDiv) {
        console.error("no render div")
        return
    }
    addGui()

    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    controls = new OrbitControls(camera, renderDiv)
    const renderer = new THREE.WebGLRenderer()
    // const renderer = new THREE.WebGLRenderer({
    //     powerPreference: "high-performance",
    //     premultipliedAlpha: false,
    //     depth: false,
    //     stencil: false,
    //     antialias: false,
    //     preserveDrawingBuffer: true
    // })
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderDiv.appendChild(renderer.domElement)
    composer = new EffectComposer(renderer)
    initComposer()

    const light = new THREE.PointLight(0xffffff, 1)
    light.position.set(1, 1, 1)
    scene.add(light)

    transformcontrols = new TransformControls(camera, renderDiv)
    transformcontrols.addEventListener('dragging-changed', function (event) {

        controls.enabled = !event.value;

    });
    // scene.add(transformcontrols)
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
    // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

    const cube = new THREE.Mesh(geometry, material)
    scene.add(cube)
    transformcontrols.attach(cube)
    {
        const geometry = new THREE.PlaneBufferGeometry(10, 10)
        geometry.rotateX(-Math.PI / 2)
        const material = new THREE.MeshStandardMaterial({ color: 0xcccc00, roughness: 0 })
        const plane = new THREE.Mesh(geometry, material)
        scene.add(plane)
    }

    camera.position.z = 4

    function animate() {
        requestAnimationFrame(animate)

        cube.rotation.x += 0.01
        cube.rotation.y += 0.01

        if (params.useComposer) {
            composer.render()
        } else {
            renderer.render(scene, camera)
        }
    }

    animate()
}

function initComposer() {
    composer.addPass(new RenderPass(scene, camera))
    addSSREFFECT()
}

function addSSREFFECT() {
    const options = {
        temporalResolve: true,
        temporalResolveMix: 0.9,
        temporalResolveCorrectionMix: 0.3875,
        maxSamples: 0,
        resolutionScale: 1,
        width: typeof window !== "undefined" ? window.innerWidth : 2000,
        height: typeof window !== "undefined" ? window.innerHeight : 1000,
        ENABLE_BLUR: true,
        blurMix: 0.5,
        blurKernelSize: 8,
        blurSharpness: 0.5,
        rayStep: 0.1,
        intensity: 1,
        maxRoughness: 0.1,
        ENABLE_JITTERING: false,
        jitter: 0.1,
        jitterSpread: 0.1,
        jitterRough: 0.1,
        roughnessFadeOut: 1,
        rayFadeOut: 0,
        MAX_STEPS: 20,
        NUM_BINARY_SEARCH_STEPS: 5,
        maxDepthDifference: 3,
        maxDepth: 1,
        thickness: 10,
        ior: 1.45,
        STRETCH_MISSED_RAYS: true,
        USE_MRT: true,
        USE_NORMALMAP: true,
        USE_ROUGHNESSMAP: true,
    }

    // S S R Pass not working with transformcontrols in scene!
    effects.ssrEffect = new SSREffect(scene, camera, options)
    const ssrPass = new EffectPass(camera, effects.ssrEffect)
    composer.addPass(ssrPass)
}



function addGui() {
    const testFolder = gui.addFolder("test")

    const composerFolder = gui.addFolder("Composer")
    composerFolder.add(params, "useComposer")
    composerFolder.add(params, "addTransformControls").onChange((v) => {

        if (v) { scene.add(transformcontrols) } else {
            scene.remove(transformcontrols)
        }
    })

}



init()