# Questions about ExtrudeGeometry extrudePath property

I draw a line like this , lets call it line A

code here

``````        let width = 1
let doorWidth = 1
let r = 2
let doorHeight = 1.5

let path = new THREE.Path()
path.autoClose = false

path.moveTo(doorWidth/2,Math.sqrt(3/4)*r+width/2)
path.lineTo(r/2+width/4,Math.sqrt(3/4)*r+Math.sqrt(3/16)*width)
path.lineTo(r+width/2,0)
path.lineTo(r/2+width/4,-Math.sqrt(3/4)*r-Math.sqrt(3/16)*width)
path.lineTo(-r/2-width/4,-Math.sqrt(3/4)*r-Math.sqrt(3/16)*width)
path.lineTo(-r-width/2,0)
path.lineTo(-r/2-width/4,Math.sqrt(3/4)*r+Math.sqrt(3/16)*width)
path.lineTo(-width/2,Math.sqrt(3/4)*r+width/2)

let point2Ds = path.getPoints()
const point3Ds = []

for (let i = 0; i < point2Ds.length; i += 2) {
const pointA = point2Ds[i];
const pointB = point2Ds[i + 1] || pointA;

point3Ds.push(new THREE.Vector3(pointA.x, doorHeight/2, pointA.y))
point3Ds.push(new THREE.Vector3(pointB.x, doorHeight/2, pointB.y))

}

const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});

point3Ds.forEach(e=>{
console.log(e)
})

const geometry = new THREE.BufferGeometry().setFromPoints( point3Ds );

const line = new THREE.Line( geometry, material );
``````

and i got another closed line ,lets call it line B code here

``````        let width = 1
let doorWdith = 1
let r = 2
let doorHeight = 1.5

let shape = new THREE.Shape()
shape.moveTo(r,0)
shape.lineTo(r+width,0)
shape.lineTo(r+width,doorHeight)
shape.lineTo(r,doorHeight)
shape.lineTo(r,0)

let point2D = shape.getPoints()
const point3D = []

for (let i = 0; i < point2D.length; i += 2) {
const pointA = point2D[i];
const pointB = point2D[i + 1] || pointA;

point3D.push(new THREE.Vector3(pointA.x, pointA.y,0 ))
point3D.push(new THREE.Vector3(pointB.x, pointB.y,0 ))

}

const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});

const geometry = new THREE.BufferGeometry().setFromPoints( point3D );

const line = new THREE.Line( geometry, material );
``````

now i wanna create a Mesh which use ExtrudeGeometry and use line B 's shape,extrudePath is line A.

but i got this

code here

``````        let width = 1
let doorWdith = 1
let r = 2
let doorHeight = 1.5

let shape = new THREE.Shape()
shape.moveTo(r,0)
shape.lineTo(r+width,0)
shape.lineTo(r+width,doorHeight)
shape.lineTo(r,doorHeight)
shape.lineTo(r,0)
let path = new THREE.Path()
path.autoClose = false

path.moveTo(doorWdith/2,Math.sqrt(3/4)*r+width/2)
path.lineTo(r/2+width/4,Math.sqrt(3/4)*r+Math.sqrt(3/16)*width)
path.lineTo(r+width/2,0)
path.lineTo(r/2+width/4,-Math.sqrt(3/4)*r-Math.sqrt(3/16)*width)
path.lineTo(-r/2-width/4,-Math.sqrt(3/4)*r-Math.sqrt(3/16)*width)
path.lineTo(-r-width/2,0)
path.lineTo(-r/2-width/4,Math.sqrt(3/4)*r+Math.sqrt(3/16)*width)
path.lineTo(-width/2,Math.sqrt(3/4)*r+width/2)

let point2Ds = path.getPoints()
const lines = []

for (let i = 0; i < point2Ds.length; i++) {
const pointA = point2Ds[i];
const pointB = point2Ds[i + 1] || pointA;

lines.push(
new THREE.LineCurve3(
new THREE.Vector3(pointA.x, doorHeight/2, pointA.y),
new THREE.Vector3(pointB.x, doorHeight/2, pointB.y),
),
);

}

const curve = new THREE.CurvePath();

curve.curves.push(...lines);

let geometry = new THREE.ExtrudeGeometry( shape,{
// steps: 4,
depth:50,
bevelEnabled: false,
// curveSegments: 12,
extrudePath : curve
} );

const material = new THREE.MeshStandardMaterial( {
color: 0xff4400,
side: THREE.DoubleSide,
roughness: 0.125,
metalness: 0.875,
});
const materialLids = new THREE.MeshBasicMaterial( {
color: 0xff4400,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh( geometry, [materialLids,material]);

``````

should it be something like a medieval fort?
maybe like this one?

did i misunderstood this class or i just did it in a wrong way?may be i set some bad properties?

when i set geometry to this following one

``````            let geometry = new THREE.ExtrudeGeometry( shape,{
steps: 500,
depth:0.001,
bevelEnabled: false,
curveSegments: 500,
extrudePath : curve
} );
``````

I got this odd pic it seems my mesh closed automaticlly
and the figures seems incorrect

also

if the closed line use extrudePath a,b,c (three of them are parallel) separately
is there a difference?

I maybe found the reason why this shows up so odd it looks the line was rotated

but how and why?

Have you seen these examples from the Collection of examples from discourse.threejs.org ?

ProfiledContourGeometryMM ProfiledContourGeometryUVs

ProfiledContourGeometry Yes,I remember ProfiledContourGeometry is Prisoner849 's code , does this means extrudeGeometry with extrudePath cannot implement this effect?

I make it now ,but just a stupid way using primordial THREE function.

code here

``````  		let width = 1
let doorWdith = 1
let r = 2
let doorHeight = 1.5

let shape = new THREE.Shape()
shape.moveTo(doorWdith/2,-Math.sqrt(3/4)*r)
shape.lineTo(r/2,-Math.sqrt(3/4)*r)
shape.lineTo(r,0)
shape.lineTo(r/2,Math.sqrt(3/4)*r)
shape.lineTo(-r/2,Math.sqrt(3/4)*r)
shape.lineTo(-r,0)
shape.lineTo(-r/2,-Math.sqrt(3/4)*r)
shape.lineTo(-doorWdith/2,-Math.sqrt(3/4)*r)
shape.lineTo(-doorWdith/2,-Math.sqrt(3/4)*r-width)
shape.lineTo(-r/2-Math.sqrt(1/3)*width,-Math.sqrt(3/4)*r-width)
shape.lineTo(-r-Math.sqrt(12/9)*width,0)
shape.lineTo(-r/2-Math.sqrt(1/3)*width,Math.sqrt(3/4)*r+width)
shape.lineTo(r/2+Math.sqrt(1/3)*width,Math.sqrt(3/4)*r+width)
shape.lineTo(r+Math.sqrt(12/9)*width,0)
shape.lineTo(r/2+Math.sqrt(1/3)*width,-Math.sqrt(3/4)*r-width)
shape.lineTo(doorWdith/2,-Math.sqrt(3/4)*r-width)
shape.lineTo(doorWdith/2,-Math.sqrt(3/4)*r)

let lineMaterial =  new THREE.LineBasicMaterial({
color: 0x0000ff
})

let curve = new THREE.CurvePath()
let point2Ds = shape.getPoints()
let pointA
let pointB
for(let i = 0;i<point2Ds.length;i++){
pointA = point2Ds[i]
pointB = point2Ds[i+1]|| pointA
new THREE.Vector3(pointA.x,pointA.y,0),
new THREE.Vector3(pointB.x,pointB.y,0)
))
}

let BufferGeometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints())
let outline  = new THREE.Line(BufferGeometry,lineMaterial)

let geometry = new THREE.ExtrudeGeometry( shape,{
steps: 2000,
depth: doorHeight,
bevelEnabled: false,
curveSegments: 2000,
} );

const material = new THREE.MeshLambertMaterial( {
color: 0x77787b,
// side: THREE.DoubleSide,
roughness: 0.125,
metalness: 0.875,
});
const materialLids = new THREE.MeshBasicMaterial( {
color: 0x77787b,
// side: THREE.DoubleSide
});
const mesh = new THREE.Mesh( geometry, [materialLids,material]);
//mesh.rotateX(Math.PI*0.5)
//mesh.position.set(0,doorHeight,0)