回転された長方形をマージする方法

Question

three.jsを使って、問題にぶつかりました。誰かが私を助けてくれたら、私はそれを感謝します。 私の目標は以下の通りです。

1最初のステップ： 2つの長方形を互いに隣接して一定の角度に設定します。

2第2ステップ： 同じ軸と同じ回転角度で一緒に回転させます。

それらをマージする前に、最初の手順を実行するために矩形の1つを回転させる必要があります。次に、それらをマージしようとしましたが、回転した四角形はレンダリングされません。その は消えています。 問題を簡略化しました。つまり、 マージする前に矩形を回転させると、矩形は消えてしまいます。 どうすればいいですか？

私のコードのスニペット（簡易版;私はrectangle2の一部を省略）は、次のとおりです。

1 var rectangle1Geometry=new THREE.PlaneGeometry(10,10); 
2 var rectangle1Material=new THREE.MeshPhongMaterial(); 
3 var rectangle1=new THREE.Mesh(rectangle1Geometry,rectangle1Material); 
4 rectangle1.position.set(0,0,-5); 
5 rectangle1.rotation.x=Math.PI./2; 
6 rectangle1.updateMatrix(); 
7 var singleGeometry=new THREE.Geometry(); 
8 singleGeometry.merge(rectangle1.geometry,rectangle1.matrix); 
9 var material=new THREE.MeshPhongMaterial(); 
10 var mesh=new THREE.Mesh(singleGeometry,material); 
11 scene.add(mesh); 
12 renderer.render(scene,camera); 

私はLINE5を除外した場合、私はrectangle1の画像を見ることができます。

Answer 1

コンソールにエラーがありますか？
コードに入力ミスがあります。しかし、私はわからないことが問題を引き起こしている場合...

rectangle1.rotation.x = Math.PI./2; 

は、私が思う

rectangle1.rotation.x = Math.PI/2; 

Answer 2

する必要があり、あなたは飛行機の両側を描画する必要があります。

var rectangle1Material=new THREE.MeshPhongMaterial({side: THREE.DoubleSide}); 
var material=new THREE.MeshPhongMaterial({side: THREE.DoubleSide}); 

- 次の2行

var rectangle1Material=new THREE.MeshPhongMaterial(); 
var material=new THREE.MeshPhongMaterial(); 

に変更します