three-line-2d, 在顶点着色器中,线条展开

分享于 

3分钟阅读

GitHub

  繁體 雙語
lines expanded in a vertex shader
  • 源代码名称:three-line-2d
  • 源代码网址:http://www.github.com/mattdesl/three-line-2d
  • three-line-2d源代码文档
  • three-line-2d源代码下载
  • Git URL:
    git://www.github.com/mattdesl/three-line-2d.git
    Git Clone代码到本地:
    git clone http://www.github.com/mattdesl/three-line-2d
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mattdesl/three-line-2d
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    three-line-2d

    stable

    img

    ( 单击查看演示 )

    在ThreeJS中,通过展开顶点明暗器中的多段线,可以变厚度。抗叠加。渐变。线条等效应的2D 线图。

    在 ThreeJS r69-r75中工作,可能是更新版本。

    有关完整的示例,请参见测试/索引,以及其他着色器应用程序。

    var bezier =require('adaptive-bezier-curve');var Line =require('three-line-2d')(THREE);var BasicShader =require('three-line-2d/shaders/basic')(THREE);//build a smooth bezier curve in world unitsvar quality =5;var curve =bezier([0, 0], [0.5, 1], [1, 1], [2, 0], quality);//create our geometryvar curveGeometry =Line(curve);//create a material using a basic shadervar mat =newTHREE.ShaderMaterial(BasicShader({
     side:THREE.DoubleSide,
     diffuse:0x5cd7ff,
     thickness:0.3}));var mesh =newTHREE.Mesh(curveGeometry, mat);app.scene.add(mesh);

    用法

    NPM

    geometry = Line(path, [opt])

    从 2D 个点的列表创建新的直线几何图形。 选项:

    • 如果 distances 为 true,每个顶点也将一个 lineDistance 属性传递给顶点着色器。 这可以用于计算从线条的起点到终点的U 纹理坐标。
    • closed 如果为 true,将从最后一点绘制一个线段,并将法线调整为相应的( 默认 false )

    注意:你也可以省略 path,只传递一个 opt 对象来初始构造几何体。 但是,某些版本的ThreeJS不支持动态增长的顶点数据,因这里最好使用最大容量的最大容量列表。

    geometry.update(path[, closed])

    使用新的2D 多段线更新几何图形,它可以选择是闭合的循环( 默认 false )。

    从源运行

    git clone https://github.com/mattdesl/three-line-2d.gitcd three-line-2d
    npm install

    你可以在 localhost:9966 上本地运行演示,方法如下:

    npm run start

    你可以将演示文稿构建到 static JavaScript包,其中包括:

    npm run build

    变更日志

    1.1.0

    • 主要代码清理和带有清洗器模块的新测试
    • 支持 r69-r75
    • 看起来ThreeJS不支持跨所有版本动态增长的几何图形;小心使用 !

    许可证

    MIT,有关详细信息,请参阅 LICENSE.md


    EXP  SHA  Expand  着色器  Shade  Vertex  
    相关文章