Three.js - 使用深度和方向矢量的挤出几何 [英] Three.js - ExtrudeGeometry using depth and a direction vector

问题描述

我想挤出一个形状并创建一个 ExtrudeGeometry ，但形状必须被拉伸到某个方向。我在 Vector3中有一个方向

形状在x，y平面中绘制，通常为z是挤出方向（挤出深度）。所以方向矢量（0,0,1）会导致默认的拉伸。但是例如一个（0,0，-1）会在另一个方向上挤出形状。

我首先尝试使用拉伸路径来实现这一点，但是当使用路径时，形状可以自由地旋转，并且初始方向是任意的。这不是我需要的，形状必须保持原样。你可以在我的上一个问题中阅读这篇到您的几何体。

以下是如何指定将倾斜几何体的剪切矩阵。

  var matrix = new THREE.Matrix4（）; 
 
 var dir = new THREE.Vector3（0.25，1，0.25）; //你设置了这个。单位长度矢量不是必需的。 
 
 var Syx = dir.x / dir.y，
 Syz = dir.z / dir.y; 
 
 matrix.set（1，Syx，0,0，
 0,1,0,0，
 0，Syz，1,0，
 0， 0，0，1）; 
 
 geometry.applyMatrix（matrix）; 
  

（three.js坐标系的y轴向上 - 与您的图例不同。将不得不容纳。）

three.js r.68

I want to extrude a shape and create an ExtrudeGeometry, but the shape has to be extruded into a certain direction. I have a direction in a Vector3

The shape is drawn in in the x, y plane and normally the z is the extrude direction (extrusion depth). So a direction vector (0,0,1) would result in the default extrusion. But for example a (0,0,-1) would extrude the shape in the other direction.

I first tried to use an extrude path to achieve this, but when using a path the shape is allowed to "spin" freely and the initial orientation is arbitrary. This is not what I need, the shape must stay oriented as is. You can read details on this here in my previous question.

I already came up with the idea of applying a matrix to the second half of the vertices of the resulting ExtrudedGeometry, but I cannot seem to get the geometry I want. Maybe it is my clumsy use of matrices, but I think that the face normals are pointing inside out after this trick.

Note The direction vector will never be orthogonal to the z axis since this would give invalid shapes

---

So the question:

How do I get a reliable solution to extrude my shape into the given direction. Here an example. The shape is a square in the x,y plane (width and length 2000) the extrusion depth is also 2000 and three different vectors with a drawing of the expected result seen in 2D (front view) and 3D.

解决方案

Extrude your geometry in the usual way by specifying an extrusion depth, and then apply a shear matrix to your geometry.

Here is how to specify a shear matrix that will tilt a geometry.

var matrix = new THREE.Matrix4();

var dir = new THREE.Vector3( 0.25, 1, 0.25 ); // you set this. a unit-length vector is not required.

var Syx = dir.x / dir.y,
    Syz = dir.z / dir.y;

matrix.set(   1,   Syx,   0,   0,
              0,     1,   0,   0,
              0,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix( matrix );

(The three.js coordinate system has the y-axis up -- unlike in your illustration. You will have to accommodate.)

three.js r.68

这篇关于Three.js - 使用深度和方向矢量的挤出几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！