Error in creating multi render target textures using WebGLRenderTarget


I’m attempting to use WebGLRenderTarget to re-create the effects in the Multiple RenderTargets example. Here’s my code snippet to set this up:

// renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    renderer.setSize(window.innerWidth, window.innerHeight);
    let canvas_parent_div = document.querySelector('#canvas-container');
    canvas_parent_div.appendChild(renderer.domElement); = 'three-js-canvas';

    // final scene pass
    finalScene = new THREE.Scene();

    // normal scene pass
    normalScene = new THREE.Scene();
    // lighting on the normal scene
    const light2 = new THREE.PointLight(0x404040, 1000, 100);
    // render target for normal scene
    rtNormal = new THREE.WebGLRenderTarget(
            count: 2,
            minFilter: THREE.NearestFilter,
            magFilter: THREE.NearestFilter,
            format: THREE.RGBAFormat,
            type: THREE.FloatType, // use float type instead of the default unsigned-byte type to avoid blocky worldPos textures
    rtNormal.textures[ 0 ].name = 'color';
    rtNormal.textures[ 1 ].name = 'worldSpacePosition';


However, in the debug console, I got the following error:

index.js:68 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at init (index.js:68:22)
    at index.js:245:1

Looks like my textures are not there. I’ve looked up the docs but haven’t had any luck on figuring out what went wrong. Any help is appreciated. Thanks!

Use the chrome debugger to put a breakpoint on that line of code, then hover the mouse over the “rtNormal” variable in your code, and it should show you what it contains.

If you’re not seeing the .textures member, then perhaps you’re loading an older version of THREEJS?

1 Like

Turns out I didn’t have the latest version of three.js. Nevermind. Thx!

1 Like