0

I'm having a little trouble generating/displaying a terrain using Three.JS without major FPS drops. Here's the code I wrote to create each block and set the correct position:

var TO_METERS = 10;
var testOb = [];

var blockGeometry = new THREE.CubeGeometry(TO_METERS, TO_METERS, TO_METERS);
var blockMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF, wrapAround: true, side: THREE.FrontSide, shading: THREE.FlatShading});

function loadChunk(startX, startY, startZ) {
    var yVar = 0;
    var zVar = 0;
    var blockCo = 0;
    var combinedGeometry = new THREE.CubeGeometry(0, 0, 0);

    for (var x = 0; x <= 4999; x++) {
        testOb[x] = new THREE.Mesh();
            testOb[x].geometry = blockGeometry;

        if (blockCo == 10) {
            blockCo = 0;

            if (zVar == 90) {
                yVar += TO_METERS;
                zVar = 0;
            }
            else {
                zVar += TO_METERS;
            }
        }

        testOb[x].position.x = (blockCo * TO_METERS) + startX;
        testOb[x].position.y = (yVar - 500) + startY;
        testOb[x].position.z = zVar + startZ;

        testOb[x].castShadow = true;
        blockCo++;

        THREE.GeometryUtils.merge(combinedGeometry, testOb[x]);
    }

    var cMesh = new Physijs.BoxMesh(combinedGeometry, blockMat, 0);
    scene.add(cMesh);
}

Basically it creates each block, sets the position and merges them together using THREE.GeometryUtils.merge to make up a "chunk" (a rectangle) MineCraft style.

I'm pretty sure the large number of individual blocks that make up each chunk is causing the low FPS. With only 10 chunks the FPS is fine. If I add any more the FPS drops drastically.

One thought I had was to use a WebWorker to do the processing, but of cause that isn't possible as I can't add the chunks or even use Three.JS within it. That also would only help the load time, not the FPS problem I'm having.

If anyone has any ideas how I would go about fixing this problem, I would really appreciate it. :) Maybe it would be possible to hide blocks which the camera can't see? Or I might just totally be doing it the wrong way. Thanks!

Joey Morani
  • 25,431
  • 32
  • 84
  • 131
  • 1
    Your BoxMesh is a CubeGeometry with 30,000 faces and 40,000 vertices. Plus you have 10 of them. – WestLangley Mar 21 '13 at 21:05
  • Right, but if I didn't have each individual block how would I manipulate/remove them? – Joey Morani Mar 21 '13 at 21:18
  • And some blocks may have a different texture for example. – Joey Morani Mar 21 '13 at 23:16
  • See if the three.js examples help you: http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft.html – WestLangley Mar 21 '13 at 23:27
  • That example is using planes. Should I use planes then? I've found this blog post http://catchvar.com/threejs-procedurally-generated-infinite-terra but it's pretty outdated. It pretty much explains exactly what I'm trying to achieve though and from the looks of it he used cubes and hid non-visible faces. – Joey Morani Mar 23 '13 at 17:06
  • Sorry, I can't tell you what you should do. Do some experiments, and select the one that best meets your specific requirements. – WestLangley Mar 23 '13 at 17:39
  • For others that arrive here in the future, the cannon.js physics engine library has a good demo with lots of voxels: http://schteppe.github.io/cannon.js/examples/threejs_voxel_fps.html – duhaime Jan 04 '18 at 14:09

0 Answers0