ThreeJS - ExtrudeGeometry深度给出与extrudePath不同的结果 [英] ThreeJS - ExtrudeGeometry depth gives different result than extrudePath

问题描述

我以两种不同的方式使用THREE.ExtrudedGeometry，我期望得到相同的结果。

一旦我使用深度来设置挤出选项。
另一次我使用从 Vector3（0,0,0）到 Vector3（0，0，深度）

奇怪的是，生成的几何图形围绕Z轴旋转。
为什么是这样？这是预期的行为还是我做错了什么？

可以找到小提琴 这里是，这是我的代码：

---

常用变量：

  //网格材质
 var material = new THREE.MeshBasicMaterial（{color：0xff0000 }）; 
 
 //深度拉伸
 var depth = 10; 
 
 //形状拉伸
 var shape = new THREE.Shape（[
 new THREE.Vector2（-20，-60），
 new THREE.Vector2 （-20，60），
 new THREE.Vector2（20，60），
 new THREE.Vector2（20，-60）
]）; 
  

这里使用深度：

  var extrudeSettings1 = {
 bevelEnabled：false，
 steps：1，
 amount：depth 
}; 
 
 var geometry1 = new THREE.ExtrudeGeometry（shape，extrudeSettings1）; 
 
 var mesh1 = new THREE.Mesh（geometry1，material）; 
 
 mesh1.position.set（-50，0，0）; 
 
 scene.add（mesh1）; 
  

现在使用路径

  var v1 = new THREE.Vector3（0，0，0）; 
 
 var v2 = new THREE.Vector3（0，0，depth）; 
 
 var path = new THREE.LineCurve3（v1，v2）
 
 var extrudeSettings2 = {
 bevelEnabled：false，
 steps：1，
 extrudePath：path 
}; 
 
 var geometry2 = new THREE.ExtrudeGeometry（shape，extrudeSettings2）; 
 
 var mesh2 = new THREE.Mesh（geometry2，material）; 
 
 mesh2.position.set（50，0，0）; 
 
 scene.add（mesh2）; 
  

编辑1：

在WestLangley评论后更新 position.set（）

EDIT2

我给了它另一个想法，但我不明白WestLangley的答案。形状的方向与最终的起点无关。无论哪种方式，形状可以有相同的方向，因为它开始。

为了说明我在x，y平面绘制两个形状，我显示了in我的意见只有正确的结果：

解决方案

如果您查看 THREE.ExtrudedGeometry 和 THREE.TubeGeometry.FrenetFrames


这里是ExtrudeGeometry的评论



• extrudePath：// 3d样条路径用于沿着形状挤出形状。 （如果没有定义.frames，则创建框架）


• frames：//包含切线，法线，binormals数组
  

基本上，就像WestLangley所说的，如果 extrudePath 是特定的，则几何体会沿着三维样条路径拉伸，并使用FrenetFrames来调整旋转，这与正常挤压的简单方法不同。

在 THREE.TubeGeometry.FrenetFrames 你可能会看到initialNormal1的注释代码。如果您想探索不同的初始位置，或者传递您的预期行为的FrenetFrames，您可以取消注释。

I use THREE.ExtrudedGeometry in two different ways and I expected the same result.

Once I use the depth to set the extrusion options. Another time I use an extrude path which is a line from Vector3(0, 0, 0) to Vector3(0, 0, depth)

The strange thing is that the resulting geometry is unsuspectingly rotated around the Z-axis. Why is this? Is this expected behavior or am I doing something wrong?

A fiddle can be found here and this is my code:

---

Common variables:

// Material for mesh
var material = new THREE.MeshBasicMaterial({color:0xff0000});

// Depth to extrude
var depth = 10;

// Shape to extrude
var shape = new THREE.Shape([
    new THREE.Vector2( -20,-60 ),
    new THREE.Vector2( -20, 60 ),
    new THREE.Vector2(  20, 60 ),
    new THREE.Vector2(  20,-60 )
]);

Here using depth:

var extrudeSettings1 = {
    bevelEnabled: false,
    steps: 1,
    amount: depth
};

var geometry1 = new THREE.ExtrudeGeometry( shape, extrudeSettings1 );

var mesh1 = new THREE.Mesh( geometry1, material );

mesh1.position.set( -50, 0, 0 );

scene.add( mesh1 );

Now using a path

var v1 = new THREE.Vector3( 0, 0, 0 );

var v2 = new THREE.Vector3( 0, 0, depth );

var path = new THREE.LineCurve3( v1, v2 )

var extrudeSettings2 = {
    bevelEnabled: false,
    steps: 1,
    extrudePath: path
};

var geometry2 = new THREE.ExtrudeGeometry( shape, extrudeSettings2 );

var mesh2 = new THREE.Mesh( geometry2, material );

mesh2.position.set( 50, 0, 0 );

scene.add( mesh2 );

EDIT1:

Updated position.set() after WestLangley his comment

EDIT2:

I gave it another thought, but I don't understand WestLangley his answer. The orientation of the shape does not matter for being able to end up on the starting point. Either way the shape is able to have the same orientation as it started.

To illustrate I draw two shapes in the x, y plane and I show the extrusion of the in my opinion only correct result:

解决方案

the behavior can be explained if you look into the source code of THREE.ExtrudedGeometry and THREE.TubeGeometry.FrenetFrames

here's in the comments of ExtrudeGeometry

• extrudePath: // 3d spline path to extrude shape along. (creates Frames if .frames aren't defined)
• frames: // containing arrays of tangents, normals, binormals

so essentially, like WestLangley says, if extrudePath is specific, the geometry is extruded along a 3d spline path, and uses FrenetFrames for adjustment of rotation, unlike the simple approach of a normal extrusion.

In THREE.TubeGeometry.FrenetFrames you might see commented code for the initialNormal1. You might uncomment those if you wish to explore different intial positions, or pass in a FrenetFrames of your intended behavior.

这篇关于ThreeJS - ExtrudeGeometry深度给出与extrudePath不同的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！