【问题标题】:Three.js scene does not seem to render after first passThree.js 场景在第一次通过后似乎没有渲染
【发布时间】:2013-12-13 20:09:01
【问题描述】:

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

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

遗憾的是,唯一完全更新的画布是带有平面网格的“真实”3D 场景的画布。但同样在这里,似乎第一次渲染过程中的数据从未被清除,但至少噪声参数的制服似乎已正确更新 - 这显然不是所有其他画布的情况。

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

【问题讨论】:

标签: javascript canvas 3d three.js heightmap


【解决方案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);
        });
    }
};

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-06-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-20
    相关资源
    最近更新 更多