1

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>
1

You need to add the script for shapefiles (shapefile.js)

<script src="libs/shapefile/shapefile.js"></script>

then potree.js can call "shapefile"

  • thanks! But after that I have such error: "THREE.Object3D.add: object not an instance of THREE.Object3D." – Sergey N May 6 at 8:25
  • maybe is the path location, take a look above in the ´<potree.loadpointcloud("...">´ line – OSCAR_P May 6 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.