Three.js: Могу ли я создать сетку, чтобы заменить много объекта

Question

это звено моей работы: maison.whiteplay.fr

Что я пытаюсь сделать это 3D PacMan, но посмотрите на го кода, я использую сетка, чтобы построить мой уровень, за исключением пузырей (желтый круг), которые вам нужно есть, чтобы победить. Они все разные объекты, но поскольку они много, это отставание, могу ли я использовать ту же технологию (ячеек, я думаю), чтобы пузыри? Если да, то как?

код:

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); 
} 

Спасибо ваше для чтения, и если у вас есть какие-либо предложения по поводу моего кода, не hesistate: D

Answer 1

Вы также можете повторно использовать материал, вместо того, чтобы новый экземпляр все время:

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); 
} 

Материалы для повторного использования имеют хорошее влияние на характеристики.

Как вы дублируете свои сетки/объекты?

Answer 2

Вы код почти прав.

В вашем конкретном случае, с N равными шарами, вы должны иметь N сетку, но только один материал.

Таким образом, если вы хотите раскрасить (только, например) только один шар, вы должны применить его к одному новому материалу, иначе вы примените новый цвет ко всем шарам.

В вашем случае отставание может быть связано с конструкцией сферы.

Вы явно скопируете и вставьте из документации, не прочитав ее раньше.

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

Где, как объяснено в 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 это слишком много для пузырьков малого одноцветные, не имеет смысла.

Чем выше эти значения, тем выше сложность для рисования для каждого кадра.

Предлагаю вам создать сферу с небольшим количеством вертикальных/горизонтальных сегментов (8 * 8 может быть в порядке).

Посмотрите на это demo.