Three.js r73 Merged Sphere Geometry Disappearing When Camera Moves

Question

I'm trying to merge some geometries and am seeing some strange things with certain types of geometry. I've tried boxes, cylinders, spheres, and tetrahedrons. Boxes and cylinders seem fine. Spheres and tetrahedrons disappear when the camera view target gets far enough away from the world center (0,0,0).

I've created a fiddle here: http://jsfiddle.net/rdhntLns/

Use WASD in the fiddle to rotate the camera around.

Here is my merge code. It's probable that I'm missing a step.

// Merged Trees
var trees = new THREE.Object3D();
var treeTrunkGeom = new THREE.BoxGeometry(1, 20, 1);
if (sphereTops) {
    var treeTopGeom = new THREE.SphereGeometry(10, 5, 5);
} else {
    var treeTopGeom = new THREE.CylinderGeometry(.1, 30, 16, 16, 4);
}
treeTopGeom.translate(0, 16, 0);
for (var i = 0; i < 500; i++) {
    var treePos = [getRandomInt(-512, 512), getRandomInt(-512, 512)];
    var trunkSize = Math.random() * 3 + 1;
    var treeTrunkGeom2 = new THREE.BoxGeometry(trunkSize, 20, trunkSize);
    var topWidth = getRandomInt(10, 18);
    var topHeight = getRandomInt(17, 32);
    if (sphereTops) {
        var treeTopGeom2 = new THREE.SphereGeometry(getRandomInt(10, 20), 5, 5);
    } else {
        var treeTopGeom2 = new THREE.CylinderGeometry(.1, topWidth, topHeight, 16, 4);
    }
    treeTrunkGeom2.translate(treePos[0], 0, treePos[1]);
    treeTopGeom2.translate(treePos[0], 16, treePos[1]);
    treeTrunkGeom.merge(treeTrunkGeom2);
    treeTopGeom.merge(treeTopGeom2);
}

var treeTrunks = new THREE.Mesh(treeTrunkGeom, new THREE.MeshLambertMaterial({color: 0xA6895A}));
treeTrunks.castShadow = true;
treeTrunks.receiveShadow = true;
var treeTops = new THREE.Mesh(treeTopGeom, new THREE.MeshLambertMaterial({color: 0xC1E825}));
treeTops.castShadow = true;
treeTops.receiveShadow = true;
treeTrunks.add(treeTops);
trees.add(treeTrunks);
trees.position.y += 8;
scene.add(trees);

My questions:

Why are the merged sphere geometries disappearing when the camera is looking too far off from world center?

Why doesn't the same happen with cylinder geometry?

Am I missing a step (or steps) in the merge process?

Thank you in advance for your time.

gaitat gaitat · Accepted Answer · 2015-12-11T03:49:38

Once the the bounding box of your model falls outside the view frustum it will be culled. So you need to merge carefully. Since you have trees merge those that are close together.

Three.js r73 Merged Sphere Geometry Disappearing When Camera Moves

1 Answers