I’m using MediaPipe to apply face blendshape scores to a 3D avatar’s morph targets in Three.js. The avatar is rendered to a canvas element, and I use canvas.captureStream() to extract the video stream from that canvas. However, the stream I receive sometimes shows rendering issues, like in the scr…

Use opacity:0 and maybe pointer-events:none;

Sometimes display: none act as if the element has been removed from the DOM. Try with visibility: hidden or opacity: 0; or both, if the canvas is taking space, create a .hidden css class with position to absolute, and moves it off-screen.

@Fennec @Chaser_Code I tried using opacity: 0, visibility: hidden, or setting position to absolute and moving it off-screen. However, none of these methods solved the problem.

Can you share a minimal code, or a reproduction of the issue.

Below is the core implementation of my avatarController: export class GlbController { constructor() { this.scene = new THREE.Scene(); this.renderer = null; this.camera = null; this.controls = null; this.backgroundLoader = new THREE.TextureLoader(); this.avatar = undefined;…

Three.js not rendering correctly when canvas has display: none

Questions

manthrax June 30, 2025, 3:03am 7

It would help you get better answers if you put your code in a jsfiddle or similar so that people don’t have to do it for you.

Topic		Replies	Views
Three.js anamorphic rendering issue Questions webgl-renderer	0	386	March 30, 2023
Why is threejs not working on docker? Questions webgl-renderer	5	2160	September 22, 2023
Three JS need to render two different scenes in two different canvas and need to hide show them on click of button Questions materials , geometry , webgl-renderer , canvas , scene	5	3882	June 27, 2020
Three.JS - Additional canvases only displaying black screen Questions loaders , camera , webgl-renderer	1	1452	April 25, 2023
The CSS2DObject is always display='none'; Questions css-renderer	1	2277	March 31, 2020

Three.js not rendering correctly when canvas has display: none

Related topics