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);

如果我排除第5行，我可以看到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});

如何合并已旋转的矩形

2 个答案: