Three.js：我可以创建网格来替换很多对象吗？

Question

this is the link of my work : maison.whiteplay.fr

What i am trying to do is a 3D PacMan, but look at th code, i'm using mesh to build my level, except for bubbles (yellow circle), that you need to eat to win. They are all different objects, but because they are a lot, it's lagging, can i use the same technologie (mesh i think) to the bubbles ? If yes, how ?

code:

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 ); 
var bille = function(x,z){ 
    this.bille = new THREE.Mesh(
        geometrySphere, 
        new THREE.MeshBasicMaterial( {color: 0xffff00} )
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;  
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille); 
}

Thank your for reading, and if you have any suggestions about my code, don't hesistate :D

Answer 1

You can also reuse your material instead of making a new instance all the time:

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 ); 
var billeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var bille = function(x,z){ 
    this.bille = new THREE.Mesh(
        geometrySphere, 
        billeMaterial
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;  
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille); 
}

Reusing materials has good influence on performance.

How do you duplicate your meshes/objects?

Answer 2

You're code is almost right.

In your specific case, with N equal balls, you must have N mesh but just one material.

In this way, if you want to colorize (just for example) only one ball, you have to apply it one new material, otherwise you will apply new color to all the balls.

In your case lagging may be due to the sphere construction.

You clearly copy and paste from the documentation without read it before.

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );

Where, as explained in the documentation :

radius — sphere radius. Default is 50.
widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.

32 * 32 is too much for your small-monocolor bubbles, doesn't have sense.

The higher are this values, the higher is the complexity for draw it for each frame.

I suggest you to create sphere with a minor number of vertical/horizontal segments (8*8 may be ok).

Take a look at this demo .