Three.js：将线附加到立方体角，与角的角度相同

Question

我已经使用 1x1x1 BoxBufferGeometry 成功地将线连接到立方体的所有角。 8 条线中的每条线都有顶点，所以每条线都连接到立方体的 8 个角中的每一个，但我不知道如何确定其他会伸展的顶点的位置（可以是任何距离）在角相对于立方体角度相同的角度。

因为我知道立方体角的所有顶点位置，所以我可以找到角顶点相对于对角线角顶点的对角，但我不知道如何推导它，或者是否可能.

如果我知道立方体本身的 xyz 角，是否可以找到立方体角顶点的角度？

然后如果我终于找到了角度，我是否可以让线顶点位置的另一边以那个角度和一定距离远离角落？

    // Get world matrix transformation of the box
    var boxMatrix = cube.matrixWorld;

    var cornerIndex = 0;

    var cornerArr = [
    {w: 1, h: 1, d: 1},
    {w: 1, h: 1, d:-1},
    {w: 1, h:-1, d: 1},
    {w: 1, h:-1, d:-1},
    {w:-1, h: 1, d: 1},
    {w:-1, h: 1, d:-1},
    {w:-1, h:-1, d: 1},
    {w:-1, h:-1, d:-1},
    ];


    lines.forEach(function(line) { // there are 8 lines for 8 cube corners

        var a = 0;

        let cornerOffset = cornerArr[cornerIndex];

        line.geometry.vertices.forEach(function(lineVertex) {

            // Set the initial position of the desired vertex into a Vector3
            var cornerVertex = new THREE.Vector3(cornerOffset.w / 2, cornerOffset.h / 2, cornerOffset.d / 2);

            // Apply the matrix transformation to the vector
            cornerVertex.applyMatrix4(boxMatrix);

            if(a===0){ // attach line to cube corner

                // Set line vertex position to the cube's corner vertex position 

                lineVertex.x = cornerVertex.x;
                lineVertex.y = cornerVertex.y;
                lineVertex.z = cornerVertex.z;

            }else{

                // here I want to set the other lineVertex position, but I don't know how

                var oppositeCornerVertex = new THREE.Vector3(-(cornerOffset.w / 2), -(cornerOffset.h / 2), -(cornerOffset.d / 2));

            }

            a+=1;
        });

        line.geometry.verticesNeedUpdate = true;

        cornerIndex += 1;

    });

我尝试按照 Marquizzo 的描述使用 multiplyScalar，但这给了我这样的结果：

代码：

var scale = 3;

// Copy the corner position
var farCornerVertex = cornerVertex.clone();

// Apply scale to (x, y, z) equally to "expand" the cube
farCornerVertex.multiplyScalar(scale);

// Apply the matrix transformation AFTER getting the position of the far corner
cornerVertex.applyMatrix4(boxMatrix);
farCornerVertex.applyMatrix4(boxMatrix);

lineVertex = farCornerVertex

Answer 1

使用 Vector3 非常简单，只要立方体的中心仍在 (0, 0, 0):

var scale = 2;
var cornerVertex = new THREE.Vector3(w, d, h);

// Copy the corner position
var farCornerVertex = cornerVertex.clone();

// Apply scale to (x, y, z) equally to "expand" the cube
farCornerVertex.multiplyScalar(scale);

// Apply the matrix transformation AFTER getting the position of the far corner
cornerVertex.applyMatrix4(boxMatrix);
farCornerVertex.applyMatrix4(boxMatrix);

请注意，我在应用 Matrix4 之前执行缩放 因为立方体的中心必须位于 (0, 0, 0) 以便multiplyScalar() 向中心扩展。

这是概念的二维图：

Three.js：将线附加到立方体角，与角的角度相同

Three.js: Attach lines to cube corners that go out in the same angle as the corners

angle

vertex

three.js