Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/csharp-4.0/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Three.js场景在第一遍之后似乎不会渲染_Javascript_Canvas_3d_Three.js_Heightmap - Fatal编程技术网

Javascript Three.js场景在第一遍之后似乎不会渲染

Javascript Three.js场景在第一遍之后似乎不会渲染,javascript,canvas,3d,three.js,heightmap,Javascript,Canvas,3d,Three.js,Heightmap,我目前正在使用Three.js开发一个基于web的高度地图生成器。我使用一个画布来显示实际生成的高度贴图,其他几个画布用于显示高度贴图包含的单独八度音阶,另一个画布用于演示“正在运行”的高度贴图,其中高度贴图直接应用于平面网格 到目前为止还不错。在所有预定义的参数(波长等)下,整个材质也会呈现出完美的效果。实际问题是,画布在初始渲染过程后没有更新,这使得我的程序完全无用,因为我的程序的目的是能够使用滑块操纵高度贴图的几个参数,并实时查看效果 遗憾的是,唯一一个更新的画布是带有“真实”3D场景和平

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

到目前为止还不错。在所有预定义的参数(波长等)下,整个材质也会呈现出完美的效果。实际问题是,画布在初始渲染过程后没有更新,这使得我的程序完全无用,因为我的程序的目的是能够使用滑块操纵高度贴图的几个参数,并实时查看效果

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


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

我终于自己找到了解决方案。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);
        });
    }
};

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

这是控制所有画布的“基类”:这个类渲染高度贴图的八度: