如何合并已旋转的矩形

Question

使用three.js，我遇到了一个问题。如果有人帮助我，我将不胜感激。 我的目标如下;

1第一步： 设置两个相互相邻的矩形以一定的角度。

2第二步： 将它们以相同的轴和相同的旋转角度一起旋转。

合并之前，我需要旋转其中一个矩形做第一步。然后我尝试合并它们，但旋转的矩形未呈现，即 ，它消失了。 我简化了这个问题，也就是 如果你在合并之前旋转一个矩形，这个矩形就消失了。 我该怎么办？

的我的代码段（简化版本;我省略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(); 
var material=new THREE.MeshPhongMaterial(); 

到 -

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