Uncaught TypeError: program is undefined

[Gowresh-MARC]

Description I want to add a new THREE object to the scene. Ideally I want to be able to draw a polygon by clicking on the viewer map.

• Library Version: latest
• ROS Version: Noetic
• Platform / OS: Ubuntu 20.04

Steps To Reproduce

 for (var i = 1; i <= 6; i++) {
    const geometry = new THREE.BoxGeometry(0.1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x008800 });
    const cube = new THREE.Mesh(geometry, material);
    viewer.addObject(cube, true);
    cube.position.x = i;
}

Expected Behavior A cube should be added in the viewer

Actual Behavior

Uncaught TypeError: program is undefined
    setProgram ros3d.js:22856
    renderBufferDirect ros3d.js:21880
    renderObject ros3d.js:22639
    renderObjects ros3d.js:22610
    render ros3d.js:22374
    draw ros3d.js:59331
    draw ros3d.js:59335
    start ros3d.js:59308
    Viewer ros3d.js:59300
    Configuration Config.js:59

[MatthijsBurgh]

Check https://github.com/RobotWebTools/ros3djs/issues/149

Make sure the divID of the viewer does exist in your html.

[Gowresh-MARC]

I have defined divID. The following is my viewer config:-

var viewer = new ROS3D.Viewer({ background: '#F7F4FF', divID : 'map', width : 950, height : 610, antialias : true, cameraPose : { x: 0, y: 0, z: 180 }, displayPanAndZoomFrame: false });

[MatthijsBurgh]

Please provide an entire HTML example. Because also stuff outside your script tags can break stuff.

[Gowresh-MARC]

import "./Config.css";

import ROSLIB from 'roslib';
import { Joystick } from 'react-joystick-component';
import * as ROS3D from 'ros3d';
import MediaQuery from "react-responsive";
import {internalIpV6, internalIpV4} from 'internal-ip';
import React, {useEffect, useRef, useState } from "react";
import Toggle from 'react-toggled'
import Network from "./Network.js";
import * as THREE from "three";

function Configuration() {

var old_state = null;
var zoning = false;
var pointing = false;
var rbServer = new ROSLIB.Ros({
            url : "ws://" + location.hostname + ":9090"
        });
var polygon;
var pointCallBack;
var viewer;
var selected_pose = null;
var cur_map = null;
useEffect(() => {
    var home_pose;

    var map_home = new ROSLIB.Param({
            ros : rbServer,
            name : 'map_server/map_name'
    });

    map_home.get(function(value) {
        cur_map = value;
            console.log(value);
            const requestOptions = {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({"map_name": cur_map})
            };
            var url = "http://"+location.hostname+":7799/marc/ax-cleaning/get_home"
            fetch(url, requestOptions)
            .then(function(response){ return response.json(); })
        .then(function(data) {
            //const items = data;
            console.log(data);
            home_pose = data;
        })
    });

      //console.log(document.getElementById('map'))
      var viewer = new ROS3D.Viewer({
      background: '#F7F4FF',
      divID : 'map',
      width : 950,
      height : 610,
      antialias : true,
      cameraPose : {
      x: 0,
      y: 0,
      z: 180
      },
      displayPanAndZoomFrame: false
    });
    viewer.cameraControls.userRotateSpeed = 0

    // Setup the marker client.
    var gridClient = new ROS3D.OccupancyGridClient({
      ros : rbServer,
      rootObject : viewer.scene,
      continuous: true
      });  
    var tfClient = new ROSLIB.TFClient({
      ros : rbServer,
      angularThres : 0.01,
      transThres : 0.01,
      rate : 10.0,
      fixedFrame : '/map'
    });
    console.log(viewer);

    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { color: 0x000000 } );
    var mesh = new THREE.Mesh( geometry, material );

    // Add the threejs object to the scene inside ros3djs
    viewer.scene.add(mesh);
    viewer.cameraControls.addEventListener("dblclick", (event3d) => {
         console.log(event3d.mouseRay);
         var map_x = event3d.mouseRay.origin.x + (event3d.mouseRay.direction.x * event3d.mouseRay.origin.z);
         var map_y = event3d.mouseRay.origin.y + (event3d.mouseRay.direction.y * event3d.mouseRay.origin.z);
         console.log('x: ' + map_x + '  y: ' + map_y);
         });

    // Setup the marker client.
    }, []);

return(
<>

       <div className="map4Canvas-main" >
            <div className="map4Canvas" id="map">
            </div>
            </div>
    </>
);
}

export default Configuration;

[Gowresh-MARC]

I am running this js file as a react node

[MatthijsBurgh]

When running with react, many more things can go wrong.

Sorry to say, I am not here to fix your react issues. I am willing to help you with HTML examples. When you have a working HTML example, it is up to you to get your react code working.

So please provide a SIMPLE HTML example, which is easy to run for someone without requiring stuff to install.