# 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?

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)