如何创建线条

var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));
var line = new THREE.Line(geometry, material);
scene.add(line);

同一根线会包含多个点的连接, 同样创建线条也需要纹理和结构的配置

如何创建动态变化的线呢?

什么是动态变化的线: 线的长短, 线的点位置, 线的颜色

• 如何改变点的位置
• 如何改变线的长短(定点数)
• 如何改变线的颜色

做到这一点, 需要用到BufferGeometry, 用于缓存3d数据

• 创建线条

//设置线条最长缓存大小, 也就是线包括200个空间的点
var MAX_POINTS = 200;
//缓存线的结构
var geometry = new THREE.BufferGeometry();
//创建线的点数
var positions = new Float32Array( MAX_POINTS * 3 );
//加载数组到结构中 (因为一个3d空间的点由三个浮点数构成, 所以需要对数组进行标明
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
//设置渲染大小, 因为最基本的线需要两个空间的点来描述, 所以少于两个点情况下无法描述这个线条, 注意不能超过
geometry.setDrawRange( 0, 2 );
//设置材质
var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );
//创建线条
line = new THREE.Line( geometry,  material );
scene.add( line );

updatePositions();

• 修改线条点属性

function updatePositions() {
    //获取点数组
    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;
        //貌似是js的功能, 让变量能跟随变化
        x += ( Math.random() - 0.5 ) * 30;
        y += ( Math.random() - 0.5 ) * 30;
        z += ( Math.random() - 0.5 ) * 30;
    }
}

让线条渐渐显示出来

• 更新动画

function animate() {
//持续更新动画
    requestAnimationFrame( animate );
//设置显示的线段长度变化
    drawCount = ( drawCount + 1 ) % MAX_POINTS;
    line.geometry.setDrawRange( 0, drawCount );
    if ( drawCount === 0 ) {
//更新位置点
        updatePositions();
        line.geometry.attributes.position.needsUpdate = true;
//更新线条颜色
        line.material.color.setHSL( Math.random(), 1, 0.5 );
    }
//别忘了进行渲染 renderer.render( scene, camera );
    render();
}