How to move mesh to camera near

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;
	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);
		return mesh;


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

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

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)