three.js ある４つの点を通る「平面」を配置したい

Question

three.jsを使って、平面を配置したいのですが、「中央位置」と「幅」「高さ」を指定する方法が一般的だと思います。

しかしある４点を指定した配置をしたいのです。

Planeクラスを使えばできるようですが（setFromCoplanarPointsメソッド）、Planeクラスで取得できるのは主に「normal（法線ベクトル）」「constant（平面を表す方程式の定数d）」だけのようです。

お教えいただけると助かります。

Answer 1

まずは、一番単純な解決方法を提示させていただきます。

            const geometry2 = new THREE.PlaneGeometry(20, 20, 1 ,1 );
            //この  geometry2.vertices の配列に、生の頂点データが xyz でアクセス可能な形で入っています。自由にセットすることができます。
　　　　　　//この場合は4角形なので、配列数は4です。
            geometry2.vertices[1].x = 50;

            const material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );　//色の設定です。お好みで。
            const planeMesh = new THREE.Mesh( geometry2, material2 );
            scene.add( planeMesh );

解説をさせてもらうと、 THREE.PlaneGeometry で、四角形を表示するための「頂点データ」を作成することができます。ですがこの状態では、Three.js上で表示することはできません。
Three.jsで「四角形」として表示するためには、この Geometry を、 Mesh にする必要があります。　

ただ、「4角形は、3角形２つで表現されている」ことをお忘れなく。厳密に「4点が平面上に存在する」という判断は、これでは行っていません。もしその判断が必要になった場合は…頑張ってください。自分にはちょっと方法が浮かびません。難しい課題だと思います。

Comments

[firstbiz]

ありがとうございます。
まず平面を配置し、その頂点を変更する方法でやってみました。
そうするとおっしゃるとおり三角形にしかなりませんでした(4点目が反映されない）。

それとは別に「頂点を変更しても、座標は変更にならない」という問題があり、別の方法で実現することにしました。

回答ありがとうございました。