根据鼠标位置绘制余弦波

意图：根据鼠标光标的x位置，余弦波应该变长或变短。感兴趣的是mouseMoveHandler函数。根据鼠标位置绘制余弦波

(function(window,document,undefined){ 
var canvas = document.getElementById('canvas'), 
    rect = canvas.getBoundingClientRect(), 
    x = rect.right, 
    twopi = 2*Math.PI, 

    scene = new THREE.Scene(), 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.position.z = 10; 

var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

/*Point of interest*/ 
var material = new THREE.LineBasicMaterial({color: 0xf9f9f9}), 
    geometry = new THREE.Geometry(), 
    line = new THREE.Line(geometry, material); 


var mouseMoveHandler = function(e){ 
    var j = 0, 
     a = e.clientX/x, 
     b = a*(3*twopi); 

    for(i=0; i < b; i += .01){ 
    geometry.vertices[j] = new THREE.Vector3(i, Math.cos(i), 0); 
    j = j+1; 
    geometry.verticesNeedUpdate = true; 
    } 

    scene.add(line); 
} 

var loop = function() { 
    window.requestAnimationFrame(loop); 
    renderer.render(scene, camera); 
    } 

window.onmousemove = mouseMoveHandler; 
loop(); 

})(this,document);

什么我希望这个代码做的是画出余弦波则当鼠标移动时，线段的顶点将被更新以反映新的位置。当鼠标移动到屏幕上然后不会更新时，会发生一次该行。

我不确定如何使用verticesNeedUpdate，所以我的假设到目前为止是它处理的。

在我以前的尝试中，I .push将ed值写入到'geometry.vertices'数组中，但只允许当鼠标移动到左侧时波长变长而不缩短。

来源

2016-10-27 RM3

快速的问题，为什么你有'undefined'作为参数传入'（function（window，document，undefined）{'？ –

这不应该存在，但它是出于保护的原因。一个更大的项目，有人将未定义为真或某事这不会认识到这一点，并且在这个特定函数的范围内，未定义的将是......好的......未定义的。 – RM3

见ThreeJS Wiki：

只能更新缓冲区的内容，你不能调整缓冲区（这是非常昂贵的，基本上等同于创造新的几何形状）。

您可以通过预先分配较大的缓冲区来模拟调整大小，然后保留不需要的顶点折叠/隐藏。

您的顶点正在按照预期进行更新，但是在顶点首次更新时，几何被限制为初始大小。

您可以通过预先分配固定长度的顶点来解决此问题。

您也可以在每次更新时创建一个新的几何/线条，但显然效率很低。

另请参阅BufferGeometry，这是您尝试实现的理想方法。即预先分配点缓冲区，然后使用geometry.setDrawRange（）根据鼠标位置延长几何图形的长度。

来源

2016-10-27 18:28:26 msun

根据鼠标位置绘制余弦波

回答

相关问题