Support for loading URDF files of Franka Panda Robotic arm on VR

addy1997 commented 7 months ago

Hi @gkjohnson,

How do I use this library to load the URDF of the Panda Robotic Arm in THREE.JS?

gkjohnson commented 7 months ago

Hi @addy1997 - can you provide an example of what you've tried that hasn't worked? The URDF doesn't looks so unique so it should be able to be loaded based on the example code.

addy1997 commented 7 months ago

Hi @gkjohnson,

I tried something like this to load the 3D model (in .GLB format ) of Panda robotic arm using AFRAME. The issue with .GLB model is that it doesn't store the properties of the Panda robot similar to the URDF file. My objective is to replicate Panda robot's motion on the 3D model on WebXR.

gkjohnson commented 7 months ago

Sorry I meant using the URDFLoader. There are instructions and examples, including for WebXR, in the README - what have you tried that isn't working?

addy1997 commented 7 months ago

Hi @gkjohnson,

So I am trying to import urdf-loaders into my index.html file but it throws this error:

Error Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8" />
    <title>Telemetry transfer from Panda robotic arm to the Digital twin</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.misc.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>

    <!--<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
            {
                 "imports": {
                    "urdf-loaders": "https://raw.githubusercontent.com/gkjohnson/urdf-loaders/master/javascript/src/URDFLoader.js"
                 }
              }
        </script>-->

    <script type="module">

        import { URDFLoader } from '../urdf-loaders/javascript/src/URDFLoader.js';

        AFRAME.registerComponent('load-panda-urdf', {

            init: function () {
                const manager = new THREE.LoadingManager();
                const loader = new URDFLoader(manager);
                loader.load(
                    '../urdf-loaders/urdf/T12/urdf/T12.URDF',
                    robot => {

                        // The robot is loaded!
                        this.el.sceneEl.object3D.add(robot);
                    });
            }
        });

    </script>
</head>
<html>

gkjohnson commented 7 months ago

Error Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

This is an issue with your server or build process setup and not related to this project. There's not enough information to see what's happening and unfortunately I don't have the availability to help with this unrelated issue. I recommend looking up the error thats been logged and becoming familiar with the node and npm package ecosystem. You can also ask for help at stackoverflow.com or the threejs forums - even though this isn't related to three people may be able to guide you.

addy1997 commented 6 months ago

Hi @gkjohnson,

Thanks for the clarification and apologies for opening this issue. This appears to be an error in my server.

When I try to load this file (using the code below), I got these errors

import 'urdf-loader';
const manager = new THREE.LoadingManager();
                const loader = new URDFLoader(manager);
                loader.load('https://cdn.jsdelivr.net/gh/StanfordASL/PandaRobot.jl@master/deps/Panda/panda.urdf',
                    robot => {

                        // The robot is loaded!
                        this.el.sceneEl.object3D.add(robot);
                    })

gkjohnson commented 6 months ago

Please see the documentation on how to implement support for other geometry file types, such as OBJ.

gkjohnson / urdf-loaders

Support for loading URDF files of Franka Panda Robotic arm on VR #285