Question

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

到目前为止一切顺利。使用所有预定义参数（波长等），整个内容也可以完美呈现。实际的问题是，在初始渲染过程之后画布没有更新，这使得我的程序完全无用，因为我的程序的目的是能够使用滑块操纵高度图的几个参数并在真实中看到效果时间。

可悲的是，唯一更新的画布是具有平面网格的“真实”3D场景的画布。但是在这里看起来似乎第一次渲染过程中的数据从未被清除过，但至少看起来噪声参数的制服是正确更新的 - 显然不是所有其他画布的情况。

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

Answer 1

我终于找到了解决方案。 three.js根本没有问题，实际问题是我意外地将几架飞机添加到一个场景而不是一个场景中。那是因为我的initScene（）方法被调用的次数不止一次，因为我没有检查所有着色器等仍在加载的情况（我通过异步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);
        });
    }
};

我知道这是一个非常具体的问题，但也许这篇文章可能对那些犯同样错误的人有帮助。我花了大约一个星期来跟踪这个错误......

第一次传球后，Three.js场景似乎没有渲染

1 个答案: