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 祝各位順利