Zoom on a specific element

[hesengineering]

Hello,

I wonder if is there any way to zoom on a specific element (having maybe the coordinates) once the dxf is loaded.

Basically the same behaviour achievable zooming with the mouse wheel, but programmatically.

Thanks for such a beautiful library!

[vagran]

Hello,
See SetView() and FitView() methods. They operate with three.js scene coordinates. DXF model space coordinates can be converted to scene coordinates by subtracting scene origin coordinate, which can be obtained by GetOrigin() method. See how initial view is set when a document is loaded here.

[kuket15]

Thanks for your reply.

I'll probably customize the DxfViewer to accept an "initial coordinates" value, since I've seen it works smoothly.

Programmatically I can't make it work properly.

Doing the following, after the view is rendered

viewer.SetView({ x: position.x - origin.x, y: position.y - origin.y }, 20);
viewer.Render();

seems to work correctly, but every further action (like zooming or moving) corrupts the view.

I'm not skilled with three and canvas, so I'm not going to investigate further, but I guess it's something related to the camera.

Luca

[vagran]

viewer.SetView({ x: position.x - origin.x, y: position.y - origin.y }, 20);
viewer.Render();

seems to work correctly, but every further action (like zooming or moving) corrupts the view.

That looks strange. I just tried it in the example page:

const bounds = this.dxfViewer.GetBounds()
const origin = this.dxfViewer.GetOrigin()
const center = {x: (bounds.maxX + bounds.minX) / 2 - origin.x,
                y: (bounds.maxY + bounds.minY) / 2 - origin.y}
this.dxfViewer.SetView(center, 200)
this.dxfViewer.Render()

Inserted it after DXF is loaded here, and it works as expected. The view is not distorted by mouse manipulations. So it is probably something specific to your code.

[kuket15]

Hello @vagran

I've also tested on your example, adding the following code in the finally block.
As far as I can see it works as expected only for the central point.

With a slight modification (e.g. adding +1 offset on both x and y) the distortion occurs after zooming or moving.

const bounds = this.dxfViewer.GetBounds()
const origin = this.dxfViewer.GetOrigin()
const center = {x: (bounds.maxX + bounds.minX) / 2 - origin.x + 1,
                y: (bounds.maxY + bounds.minY) / 2 - origin.y + 1}
this.dxfViewer.SetView(center, 200)
this.dxfViewer.Render()

As the offset decreases, the distortion appears less visible.

Best regards,
Luca

[vagran]

Oh, nice finding! Thanks!
I will fix it in master now. Before the next release, you can use this workaround in your code:

import * as three from "three"
...

const bounds = this.dxfViewer.GetBounds()
const origin = this.dxfViewer.GetOrigin()
const center = {x: (bounds.maxX + bounds.minX) / 2 - origin.x + 100,
                y: (bounds.maxY + bounds.minY) / 2 - origin.y + 100}
this.dxfViewer.SetView(center, 200)
//////////// Temporal workaround until fixed in SetView()
this.dxfViewer.controls.target = new three.Vector3(
   this.dxfViewer.camera.position.x, this.dxfViewer.camera.position.y, 0)
this.dxfViewer.controls.update()
///////////
this.dxfViewer.Render()

[kuket15]

Thanks to you for sharing such a good tool!

Best wishes,
Luca

[joafeldmann]

How would I use SetView to focus on DXF coordinates. Is there already an existing helper we can use?

For example I have the following metadata:

{
  handle: "D623",
  ownerBlockRecordSoftId: "1F",
  layer: "Beschriftung-01",
  lineType: "AUSGEZOGEN",
  colorIndex: 18,
  color: 0,
  lineweight: 25,
  subclassMarker: "AcDbText",
  startPoint: { x: 164088.958289691, y: -40951.54250350414, z: 0 },
  textHeight: 175,
  text: "EINGANG",
  xScale: 0.8042255661954603,
  styleName: "Century Gothic",
  halign: 5,
  endPoint: { x: 165014.883289691, y: -40951.54250350414, z: 0 },
  type: "TEXT",
}

[vagran]

Currently, there is no such helper. But is quite easy to get three.js world coordinates, see this answer.