Hello,
I have a function that creates something similar to the wall: when I click on the scene, first click and second click are determinig the begning and the end of the wall (wall height is fixed).
This is the way it looks like:
For achieving this I am using the ExtrudeBufferGeometry, like this:
if (StartPoint.x == 0 && StartPoint.y == 0) StartPoint = intersects[0].point.clone();
controlPoints.push(intersects[0].point.clone());
if (controlPoints.length == 2) {
shape = new THREE.Shape();
shape.moveTo(controlPoints[0].x, -controlPoints[0].z);
shape.lineTo(controlPoints[1].x, -controlPoints[1].z);
var extrudeSettings = {
steps: 1,
depth: WallHeight,
bevelEnabled: false
};
console.log(controlPoints);
var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
var wall = new THREE.Mesh( extrudeGeom, [
new THREE.MeshLambertMaterial({color: ColorWall1, transparent: true, opacity: 0.63}),
new THREE.MeshLambertMaterial({color: ColorWall2, transparent: true, opacity: 0.63})
] ) ;
wall.name = "Wall";
wall.rotation.x = Math.PI * - 0.5;
scene.add(wall);
clickCount = 0;
controlPoints[0] = controlPoints[1];
controlPoints.pop();
}
After this object is created I have two issues:
- position of object is 0,0,0 which is not the correct one
- when I try to rotate the object it rotates around the center of the scene and not around its own center.
Could you help me with the additional functions that I need to apply in order to fix the above issues?
Many thanks,
Mirko