How to move mesh to camera near

Questions
1 
async function getMousePointer({event}){
		markupMouse.x = ( (event.clientX-viewer.context.getDomElement().getBoundingClientRect().x) / viewer.context.getDomElement().clientWidth ) * 2 - 1;
		markupMouse.y = -( (event.clientY-viewer.context.getDomElement().getBoundingClientRect().y) / viewer.context.getDomElement().clientHeight ) * 2 + 1;
		markupPoint.set(markupMouse.x,markupMouse.y,0);
	}
	async function createRectangle({start,end}){
		const camera = viewer.context.ifcCamera.activeCamera;

		const shape = new Shape();
		shape.moveTo(start.x, start.y);
		shape.lineTo(start.x, end.y);
		shape.lineTo(end.x, end.y);
		shape.lineTo(end.x, start.y);
		const geometry = new ShapeGeometry(shape);
		const material = new MeshBasicMaterial({
			color: randomcolor,
			// color: "rgb(255,0,0)",
			side: DoubleSide,
			depthWrite: false
		});
		const mesh = new Mesh(geometry, material);
		mesh.position.copy(camera.position);
		mesh.quaternion.copy(camera.quaternion);
		mesh.updateMatrix();
		return mesh;

	}

draw rectangle with mouse.
It’s too close and off camera.
how do i fix it?

2

It is difficult to understand the question. Maybe the best would be to share online ASAP¹ demo (e.g. in CodePen), so that someone can experiment with your code.

Anyway, possible suggestions would be:

  • move the object further away
  • move the camera backwards
  • reduce the near value of the camera
  • increase the fov of the camera
  • set zoom smaller than 1
  • etc.

¹ASAP: As Simple As Possible

3

mesh.position.copy(camera.position) is obviously placing your mesh behind the camera, lol. then, you do not want to place it at camera.near, since it will likely be clipped. you dont want camera.near * 1.001 either, because that will scale the shape incorrectly (you can still do it if you adjust the scale) - instead you probly want to place it at the focal distance of 0.5 * canvas.height / Math.tan(0.5 * camera.fov * Math.PI / 180)