meshline

    'attribute vec3 previous;',
    'attribute vec3 next;',
    'attribute float side;',
    'attribute float width;',
    'attribute float counters;',
    '',
    'uniform vec2 resolution;',
    'uniform float lineWidth;',
    'uniform vec3 color;',
    'uniform float opacity;',
    'uniform float sizeAttenuation;',
    '',
    'varying vec2 vUV;',
    'varying vec4 vColor;',
    'varying float vCounters;',
    '',
    'vec2 fix( vec4 i, float aspect ) {',
    '',
    '    vec2 res = i.xy / i.w;',
    '    res.x *= aspect;',
    '	 vCounters = counters;',
    '    return res;',
    '',
    '}',
    '',
    'void main() {',
    '',
    '    float aspect = resolution.x / resolution.y;',
    '',
    '    vColor = vec4( color, opacity );',
    '    vUV = uv;',
    '',
    '    mat4 m = projectionMatrix * modelViewMatrix;',
    '    vec4 finalPosition = m * vec4( position, 1.0 );',
    '    vec4 prevPos = m * vec4( previous, 1.0 );',
    '    vec4 nextPos = m * vec4( next, 1.0 );',
    '',
    '    vec2 currentP = fix( finalPosition, aspect );',
    '    vec2 prevP = fix( prevPos, aspect );',
    '    vec2 nextP = fix( nextPos, aspect );',
    '',
    '    float w = lineWidth * width;',
    '',
    '    vec2 dir;',
    '    if( nextP == currentP ) dir = normalize( currentP - prevP );',
    '    else if( prevP == currentP ) dir = normalize( nextP - currentP );',
    '    else {',
    '        vec2 dir1 = normalize( currentP - prevP );',
    '        vec2 dir2 = normalize( nextP - currentP );',
    '        dir = normalize( dir1 + dir2 );',
    '',
    '        //vec2 perp = vec2( -dir1.y, dir1.x );',
    '        //vec2 miter = vec2( -dir.y, dir.x );',
    '        //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
    '',
    '    }',
    '',
    '    vec4 normal = vec4( -dir.y, dir.x, 0., 1. );   ',
    '    normal.xy *= .5 * w;   ',
    '    normal *= projectionMatrix;   ',
    '    if( sizeAttenuation == 0. ) {    ',
    '       //normal.xy *= finalPosition.w;    ',
    '        normal.xy /= ( vec4( resolution, 0., 1. ) * projectionMatrix ).xy;   ',
    '    }',
    '',
    '    finalPosition.xy += normal.xy * side;   ',
    '',
    '    gl_Position = finalPosition;    ',

next 和previous 主要是用来计算线方向的;side 用来设置线两侧的方向(好用于生成两边的顶点)

three.js是一种用于在Web浏览器上创建并呈现3D图形的JavaScript库。它提供了丰富的功能和工具,可以实现各种复杂的三维效果。动态线是在three.js中创建的一种特殊的几何体,称为MeshLine。 通过使用MeshLine,我们可以在three.js中创建出具有动态效果的线条。MeshLine可以用于绘制平滑的曲线、动画路径、连接不同点之间的线条等等。 创建一个动态线需要以下几个步骤: 1. 创建一个网格线的材质(Material):在three.js中,我们可以使用MeshLineMaterial来定义网格线的材质。该材质可以设置线条的颜色、宽度、透明度等属性。 2. 创建一个空的几何体(Geometry):使用MeshLine的构造函数来创建一个空的几何体。这将成为我们动态线的基础。 3. 添加线条的顶点:通过向几何体的顶点数组中添加点的坐标,我们可以定义出一条线的形状。可以通过遍历数组,逐个添加点的坐标,也可以使用内置的函数来添加点的坐标。 4. 创建线条的缓冲区(BufferGeometry):将添加了顶点的几何体转换为缓冲区几何体。这样可以提高渲染性能。 5. 创建动态线条的网格(Mesh):使用MeshLine的构造函数来创建网格对象,并传入缓冲区几何体和网格线材质。 6. 将网格对象添加到场景中:通过将网格对象添加到场景中,就可以实现动态线条的显示。 通过在更新循环中不断修改网格线的顶点坐标,可以实时改变动态线的形状。例如,可以使用Tween.js库来平滑地过渡线条的形状。 总结:使用MeshLine可以在three.js中创建出具有动态效果的线条。通过设置网格线的材质、添加顶点、创建缓冲区几何体和网格对象,并将其添加到场景中,就可以实现动态线的显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

祝太勇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值