three.js: TypeError: Cannot read property 'transparent' of undefined (renderObjects)

Describe the bug Bug appears when I use EffectComposer. More precisely in the RenderPass. To Reproduce In my scene I use (from 131.3)

import * as THREE from 'three';
import { EffectComposer } from '../vendor/postprocessing/EffectComposer.js';
import { RenderPass } from '../vendor/postprocessing/RenderPass.js';
...
var renderer = new THREE.WebGLRenderer();
var composer = new EffectComposer(renderer);
...
composer.addPass(renderPass);
composer.addPass(copyPass);
...
composer.render(delta);

Code above worked without any issues on an older version of Three.

I was able to find and fix the issue. In function renderObjects(renderList, scene, camera) you can find an assignment const material = overrideMaterial === null ? renderItem.material : overrideMaterial; If overrideMaterial material is undefined, then it will assign undefined to the material and crash later in renderObject function. Probably, it’s better to use “==” instead of “===”. It fixes the problem.

Platform:

  • Device: desktop
  • OS: [Windows, MacOS]
  • Browser: [Chrome]
  • Three.js version: [dev, r131.3]

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15

Most upvoted comments

Maybe this is would be a safer pattern:

const material = overrideMaterial ? overrideMaterial : renderItem.material;