卜若的代码笔记-webgl系列-第二十六章：glsl的应用(六)>通过attribute实现光标追踪

1 我现在需要去绘制一个圆，一个六边形的圆，需要六个三角形，18个顶点，圆心为动点(x,y)

这是一个最简单的图形学绘制问题，我们需要来温习一下极坐标方程

                                                                       

现在，我们让z = 0，然后去让deltaTh = 360/6 = 60去创建这18个顶点：

        var r = 3;
        var offset_x = 0;
        var offset_y = 0;
        var th = 60;
        for (var i =0;i<6;i++) {

            var coe = ((i * th) / 180);

            var x = r * Math.cos(3.14159 * coe);
            var y = r * Math.sin(3.14159 * coe);
            console.info("&&&&=" + "<>" + x+"<>"+y);
            //圆心
            bufferCanteen(Vector3(offset_x, offset_y, 0), Color(0.1, 0.3, 0.4));
            //三角形第一个顶点
            bufferCanteen(Vector3(offset_x + x, offset_y + y, 0), Color(0.1, 0.3, 0.4));

            coe = (((i + 1) * th) / 180);

            x = r * Math.cos(3.14159 * coe);
            y = r * Math.sin(3.14159 * coe);

            console.info("%%%%="+ "<>" + x+"<>"+y);
            bufferCanteen(Vector3(offset_x + x, offset_y + y, 0), Color(0.1, 0.3, 0.4));


        }
        var mesh = createBufferGeoMeshFromCanteen();

效果如下：

接下来，我么将会让这个六边形去跟踪我们的鼠标位置：

接下来，我们需要封装一个更新geometry的Attribute的函数：

function updateBufferGeoMeshFromCanteen(mesh) {
    var positionAttribute = new THREE.Float32BufferAttribute(bufferGeometryVerticsCache, 3 );
    var colorAttribute = new THREE.Float32BufferAttribute(bufferGeometryColorCache,3);
    mesh.geometry.addAttribute( 'position', positionAttribute );
    mesh.geometry.addAttribute( 'color', colorAttribute );
}

然后

 我们将更新的函数封装一下：

 function updateCircle(ev,mesh) {


            //清空顶点缓存
           // clearBufferGeoCache(2);
            //获得鼠标位置对应的webgl坐标
            var mousePos = screen2WebglCoordinate(ev,800,800);
            //获得鼠标位置对应的视口坐标(垂直世界坐标)
            var viewpotPos = screenConvertToWorld(mousePos);

            console.info(viewpotPos);
            var r = 3;


            var offset_x = viewpotPos.x;
            var offset_y = viewpotPos.y;

            //重新绘制圆
            var th = 60;
            for (var i =0;i<6;i++) {

                var coe = ((i * th) / 180);

                var x = r * Math.cos(3.14159 * coe);
                var y = r * Math.sin(3.14159 * coe);
                //console.info("&&&&=" + "<>" + x+"<>"+y);
                //圆心
                bufferCanteen(Vector3(offset_x, offset_y, 0), Color(0.1, 0.3, 0.4));
                //三角形第一个顶点
                bufferCanteen(Vector3(offset_x + x, offset_y + y, 0), Color(0.1, 0.3, 0.4));

                coe = (((i + 1) * th) / 180);

                x = r * Math.cos(3.14159 * coe);
                y = r * Math.sin(3.14159 * coe);

              //  console.info("%%%%="+ "<>" + x+"<>"+y);
                bufferCanteen(Vector3(offset_x + x, offset_y + y, 0), Color(0.1, 0.3, 0.4));


            }

            updateBufferGeoMeshFromCanteen(mesh);
        }

最后我们去使用它：

来看看效果：