gpt4 book ai didi

javascript - ThreeJS - ExtrudeGeometry 深度给出与 extrudePath 不同的结果

转载 作者:行者123 更新时间:2023-11-29 18:13:01 28 4
gpt4 key购买 nike

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

一旦我使用深度来设置挤压选项。还有一次我使用了一条从 Vector3(0, 0, 0)Vector3(0, 0, depth)

的线

奇怪的是,生成的几何体毫无疑问地绕着 Z 轴旋转。为什么是这样?这是预期的行为还是我做错了什么?

可以找到 fiddle here这是我的代码:


常用变量:

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

这里使用深度:

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

编辑 2:

我又想了想,但我不明白 WestLangley 的回答。形状的方向对于能够在起点结束并不重要。无论哪种方式,形状都可以具有与其开始时相同的方向。

为了说明,我在 x、y 平面上绘制了两个形状,并显示了我认为唯一正确结果的拉伸(stretch):

shapes expected extrusion geometry

最佳答案

如果您查看 THREE.ExtrudedGeometryTHREE.TubeGeometry.FrenetFrames 的源代码,就可以解释该行为

这里是ExtrudeGeometry的注释

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

所以本质上,就像 WestLangley 所说的那样,如果 extrudePath 是特定的,几何体将沿着 3d 样条路径挤出,并使用 FrenetFrames 来调整旋转,这与普通挤出的简单方法不同。

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

关于javascript - ThreeJS - ExtrudeGeometry 深度给出与 extrudePath 不同的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25626171/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com