2016-07-26 23 views
0

如果我的错误是显而易见的,请道歉。几周前开始学习代码。大量搜索答案。Three.js简单的自定义动画不会随着DAT.GUI而改变.onChange功能

尝试使用Dat.Gui控制在three.js中动画的图形等式的变量。通过将变量赋值为空,我可以看到gui被链接,因为滑块上的任何地方都会立即调用所需的图形方程(为简单起见,我用简单的抛物线代替了更复杂的方程)。按照希望,当再次点击gui滑块以清除“重绘”方程式(通过gui滑块确定的更宽或更瘦的抛物线)时,图形方程式也会消失,但它会抛出此错误:

“ .CommandBufferContext] RENDER警告:渲染计数或初始值为0.“

我已经能够重新排列代码,所以它不会抛出这个错误,但它仍然不会调用方程的下一个可见迭代....下面是成功绘制抛物线的代码,在下一次.onChange删除它,但然后抛出上述错误...

init function + scene, camera setup, etc.... 

    gui = new DAT.GUI(); 
    gui_a = gui.add(this, 'a').min(0.01).max(5).step(0.01).name('Width'); 
    gui_a.onChange(function(value){createGraph();}); 
} 

function createGraph(){ 
    if(graphLine) scene.remove(graphLine); 
    var graphGeometry = new THREE.Geometry(); 
    while (x<20){ 
    var y = a*(Math.pow(x,2)); 
    next_x = x+0.05; 
    next_y = a*(Math.pow(next_x,2)); 
    x=x+0.05; 

    graphGeometry.vertices.push(
    new THREE.Vector3(x, next_y), 
    new THREE.Vector3(next_x, next_y) 
);}; 
    graphLine = new THREE.Line(graphGeometry, material); 
    scene.add(graphLine); 
}; 

帮助将非常感激。

回答

0

找出我自己的问题...很简单,因为我认为:'x'的值在creategraph();中没有得到重置。它的代码顶部的变量定义为“var x = -20”(在我的帖子中不可见)。因此,图的“第二”渲染从x = 20开始,而不是恢复到原始的x = -20。

相关问题