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>
