ros_robot_visualiser/script.js

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import URDFLoader from './urdf/URDFLoader.js';

// Setup scene, camera, renderer
const canvas = document.getElementById('urdf-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(2, 2, 2);
camera.lookAt(0, 0, 0);

// Lights
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const directional = new THREE.DirectionalLight(0xffffff, 0.8);
directional.position.set(5, 10, 7);
scene.add(directional);

// Controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();

// Helpers
scene.add(new THREE.AxesHelper(1));
const gridHelper = new THREE.GridHelper(2, 10);
gridHelper.rotation.x = Math.PI / 2;
gridHelper.position.z = 0;
scene.add(gridHelper);

// Raycasting
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let hoveredJoint = null;
let isDragging = false;
let lastX = null;
let worldAxis = null;

let draggedJoint = null;


function findJointAncestor(object) {
    while (object && object.parent) {
        if (object.type === 'URDFJoint') return object;
        object = object.parent;
    }
    return null;
}



// Load URDF
const loader = new URDFLoader();
loader.packages = { '': './urdf/' };

function findObjectByName(root, name) {
    let result = null;
    root.traverse(child => {
        if (child.name === name) result = child;
    });
    return result;
}

loader.load('./urdf/sample.urdf', robot => {
    //scene.rotation.x = -Math.PI / 2;
    robot.rotation.x = -Math.PI / 2;
    scene.add(robot);
    document.getElementById('status').textContent = 'URDF Loaded';

    loader.parseVisual = true;
    loader.parseCollision = false;

    // Add AxesHelpers to all meshes
    robot.traverse(obj => {
        if (obj.isMesh) obj.add(new THREE.AxesHelper(0.05));
    });

    // Setup pointer events
    canvas.addEventListener('pointermove', event => {
        mouse.x = (event.clientX / canvas.clientWidth) * 2 - 1;
        mouse.y = -(event.clientY / canvas.clientHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(robot.children, true);

        if (isDragging && draggedJoint && worldAxis) {
            const deltaX = event.clientX - lastX;
            lastX = event.clientX;
            const angle = deltaX * 0.005;
            console.log(worldAxis, angle);
            draggedJoint.rotateOnAxis(worldAxis, angle);
        }


        if (intersects.length > 0) {
            const target = intersects[0].object;

            // Reset previous highlight
            if (
                hoveredJoint &&
                hoveredJoint.material &&
                'emissive' in hoveredJoint.material &&
                typeof hoveredJoint.material.emissive.setHex === 'function'
            ) {
                hoveredJoint.material.emissive.setHex(0x000000);
            }

            hoveredJoint = target;

            // Highlight new joint
            if (
                hoveredJoint.material &&
                'emissive' in hoveredJoint.material &&
                typeof hoveredJoint.material.emissive.setHex === 'function'
            ) {
                hoveredJoint.material.emissive.setHex(0x333333);
            }

        } else {
            if (
                hoveredJoint &&
                hoveredJoint.material &&
                'emissive' in hoveredJoint.material &&
                typeof hoveredJoint.material.emissive.setHex === 'function'
            ) {
                hoveredJoint.material.emissive.setHex(0x000000);
            }
            hoveredJoint = null;
        }

    });

    canvas.addEventListener('pointerdown', event => {
        if (!hoveredJoint) return;

        isDragging = true;
        lastX = event.clientX;
        controls.enabled = false;

        draggedJoint = findJointAncestor(hoveredJoint);
        if (!draggedJoint) return;

        const jointName = draggedJoint.name;
        const jointData = robot.joints?.[jointName];

        // ✅ Check if axis is a valid THREE.Vector3
        if (!(jointData?.axis instanceof THREE.Vector3)) {
            console.warn(`Invalid axis for joint "${jointName}":`, jointData?.axis);
            return;
        }

        const urdfAxis = jointData.axis.clone();
        if (urdfAxis.lengthSq() === 0) {
            console.warn(`Zero-length axis for joint "${jointName}"`);
            return;
        }

        worldAxis = urdfAxis.normalize();

        console.log(`Dragging joint "${jointName}" on axis`, worldAxis.toArray());
    });






    canvas.addEventListener('pointerup', () => {
        isDragging = false;
        controls.enabled = true;
        draggedJoint = null;
        worldAxis = null;
    });


    animate();
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}