Drag gltf import

Hello, I am importing a gltf, and it appears in my model. Could I drag the gltf?

My code:

var gltf = {
url: "myURL"
};const node = await dataEngine.loadContent({
format: "glb", // for gltf 2 we use gltf, for gltf 1 we use glb as a format
name: "nombreprueba",
href: gltf.url
});sceneTree.addNode(node);viewer.update();

Hello @MUEBLES_TORGA_SL,

yes! You can drag the imported gltf just like any other node in the viewer.
I expanded our example on loading a gltf by now also being able to drag it.
You can have a look at it here.

Cheers, Michael

Hello @MajorMeerkatThe3rd

It works perfectly. Thank you very much!

Cheers, Jose

Hello @MajorMeerkatThe3rd ,

I have a question about how to limit movement in the plane. I’ve created two walls, and I have restricted the movement and rotation based on the walls. However, I can’t make it stay on the ground consistently. I also can’t limit the movement in the plane. I’ll share the code I’ve used.

const interactionEngine1 = new interactionEngine(viewer);
const dragManager1 = new dragManager();

dragManager1.effectMaterial = new materialData({ color: '#00ff00' });
interactionEngine1.addInteractionManager(dragManager1);

await funcionCargarGLTFPlano('https://cdn.sanity.io/files/4sbuob1p/production/e8a1ac21a6b2678bf34cbe24abf64bb77b3aac43.gltf');

dragManager1.addDragConstraint(
    new planeConstraint(glMatrix.vec3.fromValues(0, 0, 0), glMatrix.vec3.fromValues(0, 0, 0))
  );
  dragManager1.addDragConstraint(
    new planeConstraint(glMatrix.vec3.fromValues(1, 0, 0), glMatrix.vec3.fromValues(459, 0, 0), {
      axis: glMatrix.vec3.fromValues(0, 0, 1),
      angle: Math.PI / 2
    })
  );

dragManager1.addDragConstraint(
    new planeConstraint(glMatrix.vec3.fromValues(0, 1, 0), glMatrix.vec3.fromValues(0, -459, 0), {
      axis: glMatrix.vec3.fromValues(0, 0, 1),
      angle: 0
    })
  );

  dragManager1.addDragConstraint(
    new planeConstraint(glMatrix.vec3.fromValues(0, 0, 1), glMatrix.vec3.fromValues(0, 0, 0))
  );

sceneTree.root.updateVersion();
viewer.update();

I’ll send you a video of what happens so you can understand it.

Hello @MUEBLES_TORGA_SL,

what I would recommend in your use case is to use two line constraints, one on each side of the wall. With the line constraint you can define a fixed start and end point and it therefore has a fixed position in which the shelf can be moved along the wall. The rotation on the line constraint works in the same way as for planes, so part of your code can be re-used there.

Let me know if that is what you needed here!

Cheers, Michael

Hello @MajorMeerkatThe3rd ,

I have managed to make the lineConstraint work. Is there any method to check if two gltf models are in collision?

Hello @MUEBLES_TORGA_SL,

currently, we do not have a way of checking if two gltfs intersect, as this kind of intersection test takes a lot of time and would slow applications down. There are multiple ways you could solve this issue in other ways:

  1. You could use point constraints in the combination with line constraints to be able to allow for the placement of objects at positions that are currently free.
  2. You could separate the line constraint where an object was place into multiple line constraints on either side of the object.
  3. You could calculate the bounding box of the current object and calculate the intersection with the other objects bounding boxes in the scene.

I hope this helps.

Cheers, Michael

1 Like

Good morning,

I am trying to move with a gltf that I use as a pin to another gltf. I do it by modifying the transformation but it slows down the viewer.

planner.sceneTree.root.children[idMove].transformations[0].matrix[12] = planner.sceneTree.root.children[idMove].transformations[0].matrix[12] + position.x;

planner.sceneTree.root.children[idMove].transformations[0].matrix[13] = planner.sceneTree.root.children[idMove].transformations[0].matrix[13] + position.y;

planner.sceneTree.root.children[idMove].updateVersion();

Is there a way to move it without using the transformation and not slow it down?

Hello @MUEBLES_TORGA_SL,

could you explain further what you mean by “it slows down the viewer”. Do you call the code that you provided in a loop? Or just at the beginning once?

Cheers, Michael

Hello @MajorMeerkatThe3rd ,

I call the code in EVENTTYPE.INTERACTION.DRAG_MOVE. To make the 2 objects move at the same time.

Cheers, Jose

Hello @MUEBLES_TORGA_SL

There is a much faster way fortunately. Instead of node.updateVersion() you can call viewport.updateNodeTransformation(node) which will only update the transformation of the specific node. This should speed things up!

Cheers, Michael

1 Like

We’re experiencing difficulties with a specific block of code hosted on CodeSandbox, accessible via this link: https://codesandbox.io/p/sandbox/gltf-loading-dragging-forked-lgmm2q?file=%2Fsrc%2Findex.ts%3A48%2C12-48%2C104.

The code in question generally performs well, successfully loading most GLTF files produced by ShapeDiver. However, we’ve encountered instances where it fails to load certain GLTF files. Upon examination of the non-loadable GLTF files generated by ShapeDiver, it appears that these models lack textures, which may be contributing to the issue.

Here is an example of a ShapeDiver-generated GLTF file that does not work:
https://cdn.sanity.io/files/4sbuob1p/production/6809901ea2b72bf0d541d918a622b9286f76a80e.glb

Could you provide insights or solutions to address this loading inconsistency?

Hello @Juan_Acosta,

could you add me to the codesandbox (michael@shapediver.com) or change the visibility of it? I currently can’t access the sandbox or the file you sent.

Cheers, Michael

this is the public link: https://codesandbox.io/p/sandbox/gltf-loading-dragging-forked-lgmm2q?file=%2Fsrc%2Findex.ts

@MajorMeerkatThe3rd I think the problem is the function that generates ShapeDiver GLTF, because in some cases not all textures are saved or no textures are stored.

For example this is the model in ShapeDiver:
image

This the GLTF resulted:


https://cdn.sanity.io/files/4sbuob1p/production/84c2ba4c08c06e228ccc092c164aeed1479c545a.glb

Please help us to fix it, this is an application running in a production environment with multiple users using it every day.

Hello @Juan_Acosta,

thank you for further debugging this. Did you get the gltf direct from GH or do did you download it via the viewer? This will help us understand where the issue is coming from.

Could you also share a link to the model in question on the platform? You can send me a private message with that of course.

Cheers, Michael

Hi @MajorMeerkatThe3rd ,

We are obtaining the GLTF from the viewer’s API using the following code:

session.convertToGlTF();

It happens with any model. What’s odd is that it used to work before and now it doesn’t.

Hello @MUEBLES_TORGA_SL

I’m currently writing with @Juan_Acosta in via PMs to resolve this issue.

Cheers, Michael

Hi @MajorMeerkatThe3rd ,

I apologize for the delay. The issue has been resolved—it was related to how we were storing the file.