CubeCamera Reflection Mapping Issue

Questions
, ,
1

Hi guys,
I’m relative new to threeJS and I’m currently working on a project with the need of dynamic reflection.
I followed the threejs example on the official website and successfully got a working reflection.
However the mapping of the cube camera render target texture seems to be off.

image
image826×631 29.1 KB

The left square should be in the white area.
Here’s my implementation of the dynamic reflection.

    cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128 );
    cubeRenderTarget.texture.type = THREE.HalfFloatType
    cubeCamera = new THREE.CubeCamera( 0.1, 1000, cubeRenderTarget );
    cubeCamera.position.set(0, 0, 30);
    
    // scene.add(cubeCamera)
    cubeRenderTarget.texture.mapping = THREE.CubeRefractionMapping
    material = new THREE.MeshStandardMaterial( {
        envMap: cubeRenderTarget.texture,
        roughness: 0.03,
        metalness: 1
    } );
    sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 5, 15 ), material );
    sphere.position.set(0, 0, 30);
    scene.add( sphere );

You can check out my full code right here
https://github.com/vonernue/ComputerGraphicsFinal