动态绘制一条带有three.js的行

Question

这是我想要实现的(一个可修改的多边形,其中红色圆圈是顶点),我想动态构建多边形.

在启动几何体时

var geometry = new THREE.Geometry();

geometry.vertices.push(point);
geometry.vertices.push(point);

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

它运行良好,直到第二次单击,它在1和2之间构建一条直线,但是当它被推送到数组时不会添加第三条线.WebGL似乎需要缓冲点.

当我预定义像这样的顶点我可以画两条线(第三次点击)

var geometry = new THREE.Geometry();

for (var i = 0; i < 4; i++) {
    geometry.vertices.push(point);
}

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

但这不是一个好的解决方案,因为我不知道用户想要添加多少个顶点,因为我需要多次循环它,所以分配它是没有意义的.

它有什么办法吗？

Answer 1

您可以使用BufferGeometry和setDrawRange()方法非常轻松地为线条设置动画 - 或增加渲染点数.但是,您需要设置最大点数.

var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

您可以使用以下模式设置位置数据:

var positions = line.geometry.attributes.position.array;

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

如果要更改第一次渲染后渲染的点数,请执行以下操作:

line.geometry.setDrawRange( 0, newValue );

如果要在第一次渲染后更改位置数据值,可以needsUpdate像这样设置标志:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

这是一个小提琴,显示一个动画线,你可以适应你的用例.

编辑:请参阅此答案,了解您可能更喜欢的技术 - 特别是如果该行只包含几个点.

three.js r.84

Answer 2

实时绘制一条线

这是一个更新的小提琴,我在他的例子中优化了 user3325025的代码; 在这种情况下,绝对不需要更新渲染线上的所有点.只需onMouseMove更新(更新行尾)和onMouseDown(绘制新点):

// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// mouse move handler
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
    updateLine();
  }
}

// add point
function addPoint(event){
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}

Answer 3

如果你想徒手涂抹,我用鼠标事件和矢量数组更新了小提琴.

https://jsfiddle.net/w67tzfhx/40/

function onMouseDown(evt) {

    if(evt.which == 3) return;


    var x = ( event.clientX / window.innerWidth ) * 2 - 1;
    var y =  - ( event.clientY / window.innerHeight ) * 2 + 1;

    // do not register if right mouse button is pressed.

    var vNow = new THREE.Vector3(x, y, 0);
    vNow.unproject(camera);
    console.log(vNow.x + " " + vNow.y+  " " + vNow.z); 
    splineArray.push(vNow);

    document.addEventListener("mousemove",onMouseMove,false);
    document.addEventListener("mouseup",onMouseUp,false);
}