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 );
		this.scene.add( line );

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

1626340445(1)

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 );
		this.scene.add( line );

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]);


		this.scene.add(mesh)

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?

im not using any shaders

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

ProfiledContourGeometryMM
2020-06-16 21.03.55


ProfiledContourGeometryUVs


ProfiledContourGeometry

2021-07-15 19.56.25


see also Construction of frames with contour/profile

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
			curve.add(new THREE.LineCurve3(
				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)
		this.scene.add(outline)





		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)

		this.scene.add(mesh)

related
Extrude geometry change shape position when applying extrudePath

Thanks man!