Meshes culled after buffer geom vertex positions updated - three.js

Question

Some objects are being frustrum culled after I amend their buffer geometry vertex positions. I don't want to set frustrumCulled = false, nor can I (feasibly) change the mesh position to anything other than (0,0,0). What options do I have here? My expectation is that the meshes should behave consistently with each other. I'm obviously missing something here.
Demo:
2 Meshes, one green, one red
Green mesh is initialised with position 0,0,0 with vertices around 0,10,0
Red mesh is initialised with position 0,0,0 with vertices around 0,0,0, but after 2 seconds, vertices are updated to around 0,10,0
Orbit controls allow zooming (Just zoom in see see actual behaviour)
Expected behaviour: Both meshes are visible when I zoom / move the camera. Or at least, they both behave in the same way
Actual behaviour, green mesh behaves as expected, red mesh is sometimes culled
const OrbitControls = THREE.OrbitControls // CDN shim
// Helper to create mesh with buffer geom
const createGeo = (initialY, color) => {
const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array([
0, initialY, 0,
0, initialY + 1, 0,
0, initialY, 1,
0, initialY, 0,
0, initialY + 1, 0,
1, initialY, 0
])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({
color: color,
side: THREE.DoubleSide
})
mesh = new THREE.Mesh(geometry, material)
// Note: Setting frustumCulled to false always allows this to be seen, but I don't this object to always be seen
// mesh.frustumCulled = false
scene.add(mesh)
return mesh
}
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 100)
let controls
const greenMesh = createGeo(10, 0x00FF00) // Set Green at 0,10,0
const redMesh = createGeo(0, 0xFF0000) // Set red at 0,0,0, then update to 0,10,0
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(() => {
controls.update()
greenMesh.rotation.y += 0.1
redMesh.rotation.y -= 0.1
renderer.render(scene, camera)
})
document.body.appendChild(renderer.domElement)
controls = new OrbitControls(camera, renderer.domElement)
camera.position.set(15, -20, 15)
controls.target.set(0, 10, 0)
window.onresize = function() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}
scene.add(new THREE.AxesHelper(100))
// Update red mesh to same position as green mesh
setTimeout(() => {
redMesh.geometry.attributes.position.setXYZ(0, 0, 10, 0)
redMesh.geometry.attributes.position.setXYZ(1, 0, 11, 0)
redMesh.geometry.attributes.position.setXYZ(2, 0, 10, 1)
redMesh.geometry.attributes.position.setXYZ(3, 0, 10, 0)
redMesh.geometry.attributes.position.setXYZ(4, 0, 11, 0)
redMesh.geometry.attributes.position.setXYZ(5, 1, 10, 0)
// As per - https://threejs.org/docs/#manual/en/introduction/How-to-update-things
redMesh.geometry.attributes.position.needsUpdate = true
redMesh.geometry.computeBoundingBox()
// When zooming / panning, red mesh is not always visible
}, 2000)
<script src="https://cdn.jsdelivr.net/npm/three#0.147.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.147.0/examples/js/controls/OrbitControls.min.js"></script>

Answer 1

As mentioned by #kikon, both
mesh.geometry.computeBoundingBox()
mesh.geometry.computeBoundingSphere()
are required. Whilst it doesn't explicitly state these in this docs, they have to both be used when updating vertex positions (I had made the incorrect assumption that you would use either the box or sphere).
The code for frustrum culling uses the bounding sphere, and a bounding sphere is automatically created once first invoked (hence the difference in red / green mesh behaviour), and has to be recomputed and both methods need to be called in this case.