Three.js - Object.visible = True, Not Showing Up Right Away

I'm hiding and unhiding parts of my Three.js scene using the .visible property on my objects. By default certain objects (rooms) have the .visible property to false. When the camer

Solution 1:

Geometry needs to be converted to BufferGeometry prior to rendering. This conversion will not occur if mesh.visible is false. The conversion can take some time if your geometries are complex, or if there are a lot of geometries to convert.

A work-around is to create your meshes using BufferGeometry.

var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );
var mesh = new THREE.Mesh( bufferGeometry, material );

three.js r.73

Solution 2:

In my code I see the same thing when objects are first switched to visible, but subsequent switches between visible true/false do not seem to cause another delay.

Hence one workround would be to set the visible flag on every object and render everything when WebGLRenderer is not shown on the browser (e.g. when it is behind a level loading screen) then set the objects visible flags appropriately to how you want them prior to showing the screen... Now there should be no delay as you toggle them visible.