ThreeJS 凹包 多边形 计算 使用方法 ThreeJS如何绘制多边形 (官方自带) 问题

因为之前从事unity,公司需要就做了些three的工作

突然来了一个需求

画一个凹包的多边形 (凹包凸包的区别看下图)

虽然吧,我画的丑...但是应该比较好理解

(我满脑子都是,unity没有这种原生的玩意,three肯定也不会有...然后我自己写了一天多的凹包...后来cesium的同事看见了,他去官网看了看,发现有....我的心里那叫一个....诶嘛  脸疼)

大白话(我们这里只论实用价值,纯学术的话因为我也就个zz学历,就不多讨论啦)

凹包多边形: 按照点绘制顺序进行连线的多边形

凸包多边形: 能包裹所有点的多边形

 

凸包这里就不说了,后面我有空会把我threejs画凸包的代码丢出来(虽然不难,但是不重面确实挺麻烦的)

 

----------------------------------------重点分隔-----------------------------------------

官方案例连接

https://threejs.org/docs/index.html#api/en/extras/core/Shape

上面的案例还有贝塞尔曲线...我来个简单明了的操作

首先要注意,这个多边形的点位组成是 THREE.Vector2 ,所以你需要转一下你的点位

之后就是常规操作啦,上代码

        // 用来创建凹包多边形的点,一定要按顺序哦
        let points=[
            new THREE.Vector3(1,1,1),
            new THREE.Vector3(2,2,2),
            // .............
            new THREE.Vector3(99,99,99),  
        ];

        let list=[];// 用来装点位的数组

        // 将目标数组改成Vector2 这里默认去掉高度y,当然如果你喜欢可以用其他轴的
        for (let i = 0; i < points.length; i++) {
            list.push(new THREE.Vector2(points[i].x,points[i].z));
        }

        // 用这些点位生成一个 Geometry
        let geometry = new THREE.ShapeGeometry( new THREE.Shape( list ) );

        // 恢复高度 如果你需要 可以改成原本高度,也可以你随意的
        // for (let i = 0; i < points.length; i++) {
            // geometry.vertices[i].y=points[i].y;
        // }

        // 来个材质...当然我这里只是建议打开双面渲染,所以还是写一下吧
        let material=new THREE.MeshBasicMaterial({
            side:THREE.DoubleSide,
        });

        // 这就是你要的多边形啦
        let mesh=new THREE.Mesh(geometry,material);

        // LJason 祝各位顺利

emmmm,希望有用...

 

 

额差点漏了肯定有人问

为啥不用

ShapeBufferGeometry

而用

ShapeGeometry

这里说明下...

这个ShapeGeometry里面是可以看到官方计算的face的顺序的~~~

ShapeBufferGeometry是看不到的,因为Buffer类的Geometry为了显卡内存优化了写法,我是需要改高度的所以呢

我就用ShapeGeometry这个了~~~

 

LJason 祝各位顺利