Three.js场景在第一次通过后似乎无法渲染

Three.js scene does not seem to render after first pass

本文关键字：js 第一次 Three      更新时间：2023-11-26

我目前正在使用Three.js开发一个基于web的高度图生成器。我使用一个画布来显示实际生成的高度图，其他几个画布用于显示高度图所包含的单独八度音阶，另一个画布用于演示高度图直接应用于平面网格的"实际"高度图。

到目前为止还不错。所有预定义的参数（波长等）也能完美地渲染整个东西。实际的问题是，拉票在初始渲染过程后没有更新，这使得我的程序完全无用，因为我的程序的目的是能够用滑块操纵高度图的几个参数，并实时查看效果。

遗憾的是，唯一更新的画布是带有平面网格的"真实"3D场景的画布。但在这里，第一次渲染过程中的数据似乎从未被清除，但至少噪声参数的一致性似乎得到了正确更新——显然并非所有其他拉票都是这样。

在最终渲染场景之前，我总是将网格材质的needsUpdate字段设置为true，但它似乎只适用于最后初始化的画布。我在这里完全迷路了，也找不到任何关于这个问题的信息。

我终于自己找到了解决方案。三个.js根本没有问题，实际的问题是我意外地在一个场景中添加了几个平面，而不是一个。这是因为我的initScene（）方法被调用了不止一次，因为我没有检查所有着色器等仍在加载时的情况（我通过异步AJAX请求加载着色器）。我刚刚检查了"根本没有加载"answers"已完全加载并准备使用"。

这现在正在工作：

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

我知道这是一个非常具体的问题，但也许这篇文章对其他犯同样错误的人仍然有帮助。我基本上花了一周的时间来追踪这个bug。。。

相关文章：