Сцена три .js не кажется рендерингом после первого прохода

Question

В настоящее время я работаю над генератором карт на основе сети с помощью Three.js. Я использую один холст, чтобы показать фактическую карту высоты, несколько других для отображения отдельных октав, из которых состоит карта высоты, и еще одна для демонстрации карты высоты в действии, где она применяется непосредственно к плоскости.

Пока все хорошо. Весь материал также отлично сочетается со всеми предопределенными параметрами (длина волны и т. Д.). Фактическая проблема заключается в том, что полотна не обновляются после первого прохода рендеринга, что делает мою программу совершенно бесполезной, так как цель моей программы заключается в том, чтобы иметь возможность манипулировать несколькими параметрами карты высоты с помощью ползунков и видеть эффекты в реальном время.

К сожалению, единственное полотно, которое вообще обновляется, является «реальной» 3D-сценой с плоской сеткой. Но и здесь это похоже на то, что данные из первого прохода рендеринга никогда не очищались, но по крайней мере кажется, что униформа для параметров шума обновляется правильно - это, очевидно, не относится ко всем другим холстам.

Прежде чем я, наконец, создаю сцену, я всегда устанавливаю поле needsUpdate материала сетки в true, но, похоже, это работает только для одного холста, который был инициализирован последним. Я полностью потерялся здесь, а также не смог найти никакой информации об этой проблеме.

Answer 1

Я, наконец, нашел решение самостоятельно. Не было никаких проблем с three.js вообще, фактическая проблема заключалась в том, что я случайно добавил несколько самолетов в одну сцену вместо одной. Это вызвано тем, что мой метод initScene() вызвал больше, чем один раз, так как я не проверял случай, когда все шейдеры и т. Д. Все еще загружаются (я загружаю свои шейдеры через запрос async AJAX). Я просто проверил, что «вообще не загружен», и «полностью загружен и готов к использованию».

Это работает в настоящее время:

/** 
* Adds geometry to the scene and attaches previously loaded material. 
* 
* @param {Number} wavelength of the first octave of the height map 
* @param {Number} frequency of the first octave of the height map 
* @param {Number} number of octaves (has to be an integer) 
*/ 
HeightMap.prototype.initScene = function(wavelength, frequency, lacunarity, persistency, octaves) { 
    this.material = HeightMap.settings.templateMaterial.clone(); 

    this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves); 
    HeightMapOctave.prototype.addPlane.call(this); 

    this.initialized = true; 
}; 

/** 
* Updates values for HeightMap. 
* 
* @param {Number} wavelength of the first octave of the height map 
* @param {Number} frequency of the first octave of the height map 
* @param {Number} number of octaves (has to be an integer) 
*/ 
HeightMap.prototype.updateScene = function(wavelength, frequency, lacunarity, persistency, octaves) { 
    if (this.initialized) { 
     this.updateUniforms(wavelength, frequency, lacunarity, persistency, octaves); 
     Canvas3D.prototype.render.call(this); 
    } else if (!this.initializing) { 
     this.initializing = true; 
     this.loadShaders(function() { 
      this.initScene(wavelength, frequency, lacunarity, persistency, octaves); 
      Canvas3D.prototype.render.call(this); 
     }); 
    } 
}; 

Я знаю, что это очень специфическая проблема, но, возможно, это сообщение все еще может быть полезным для других людей, которые делают ту же самую ошибку. Мне потребовалось в основном неделю, чтобы отследить эту ошибку ...