2D Shape to Cube

Questions
1

Hi,

I’m very new to Three.js (so please excuse any terminology mistake) and I need your help to figure out something for a personal project.

I’m drawing a quadrilateral shape by setting its 4 edges as Vector2 on the canvas (black wireframe below) and my goal is to extrude (?) this drawn shape as 3D cube or a square plane.

I’m been searching online about this for a few days now but I couldn’t find an answer. So my question is : how would one make a 3D shape with equal sides from a 2D quadrilateral shape ?
In other words : the drawn shape should be one of the faces of a cube ?

Thanks in advance.

2

I’ve not used this stuff but THREE has this three.js docs which I think will fit your bill. It looks like you need to make a THREE.Path to match the shape you want extruded and then BAM, dinner is made and the washing has been put away.

3

You need a bit of math here if you dont wanna use ExtrudeGeometry. I dont have a solution, but maybe this helps. The cube has 4 of 8 points/corners already, you just have to calculate the other 4.
You wanna get the length of one edge by calculating the distance from one point to the other.

let length = p1.distanceTo(p2)

Then you wanna know the normal/direction which the current rectangle is pointing to (where it is facing), to get the direction you want to extrude to. Maybe someone knows how to get the normal more easily?
You could check the angle of the line from p1 to p2 and add 90° to have the right angle.
You have to convert your angle to a vector3 and normalize it. for example (0, 0, 1) is pointing along the z axis.
Or use the THREE.Face3 to get the normal:

    let geometry = new THREE.Geometry()
    
    geometry.vertices = [
        p1,
        p2,
        p3
    ];

    let face =new THREE.Face3(0, 1, 2)

    geometry.faces.push(face)

    geometry.computeVertexNormals()
    geometry.computeFaceNormals()

    console.log('FACE', geometry.faces[0].normal)

Go through all 4 points and add the length of the edge multiplied by the normalized normal vector

Example

// Point
let p1 = new THREE.Vector(1, 2, 5)

// Normal/ Direction vector
let normal = new THREE.Vector(0, 0, 1)

// Edge length
let length = 2

// Multiply "length" to xyz of normal
// (0, 0, 1) * (2, 2, 2) = (0, 0, 2)
normal.multiplyScalar(length)

// Duplicate your your 4 points and add the normal
let p5 = new THREE.Vector3().copy(p1) 
// (1, 2, 5) + (0, 0, 2) = (1, 2, 7)
p5.add(normal)
4

Thank you for your answers. I’ve tried both but couldn’t get the expected result.

What if I made a cube with an arbitrary size to only then move it, rotate it and scale it so one of its faces “faces” perfectly my 2d shape.

Is there a built in way to do something like this or do I need to figure out the maths behind it?

5

See Collection of examples from discourse.threejs.org
Shapes
ExtrudeBufferGeometry

6

An indexed buffer geometry is also an option: https://jsfiddle.net/prisoner849/fyejc93d/
Setting of correct index was the hardest part :sweat_smile:

Click “Set points” button as many times as you want, you’ll get a differently shaped geometry each time.

изображение
изображение835×839 66.9 KB

1 Like
7

Thank you but unless I don’t understand correctly, this is not what I’m asking for. I guess I’ll have to figure out the maths behind it or think of another approach.

Thank you for your answers.

8

I’m not sure how THREE.ExtrudeGeometry does not exactly answer your original question, perhaps I’ve missunderstood?

9

@becky_rose Seems, I’ve misunderstood something too :beers:

10

Well, I need to make the drawn quadrilateral shape into either a square plane or a cube.

From I’ve understood, the extrude process will only make the drawn shape into a 3D object but its edges won’t necessary be equal. Did I get that wrong?

I need this for an augmented reality project :

  • I’m setting a picture of one (or two) of the outside walls of a house as a background texture
  • On this picture, I’m drawing a quadrilateral shape that would represent IRL a 1x1 meter square placed somewhere against the wall of the house
  • I then need to load a custom 3D object and place it against this shape with the correct scale, rotation, depth…
1 Like