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