Transform controls are not set in object's real position

Questions
1

Hello,

I create a function that is creating an object from mouse clicks (as can be seen below) and after that adding transform controls to that object. The problem is that those controls are always at the center of the screen, I think that it is due to the position of the object which is 0,0,0 although it is created on the side of the screen. If this is the case, what would be the best way to have transform controls positioned where object is? Many thanks!

 if(main_action == "drawwalls"){

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
  if (clickCount <= 3) {
    controlPoints[clickCount] = intersects[0].point.clone();
    var cp = new THREE.Mesh(new THREE.SphereGeometry(0.125, 16, 12), new THREE.MeshBasicMaterial({color: "red"}));
    cp.position.copy(intersects[0].point);
    scene.add(cp);
    clickCount++;
  } else {
    //make new wall and stop function
    shape = new THREE.Shape();
    shape.moveTo(controlPoints[0].x, -controlPoints[0].z);
    shape.lineTo(controlPoints[1].x, -controlPoints[1].z);
    shape.lineTo(controlPoints[2].x, -controlPoints[2].z);
    shape.lineTo(controlPoints[3].x, -controlPoints[3].z);
    shape.lineTo(controlPoints[0].x, -controlPoints[0].z);
    var extrudeSettings = {
      steps: 1,
      depth: 20,
      bevelEnabled: false
    };
    var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
    extrudeGeom.rotateX(-Math.PI / 2);
  
  var edges = new THREE.EdgesGeometry( extrudeGeom );
	var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
	//scene.add( line );
  
  var wall = new THREE.Mesh( extrudeGeom, [
		new THREE.MeshBasicMaterial( { color: 0xf5f7f5 } ),
		new THREE.MeshBasicMaterial( { color: 0xdce0dd } )
	] ) ;


  var group = new THREE.Group();

  group.add( wall );
  group.add( line );

  scene.add(group);
  scene.add( control );
  control.attach( group );

//  control.target.set(controlPoints[0]);
  controlPoints = [];
  clickCount = 0;
  main_action = "";
  };
};

}

2 Likes