I have converted pointcloud to potree web format and I want to add a shapefile. As it shown in examples and GitHub, I've edited HTML page and added shapefile import there, but have no result. Pointcloud and shapefile have undefined Cartesian CS. In browser console I have error: 'Uncaught ReferenceError: shapefile is not defined at Function.loadShapefileFeatures' and error: 'shapefile.open(file)' at potree.js script. Maybe I inserted code incorrectly? Here is my code:

I have converted pointcloud to potree web format and I want to add a shapefile. As it shown in examples and GitHub, I've edited HTML page and added shapefile import there, but have no result. Pointcloud and shapefile have undefined Cartesian CS. In browser console I have error: 'Uncaught ReferenceError: shapefile is not defined at Function.loadShapefileFeatures' and error: 'shapefile.open(file)' at potree.js script. Maybe I inserted code incorrectly? Here is my code:

I have converted pointcloud to potree web format and I want to add a shapefile. As it shown in examples and GitHub, I've edit html page and add shapefile import there, but have no result. Pointcloud and shapefile have undefined cartesian CS. In browser console i have error: 'Uncaught ReferenceError: shapefile is not defined at Function.loadShapefileFeatures' and error: 'shapefile.open(file)' at potree.js script. Maybe i inserted code incorrectly? Here is my code:

                let featureToSceneNode = (feature, color) => {
                let geometry = feature.geometry;

                var color = color ? color : new THREE.Color(1, 1, 1);

                if(feature.geometry.type === "Point"){
                    let sg = new THREE.SphereGeometry(1, 18, 18);
                    let sm = new THREE.MeshNormalMaterial();
                    let s = new THREE.Mesh(sg, sm);

                    let [long, lat] = geometry.coordinates;
                    let pos = ([long, lat]);
                    let alt = geometry.coordinates[2]?geometry.coordinates[2]:20;
                    s.position.set(...pos, alt);
                    //console.log(pos,alt)
                    s.scale.set(0.3, 0.3, 0.05);

                    return s;
                }else if(geometry.type === "LineString"){
                    let coordinates = [];

                    let min = new THREE.Vector3(Infinity, Infinity, Infinity);

                    for(let i = 0; i < geometry.coordinates.length; i++){
                        let [long, lat] = geometry.coordinates[i];
                        let pos = ([long, lat]);

                        //console.log("LSZ: ",pos, geometry.coordinates[i][2])

                        let alt = 20;
                        min.x = Math.min(min.x, pos[0]);
                        min.y = Math.min(min.y, pos[1]);
                        min.z = Math.min(min.z, alt);

                        coordinates.push(...pos, alt);
                        if(i > 0 && i < geometry.coordinates.length - 1){
                            coordinates.push(...pos, alt);
                        }
                    }

                    for(let i = 0; i < coordinates.length; i += 3){
                        coordinates[i+0] -= min.x;
                        coordinates[i+1] -= min.y;
                        coordinates[i+2] -= min.z;
                    }

                    let positions = new Float32Array(coordinates);

                    let lineGeometry = new THREE.BufferGeometry();
                    lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                    let material = new THREE.LineBasicMaterial( { color: color} );
                    let line = new THREE.LineSegments(lineGeometry, material);
                    line.position.copy(min);

                    return line;

                }else if(geometry.type === "LineStringZ"){
                    let coordinates = [];

                    let min = new THREE.Vector3(Infinity, Infinity, Infinity);

                    for(let i = 0; i < geometry.coordinates.length; i++){
                        let [long, lat] = geometry.coordinates[i];
                        let pos = ([long, lat]);

                        //console.log("LSZ: ",pos, geometry.coordinates[i][2])

                        let alt = geometry.coordinates[i][2]?geometry.coordinates[i][2]:20;
                        min.x = Math.min(min.x, pos[0]);
                        min.y = Math.min(min.y, pos[1]);
                        min.z = Math.min(min.z, alt);

                        coordinates.push(...pos, alt);
                        if(i > 0 && i < geometry.coordinates.length - 1){
                            coordinates.push(...pos, alt);
                        }
                    }

                    for(let i = 0; i < coordinates.length; i += 3){
                        coordinates[i+0] -= min.x;
                        coordinates[i+1] -= min.y;
                        coordinates[i+2] -= min.z;
                    }

                    let positions = new Float32Array(coordinates);

                    let lineGeometry = new THREE.BufferGeometry();
                    lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                    let material = new THREE.LineBasicMaterial( { color: color} );
                    let line = new THREE.LineSegments(lineGeometry, material);
                    line.position.copy(min);

                    return line;
                }else if(geometry.type === "Polygon"){
                    for(let pc of geometry.coordinates){
                        let coordinates = [];

                        let min = new THREE.Vector3(Infinity, Infinity, Infinity);
                        for(let i = 0; i < pc.length; i++){
                            let [long, lat] = pc[i];
                            let pos = ([long, lat]);
                            let alt = pc[i][2]?pc[i][2]:20;
                            min.x = Math.min(min.x, pos[0]);
                            min.y = Math.min(min.y, pos[1]);
                            min.z = Math.min(min.z, alt);

                            coordinates.push(...pos, alt);
                            if(i > 0 && i < pc.length - 1){
                                coordinates.push(...pos, alt);
                            }
                        }

                        for(let i = 0; i < coordinates.length; i += 3){
                            coordinates[i+0] -= min.x;
                            coordinates[i+1] -= min.y;
                            coordinates[i+2] -= min.z;
                        }

                        let positions = new Float32Array(coordinates);

                        let lineGeometry = new THREE.BufferGeometry();
                        lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                        let material = new THREE.LineBasicMaterial( { color: color} );
                        let line = new THREE.LineSegments(lineGeometry, material);
                        line.position.copy(min);

                        return line;
                    }
                }else{
                    console.log("unhandled feature: ", feature);
                }
            };
            let shapeNode = new THREE.Object3D();
            viewer.scene.scene.add(shapeNode);



            Potree.utils.loadShapefileFeatures("./shape/tt.shp", features => {
                for(let feature of features){
                    let node = featureToSceneNode(feature, 0xbababa);
                    shapeNode.add(node);
                }
            });
            viewer.onGUILoaded(() => {
                // Add entry to object list in sidebar
                let tree = $(`#jstree_scene`);
                let parentNode = "other";
                let nodeID = tree.jstree('create_node', parentNode, {
                        "text": "shapefile",
                        "icon": `${Potree.resourcePath}/icons/triangle.svg`,
                        "object": shapeNode
                    },
                    "last", false, false);
                tree.jstree(shapeNode.visible ? "check_node" : "uncheck_node", nodeID);
            });

        }
    ;




</script>

I have converted pointcloud to potree web format and I want to add a shapefile. As it shown in examples and GitHub, I've edited HTML page and added shapefile import there, but have no result. Pointcloud and shapefile have undefined Cartesian CS. In browser console I have error: 'Uncaught ReferenceError: shapefile is not defined at Function.loadShapefileFeatures' and error: 'shapefile.open(file)' at potree.js script. Maybe I inserted code incorrectly? Here is my code:

                let featureToSceneNode = (feature, color) => {
                let geometry = feature.geometry;

                var color = color ? color : new THREE.Color(1, 1, 1);

                if(feature.geometry.type === "Point"){
                    let sg = new THREE.SphereGeometry(1, 18, 18);
                    let sm = new THREE.MeshNormalMaterial();
                    let s = new THREE.Mesh(sg, sm);

                    let [long, lat] = geometry.coordinates;
                    let pos = ([long, lat]);
                    let alt = geometry.coordinates[2]?geometry.coordinates[2]:20;
                    s.position.set(...pos, alt);
                    //console.log(pos,alt)
                    s.scale.set(0.3, 0.3, 0.05);

                    return s;
                }else if(geometry.type === "LineString"){
                    let coordinates = [];

                    let min = new THREE.Vector3(Infinity, Infinity, Infinity);

                    for(let i = 0; i < geometry.coordinates.length; i++){
                        let [long, lat] = geometry.coordinates[i];
                        let pos = ([long, lat]);

                        //console.log("LSZ: ",pos, geometry.coordinates[i][2])

                        let alt = 20;
                        min.x = Math.min(min.x, pos[0]);
                        min.y = Math.min(min.y, pos[1]);
                        min.z = Math.min(min.z, alt);

                        coordinates.push(...pos, alt);
                        if(i > 0 && i < geometry.coordinates.length - 1){
                            coordinates.push(...pos, alt);
                        }
                    }

                    for(let i = 0; i < coordinates.length; i += 3){
                        coordinates[i+0] -= min.x;
                        coordinates[i+1] -= min.y;
                        coordinates[i+2] -= min.z;
                    }

                    let positions = new Float32Array(coordinates);

                    let lineGeometry = new THREE.BufferGeometry();
                    lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                    let material = new THREE.LineBasicMaterial( { color: color} );
                    let line = new THREE.LineSegments(lineGeometry, material);
                    line.position.copy(min);

                    return line;

                }else if(geometry.type === "LineStringZ"){
                    let coordinates = [];

                    let min = new THREE.Vector3(Infinity, Infinity, Infinity);

                    for(let i = 0; i < geometry.coordinates.length; i++){
                        let [long, lat] = geometry.coordinates[i];
                        let pos = ([long, lat]);

                        //console.log("LSZ: ",pos, geometry.coordinates[i][2])

                        let alt = geometry.coordinates[i][2]?geometry.coordinates[i][2]:20;
                        min.x = Math.min(min.x, pos[0]);
                        min.y = Math.min(min.y, pos[1]);
                        min.z = Math.min(min.z, alt);

                        coordinates.push(...pos, alt);
                        if(i > 0 && i < geometry.coordinates.length - 1){
                            coordinates.push(...pos, alt);
                        }
                    }

                    for(let i = 0; i < coordinates.length; i += 3){
                        coordinates[i+0] -= min.x;
                        coordinates[i+1] -= min.y;
                        coordinates[i+2] -= min.z;
                    }

                    let positions = new Float32Array(coordinates);

                    let lineGeometry = new THREE.BufferGeometry();
                    lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                    let material = new THREE.LineBasicMaterial( { color: color} );
                    let line = new THREE.LineSegments(lineGeometry, material);
                    line.position.copy(min);

                    return line;
                }else if(geometry.type === "Polygon"){
                    for(let pc of geometry.coordinates){
                        let coordinates = [];

                        let min = new THREE.Vector3(Infinity, Infinity, Infinity);
                        for(let i = 0; i < pc.length; i++){
                            let [long, lat] = pc[i];
                            let pos = ([long, lat]);
                            let alt = pc[i][2]?pc[i][2]:20;
                            min.x = Math.min(min.x, pos[0]);
                            min.y = Math.min(min.y, pos[1]);
                            min.z = Math.min(min.z, alt);

                            coordinates.push(...pos, alt);
                            if(i > 0 && i < pc.length - 1){
                                coordinates.push(...pos, alt);
                            }
                        }

                        for(let i = 0; i < coordinates.length; i += 3){
                            coordinates[i+0] -= min.x;
                            coordinates[i+1] -= min.y;
                            coordinates[i+2] -= min.z;
                        }

                        let positions = new Float32Array(coordinates);

                        let lineGeometry = new THREE.BufferGeometry();
                        lineGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));

                        let material = new THREE.LineBasicMaterial( { color: color} );
                        let line = new THREE.LineSegments(lineGeometry, material);
                        line.position.copy(min);

                        return line;
                    }
                }else{
                    console.log("unhandled feature: ", feature);
                }
            };
            let shapeNode = new THREE.Object3D();
            viewer.scene.scene.add(shapeNode);



            Potree.utils.loadShapefileFeatures("./shape/tt.shp", features => {
                for(let feature of features){
                    let node = featureToSceneNode(feature, 0xbababa);
                    shapeNode.add(node);
                }
            });
            viewer.onGUILoaded(() => {
                // Add entry to object list in sidebar
                let tree = $(`#jstree_scene`);
                let parentNode = "other";
                let nodeID = tree.jstree('create_node', parentNode, {
                        "text": "shapefile",
                        "icon": `${Potree.resourcePath}/icons/triangle.svg`,
                        "object": shapeNode
                    },
                    "last", false, false);
                tree.jstree(shapeNode.visible ? "check_node" : "uncheck_node", nodeID);
            });

        }
    ;




</script>


  </body>
</html>