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

问题描述

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

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

一旦我使用深度来设置挤压选项.另一次我使用了一个挤出路径，它是从 Vector3(0, 0, 0) 到 Vector3(0, 0, depth)

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)

奇怪的是，生成的几何体毫无防备地围绕 Z 轴旋转.为什么是这样?这是预期的行为还是我做错了什么?

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:

常用变量:

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

在 WestLangley 发表评论后更新了 position.set()

Updated position.set() after WestLangley his comment

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

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.

为了说明我在 x, y 平面中绘制了两个形状，并显示了我认为唯一正确结果的挤压:

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

推荐答案

如果您查看 THREE.ExtrudedGeometry 和 THREE.TubeGeometry.FrenetFrames<的源代码，可以解释该行为/代码>

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

这里是 ExtrudeGeometry 的评论

here's in the comments of ExtrudeGeometry

• extrudePath://沿着挤出形状的 3d 样条路径.(如果 .frames 未定义，则创建框架)
• frames://包含切线、法线、副法线的数组

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

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.

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

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屋！