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

Question

I have successfully attached lines to all corners of a cube using a 1x1x1 BoxBufferGeometry. Each of the 8 lines have to vertices, so each line is attached to each of the 8 corners of the cube, but I don't know how to determine the position (it can be any distance) of the other vertices that would stretch out at the same angle of the corner relative to the cube angle.

Since I know all the vertex positions of the cube corners, I could find the opposite angle of the corner vertex relative to the opposite diagonal corner vertex, but I don't know how to derive that, or if it's possible.

Is it possible to find the angle of the cube's corner vertex if I know the xyz angle of the cube itself?

And then if I finally find the angle, can I make the other side of the line vertex position away from the corner at that angle and at a certain distance?

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

    });

I tried to use multiplyScalar as Marquizzo described, but that gives me something like this:

Code:

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

It's pretty straightforward with a Vector3, as long as the center of your cube is still at (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);

Notice that I'm performing the scaling before applying the Matrix4 because the center of the cube must be at (0, 0, 0) in order for the multiplyScalar() to expand out of the center.

Here's a 2D diagram of the concept: