three.js 生成3D圆环（可分割）

最新推荐文章于 2024-02-21 15:55:14 发布

山桃花啊

最新推荐文章于 2024-02-21 15:55:14 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43156537/article/details/126553972

版权

生成个类似这样的圆盘，高度可调整，可以分段。

思路：先生成2D圆环，通过拉伸生成3D圆环。

生成2D圆环代码

var data = [1,2,3,4];
var title = ['小张','小红','小李','小王'];
//resData记录Data中的数值所占百分比
var resData = [],
var colorPan = [],//颜色数组
//只贴生成形状部分
                /**
                 * 循环生成多个模型拼接
                 */
                //记录饼图开始的位置
                var startIndex = 0;
                var endIndex = 0;
                for (var i = 0; i< resData.length ; i++)
                {
                    //画两条弧线
                    endIndex = startIndex + (Math.PI * 2)*resData[i];
                    const areaPath = new THREE.Path()
                        .absarc( 0, 0, height, startIndex,endIndex, false );
                    const holePath = new THREE.Path()
                        .absarc( 0, 0, height*0.7, startIndex, endIndex , false );

                    //两条弧线转点
                    const areaPoints = areaPath.getPoints(50);
                    const holePoints = holePath.getPoints(50);
                    //转换其中一条弧线使首尾相连
                    holePoints.reverse();
                    //连接两条线的点
                    var resArr = areaPoints.concat(holePoints);






                    const extrudeSettings = {
                        steps: 2,
                        depth: height*resData[i],
                        bevelEnabled: true,
                        bevelThickness: 1,
                        bevelSize: 1,
                        bevelOffset: 0,
                        bevelSegments: 1
                    };
                    //ExtrudeGeometry拉伸2D图
                    const shapeGeometry = new THREE.ExtrudeGeometry(new THREE.Shape(resArr),extrudeSettings);
                    // const shapeGeometry = new THREE.ShapeGeometry(new THREE.Shape(resArr));

                    var material = new THREE.MeshLambertMaterial({
                        color: colorPan[i]
                    });
                    var mesh = new THREE.Mesh(shapeGeometry, material); //网格模型对象Mesh
                    scene.add(mesh);
                    //连接图形
                    startIndex += (Math.PI * 2)*resData[i];


                }

1.图形高度通过拉伸时Depth决定

2.分段宽度通过resData中的百分比值决定