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