Question

意图：根据鼠标光标的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，所以到目前为止我的假设是它处理它。

在我之前的尝试中，我.push将值编入'geometry.vertices'数组，但只允许波在鼠标向左移动时延长而不会缩短。

Answer 1

请参阅ThreeJS Wiki：

您只能更新缓冲区的内容，无法调整缓冲区大小（这非常昂贵，基本上等同于创建新几何体）。

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

您的顶点正在按预期更新，但几何体在第一次更新顶点时仅限于初始尺寸。

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

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

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

根据鼠标位置绘制余弦波

1 个答案: