Create a "Line" on the canvas by adjusting the attributes of the "Line" object using Three.JS

Question

I have successfully created a cube and lines using Three.js.

My goal is to position the lines around the cube as guidelines, as shown below:

However, I am struggling to understand the properties of the line:

var lengthVertArray = lengthLineGeometry.vertices;
    lengthVertArray.push(new THREE.Vector3(-240, 50, 0), new THREE.Vector3(30, 120, 0));

By experimenting with different values, I managed to position the "line" for "length".

Yet, I really want to grasp the essence of these properties so that I can accurately adjust them to position the lines for height and width.

You can view my cube with guidelines in this Fiddle: http://jsfiddle.net/boquqL84/3/

If you require any additional information, please let me know.

Any suggestions would be greatly appreciated.

Answer 1

Answer №1

To simplify the process of rotating and scaling your cube, consider adding your lines directly to the cube itself instead of to the scene:

cube.add(lengthLine);

When creating the cube with

cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({

The cube will have coordinates of -0.5 and 0.5. Therefore, position your lines at

lengthVertArray.push(new THREE.Vector3(-0.5, 0.6, 0.6), new THREE.Vector3(0.5, 0.6, 0.6));

This means having the line extend 0.1 units away from the cube's edge at 0.5 units in length.

Answer 2

To simplify the process of rotating and scaling your cube, consider adding your lines directly to the cube itself instead of to the scene:

cube.add(lengthLine);

When creating the cube with

cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({

The cube will have coordinates of -0.5 and 0.5. Therefore, position your lines at

lengthVertArray.push(new THREE.Vector3(-0.5, 0.6, 0.6), new THREE.Vector3(0.5, 0.6, 0.6));

This means having the line extend 0.1 units away from the cube's edge at 0.5 units in length.