1

I run quite a simple loop creating 30 new Cube meshes:

for(i=0; i<30; i++){
     var zPos = 0 + i * (cubeHeight+ySpace) + cubeHeight/2;
     cube = new THREE.Mesh(new THREE.CubeGeometry(cubeWidth, cubeWidth, cubeHeight), material);
     cube.position.z = zPos;

     cube.castShadow = true;
     cube.recieveShadow = true;
     parent.add(cube);
 }

This runs terribly slow. What could the causes be?
(I assume I should be able to re-render 30 boxes continuously without performance issues?)

Improve this question
3
  • Can you put your full code to jsFiddle?
    – dIsoVi
    Commented May 29, 2013 at 20:35
  • 1
    Is that loop in each animate() call or is it done only once, on initialization? How many lights do you have that vast shadow?
    – Dragan Okanovic
    Commented May 30, 2013 at 11:13
  • First I would try this example and check the performances: threejs.org/examples/webgl_interactive_cubes.html
    – BaptisteB
    Commented Feb 7, 2014 at 17:46

3 Answers 3

Reset to default
4

We need a few more details to completely answer your question:

  • What version of three.js are you using?

  • What else is going on in the scene?

  • What render timer method are you using? (setInterval, setTimeout, or requestAnimationFrame)

My guesses as to why it could be slow:

  • Some other section of code is actually using up more of the time before this code executes.

  • Your render isn't being called often enough and it looks choppy.

  • Your computer doesn't support some function of three.js and it is using a work around to make up for it.

  • Your computer javascript timer may be slow. (Depends on platform and browser.)

  • You are creating and destroying these blocks without caching techniques. (You should overwrite old values without using the new operator as much as possible. Requesting memory can be expensive in timing.)

Improve this answer
1
  • 1
    I was recently in a similar situation - hunting for a reason for slow performance with three.js. Your last suggestion of reusing memory when possible, rather than calling new, immediately solved my issue. I was repeatedly creating a Vector3 object inside a major loop. After moving its allocation outside the loop, and just resetting its value inside the loop before usage, everything became blazingly fast. Thanks!
    – dmoench
    Commented Jul 12, 2014 at 17:26
3

new THREE.CubeGeometry(...); should be initalized once for all outside the for-loop, you need just 1 geometry for all cubes -> because they are all the same, you have to share the instace of this geometry. I hope it helps.

Improve this answer
1
  • Actually he should either create a single geometry and clone it or create individual geometries. These cannot be shared as all of their properties would also be shared and essentially be the same cube. You can however share materials.
    – Tyler Scott
    Commented Jun 28, 2013 at 3:51
0

You could also check how many instances of three.js you have running on your computer. Maybe you run some demos from their website in the background (also in other browsers).

Close them will give you more performance.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.