GLB's disappearing from certain angles after instancing

Questions
, ,
1

I don’t know why but my houses are diapering form certain angle as I applied instancing on my GLBs to optimize the overall performance.


Here is the code for instancing the models

interface HouseConfig {
houses: any,
asset: string
}
export const HouseTwo: FC = ({ houses, asset }) => {
const { nodes } = useGLTF(asset);
console.log(nodes);
const meshes = useMemo(() => ({
Tabley001_1: (nodes.Tabley001_1 as THREE.Mesh),
Tabley001_2: (nodes.Tabley001_2 as THREE.Mesh),
Tabley001_3: (nodes.Tabley001_3 as THREE.Mesh),
Tabley001_4: (nodes.Tabley001_4 as THREE.Mesh),
Tabley001_5: (nodes.Tabley001_5 as THREE.Mesh),
Tabley001_6: (nodes.Tabley001_6 as THREE.Mesh),
Tabley001_7: (nodes.Tabley001_7 as THREE.Mesh),
Tabley001_8: (nodes.Tabley001_8 as THREE.Mesh),
Tabley001_9: (nodes.Tabley001_9 as THREE.Mesh),
Tabley001_10: (nodes.Tabley001_10 as THREE.Mesh),
Tabley001_11: (nodes.Tabley001_11 as THREE.Mesh),
Tabley001_12: (nodes.Tabley001_12 as THREE.Mesh),
Tabley001_13: (nodes.Tabley001_13 as THREE.Mesh),
Tabley001_14: (nodes.Tabley001_14 as THREE.Mesh),
}), [nodes]);
return (

{(models:any) => {
return (

{houses.map((house: any, i: any) => {
return ;
})}
);
}}

);
};

const Model = ({ models, data }: { models: any, data: any }) => {
return (
<group
position={[data.position.x, data.position.y, data.position.z]}
rotation={[degreesToRadians(data.rotation.x), degreesToRadians(data.rotation.y), degreesToRadians(data.rotation.z)]}
scale={[0.001, 0.001, 0.001]}
frustumCulled={false}
>
<models.Tabley001_1 />
<models.Tabley001_2 />
<models.Tabley001_3 />
<models.Tabley001_4 />
<models.Tabley001_5 />
<models.Tabley001_6 />
<models.Tabley001_7 />
<models.Tabley001_8 />
<models.Tabley001_9 />
<models.Tabley001_10 />
<models.Tabley001_11 />
<models.Tabley001_12 />
<models.Tabley001_13 />
<models.Tabley001_14 />

);
};

2

most likely three.js docs

add this to the main instance, be it instancedmesh, merged or instances: frustumCulled={false}

to explain why three does that, it calculates bounds and culls (=refuses to render) the object if it isn’t seen by the camera (ie not in the cameras frustum). the individual instances that you define won’t contribute to the bounds.

2 Likes
3

Thank you so much dude you saved my day.

1 Like
4

Alternatively if you wanted to keep frustum culling intact you should be able to use InstancedMesh.computeBoundingBox once instance matrices have been transformed and updated… This may have performance implications if perpetually updating this when animating instances.

1 Like
5

:+1: looks like the houses are static, might be a good idea to calculate it indeed

2 Likes
6

How I can do that? I’m new to this it would be pleasure if you have a little guidance.