Hello,
I would like to make on object which is created by simply clicking on two points.
If I click second time (point number two) the object should be created in a way that it looks like a wall.
So far I managed to do this by using ExtrudeBufferGeometry but this does not have 3 dimensions (wall does not have thickness).
function makeWalls(){
control.detach();
if(controlPoints.length ==2 1){
shape = new THREE.Shape();
shape.moveTo(controlPoints[0].x, -controlPoints[0].z);
for(var i = 1; i < controlPoints.length; i++){
shape.lineTo(controlPoints[i].x, -controlPoints[i].z);
}
shape.lineTo(controlPoints[0].x, -controlPoints[0].z);
var extrudeSettings = {
steps: 1,
depth: 40,
bevelEnabled: false
};
var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
extrudeGeom.rotateX(-Math.PI);
var wall = new THREE.Mesh( extrudeGeom, [
new THREE.MeshLambertMaterial({color: 0xffffff, transparent: true, opacity: 1}),
new THREE.MeshLambertMaterial({color: 0xcfcfcf, transparent: true, opacity: 1})
] ) ;
wall.centroid = new THREE.Vector3();
for (var i = 0, l = controlPoints.length; i < l; i++) { wall.centroid.add(controlPoints[i].clone()); }
wall.centroid.divideScalar(controlPoints.length);
var offset = wall.centroid.clone();
wall.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-offset.x, -offset.y, -offset.z));
wall.position.copy(wall.centroid);
allObjects.push(wall);
splineArray= [];
updatePositions();
scene.add(wall);
controlPoints = [];
clickCount = 0;
main_action = "";
//scene.remove(lineDrawMe);
}
else{
console.log('You need to click to create points first. Click on \'Draw Walls\' and make a shape.');
}
}
There is probably better way to achieve this.
Any comment would be helpful. Many thanks!
