Develop Reference

Potree library not working consistently in react js

I have integrated potree in my react web app to render 3D models and point cloud. Whenever I load it for first time it renders and loads the 3D model without any hassle, but if the page is refreshed or revisited it fails to load. Prompts the error - Potree is undefined.
How to solve this ?
Here is my code snippet.
import React from 'react';
import styled from "styled-components/macro";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js"
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import * as THREE from 'three';
const Wrapper = styled.div`
background-color: black;
display: flex;
flex-direction: column;
height: 675px;
position: relative;
`;
// import vanillaJS Potree libs, /!\ would be best with proper ES6 import
export default class PointcloudNavigator extends React.Component {
constructor(props) {
super(props)
this.potreeContainerDiv = React.createRef();
}
render() {
return (
<div id="potree-root">
<Wrapper ref={this.potreeContainerDiv} className={"potree_container "}>
<div id="potree_render_area"></div>
</Wrapper>
</div>
)
}
addLights = () => {
const lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1.2, 0);
lights[1] = new THREE.PointLight(0xffffff, 1.2, 0);
lights[2] = new THREE.PointLight(0xffffff, 1.2, 0);
lights[0].position.set(0, 0, 0);
lights[1].position.set(1000, 2000, 1000);
lights[2].position.set(- 1000, - 2000, - 1000);
this.viewer.scene.scene.add(lights[0]);
this.viewer.scene.scene.add(lights[1]);
this.viewer.scene.scene.add(lights[2]);
const ambientLight = new THREE.AmbientLight(0x404040, 2.0);
ambientLight.position.set(0, 0, 0);
this.viewer.scene.scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xcccccc, 0.5);
dirLight.position.set(0, 0, 0);
this.viewer.scene.scene.add(dirLight);
};
setPointCloudsVisible = (flag) => {
this.viewer.setEDLEnabled(true);
// Using opacity we can still perform measurements
this.viewer.setEDLOpacity(flag ? 1 : 0);
// for(let pointcloud of viewer.scene.pointclouds){
// pointcloud.visible = flag;
// }
}
componentDidMount() {
var width = window.innerWidth;
var height = window.innerHeight;
// initialize Potree viewer
const viewerElem = this.potreeContainerDiv.current
const Potree = window.Potree
console.log(Potree);
this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
this.viewer = new Potree.Viewer(viewerElem);
this.addLights()
this.viewer.setEDLEnabled(true);
this.viewer.setFOV(60);
this.viewer.setPointBudget(1 * 1000 * 1000);
this.viewer.setClipTask(Potree.ClipTask.SHOW_INSIDE);
this.viewer.loadSettingsFromURL();
this.viewer.setControls(this.viewer.orbitControls)
// console.log({ this.viewer })
this.viewer.loadGUI(() => {
this.viewer.setLanguage('en');
document.getElementById("menu_appearance").next().show();
this.viewer.toggleSidebar();
});
// Load and add point cloud to scene
// let url = "./point_cloud.ply"
let url = "http://dev.xyz.in/3d/entwine_pointcloud/ept.json"
// let url = "./odm_mesh.ply"
this.scene = this.viewer.scene;
Potree.loadPointCloud(url).then(e => {
let pointcloud = e.pointcloud;
let material = pointcloud.material;
material.activeAttributeName = "rgba";
// material.activeAttributeName = "elevation";
// pointcloud.material.elevationRange = [60, 120];
material.minSize = 2;
material.pointSizeType = Potree.PointSizeType.FIXED
this.viewer.scene.addPointCloud(pointcloud);
this.viewer.fitToScreen();
console.log("This is the url", url);
}, e => console.err("ERROR: ", e));
const objLoader = new OBJLoader(this.manager);
const mtlLoader = new MTLLoader(this.manager);
objLoader.crossOrigin = '';
mtlLoader.crossOrigin = '';
mtlLoader.load(`http://dev.xyz.in/3d/119/odm_texturing/odm_textured_model_geo.mtl`, (materials) => {
// let changeMapKd = async () => {
// Object.keys(materials.materialsInfo).map((material, key) => {
// console.log(materials.materialsInfo[material], '++++++++++++++++++++++++++++++++++', key)
// materials.materialsInfo[material].map_kd = `${materials.materialsInfo[material].map_kd}?${this.props.user.sas_token}`
// })
// }
// changeMapKd().then(() => {
console.log(materials)
materials.preload()
objLoader.setMaterials(materials)
objLoader.load(`http://dev.xyz.in/3d/119/odm_texturing/odm_textured_model_geo.obj`, (object) => {
console.log("sfjbdjghdbfksdlnfdkfsm", object)
// this.camera.position.y = -50;
// this.camera.position.z = 10;
var box = new THREE.Box3().setFromObject(object);
box.getCenter(object.position)
object.position.multiplyScalar(-1);
var pivot = new THREE.Group();
this.viewer.scene.scene.add(pivot);
pivot.add(object)
this.setPointCloudsVisible(false);
})
// })
})
}
}

Capture zoom out event in Cesium

I want to capture zoom out event as soon as user reduces the map size to an extent i have to change the Map image layer.
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;
var camera = viewer.camera;
....
camera.changed.addEventListener(function()
{
var height = Cesium.Cartographic.fromCartesian(camera.position).height;
if(height<4251907)
{
var layers = viewer.imageryLayers;
var baseLayer = layers.get(0);
layers.remove(baseLayer);
layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812, maximumLevel : 5 }));
}
console.log(height);
}.bind(camera));
Is there any way to achieve this.
Thanks

This is one of the very simple solutions.
const viewer = new Cesium.Viewer("cesiumContainer");
const camera = viewer.camera;
const scratchCartesian1 = new Cesium.Cartesian3();
const scratchCartesian2 = new Cesium.Cartesian3();
let startPos, endPos;
camera.moveStart.addEventListener(function () {
startPos = camera.positionWC.clone(scratchCartesian1);
});
camera.moveEnd.addEventListener(function () {
endPos = camera.positionWC.clone(scratchCartesian2);
const startHeight = Cesium.Cartographic.fromCartesian(startPos).height;
const endHeight = Cesium.Cartographic.fromCartesian(endPos).height;
if (startHeight > endHeight) {
console.log("zoom in");
} else {
console.log("zoom out");
}
});

Forcing tooltip position on Amcharts

In short, I would like to force tooltip to be shown always above the hovered point on line series, even if it goes outside chart area. Tooltip is joint for all series. Example can be seen here:
const {useRef, useState} = React;
const CHART_CONTAINER = 'campaign-budget-chart';
const CHART_COLORS = {
value1: '#05a8fa',
value2: '#ed3434',
value3: '#0ec76a',
}
function getRandomNumber(max){
return Math.floor(Math.random() * Math.floor(max))
}
const initialData = [{
timestamp: new Date(2020, 09, 25),
value1: 0,
value2: getRandomNumber(50),
value3: getRandomNumber(250),
},{
timestamp: new Date(2020, 09, 26),
value1: getRandomNumber(100),
value2: getRandomNumber(50),
value3: getRandomNumber(250),
},{
timestamp: new Date(2020, 09, 27),
value1: getRandomNumber(100),
value2: getRandomNumber(50),
value3: getRandomNumber(250),
},
{
timestamp: new Date(2020, 09, 28),
value1: getRandomNumber(100),
value2: getRandomNumber(50),
value3: getRandomNumber(250),
}];
let i = 0;
function BudgetChart() {
const chartRef = useRef(null);
const [data, setData] = useState(initialData);
const [cursor, setCursor] = React.useState({ x: 0, y: 0 });
const [cursorVisible, setCursorVisible] = React.useState(false);
function createSeries(
fieldX,
fieldY,
name,
lineColor,
) {
if (!chartRef.current) return;
console.log('Create series');
// Init series
let series = chartRef.current.series.push(new am4charts.LineSeries());
series.name = name;
series.dataFields.valueY = fieldY;
series.dataFields.dateX = fieldX;
series.strokeWidth = 3;
series.stroke = am4core.color(lineColor);
series.tooltip.pointerOrientation = 'down';
series.tooltip.background.filters.clear(); // remove shadow
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color('#2a2b2e');
series.tooltip.background.stroke = am4core.color('#2a2b2e');
series.tooltip.label.fontSize = 12;
series.tooltip.background.pointerLength = 0;
series.tooltip.dy = -5;
series.tooltipText = '{valueY}';
series.tensionX = 0.8;
series.showOnInit = false;
// Add bullet for optimization
let circleBullet = series.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.radius = 6;
circleBullet.circle.fill = lineColor;
circleBullet.circle.stroke = am4core.color('#fff');
circleBullet.circle.strokeWidth = 3;
circleBullet.propertyFields.disabled = 'optimizationTooltipDisabled';
// Set up tooltip
series.adapter.add("tooltipText", function(ev) {
var text = "[bold]{dateX}[/]\n"
chartRef.current.series.each(function(item) {
text += "[" + item.stroke.hex + "]●[/] " + item.name + ": {" + item.dataFields.valueY + "}\n";
});
return text;
});
// Bullet shadow
let shadow = circleBullet.filters.push(new am4core.DropShadowFilter());
shadow.opacity = 0.1;
}
React.useEffect(() => {
if (!chartRef.current) {
chartRef.current = am4core.create(CHART_CONTAINER, am4charts.XYChart);
chartRef.current.paddingLeft = 0;
// Add date axis
let dateAxis = chartRef.current.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.labels.template.fontSize = 12;
dateAxis.renderer.labels.template.fill = am4core.color(
'rgba(183,186,199,0.8)'
);
dateAxis.renderer.grid.template.strokeOpacity = 0;
// Add value axis
let valueAxis = chartRef.current.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.stroke = am4core.color(
'#f0f2fa'
);
valueAxis.renderer.grid.template.strokeOpacity = 1;
valueAxis.renderer.labels.template.fill = am4core.color(
'rgba(183,186,199,0.8)'
);
valueAxis.renderer.labels.template.fontSize = 12;
// Add cursor
chartRef.current.cursor = new am4charts.XYCursor();
chartRef.current.cursor.maxTooltipDistance = -1;
// Add legend
chartRef.current.legend = new am4charts.Legend();
chartRef.current.legend.position = 'bottom';
chartRef.current.legend.contentAlign = 'left';
chartRef.current.legend.paddingTop = 20;
// Disable axis lines
chartRef.current.cursor.lineX.disabled = true;
chartRef.current.cursor.lineY.disabled = true;
// Disable axis tooltips
dateAxis.cursorTooltipEnabled = false;
valueAxis.cursorTooltipEnabled = false;
// Disable zoom
chartRef.current.cursor.behavior = 'none';
chartRef.current.cursor.events.on('cursorpositionchanged', function(ev) {
let xAxis = ev.target.chart.xAxes.getIndex(0);
let yAxis = ev.target.chart.yAxes.getIndex(0);
setCursor({
x: xAxis.toAxisPosition(ev.target.xPosition),
y: yAxis.toAxisPosition(ev.target.yPosition),
});
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Load data into chart
React.useEffect(() => {
console.log('data ', data)
if (chartRef.current) {
chartRef.current.data = data;
Object.keys(data[0]).forEach(key => {
if(key === 'timestamp') return;
createSeries(
'timestamp',
key,
key,
CHART_COLORS[key]
);
})
}
}, [data]);
// Handle component unmounting, dispose chart
React.useEffect(() => {
return () => {
chartRef.current && chartRef.current.dispose();
};
}, []);
function handleRemoveSeries(){
setData(data.map(item => ({timestamp: item.timestamp, value1: item.value1, value2: item.value2})))
}
return (
<>
<button onClick={handleRemoveSeries}>Remove 3rd series</button>
<div
id={CHART_CONTAINER}
style={{
width: '100%',
height: '350px',
marginBottom: '50px',
}}
/>
</>
);
}
ReactDOM.render(<BudgetChart />, document.getElementById('app'));
For all values near the top of the chart, tooltip is trying to squeeze itself inside chart area. According to the docs:
IMPORTANT: in some situations, like having multiple tooltips stacked for multiple series, the "up" and "down" values might be ignored in order to make tooltip overlap algorithm work.
Is there a way to disable the tooltip overlap algorithm work?

As of version 4.10.8 (released after posting the initial question) there is a property ignoreBounds on series tooltip.
More on ignoreBounds on amchart docs

amCharts Live Data -- adding multiple series

Disclaimer: I am still learning some of the basics and I am still learning proper terminology.
I am trying to use an example of amCharts with live data and add another series into the chart. My goal is to have a single chart with two series/lines streaming data.
The basic example I am working from is here:
https://codepen.io/team/amcharts/pen/MGVbNV
I have managed to get two line series working, however its extremely clunky at the moment.
Here is where I am at:
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dark);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0;
chart.padding(0, 0, 0, 0);
chart.zoomOutButton.disabled = true;
var data = [];
var upstream = 10;
var i = 0;
for (i = 0; i <= 30; i++) {
upstream -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date().setSeconds(i - 30), Upstream: upstream });
}
var downstream = 10;
var j = 0;
for (j = 0; j <= 30; j++) {
downstream -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date().setSeconds(j - 30), value: downstream });
}
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;
dateAxis.dateFormats.setKey("second", "ss");
dateAxis.periodChangeDateFormats.setKey("second", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("minute", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("hour", "[bold]h:mm a");
dateAxis.renderer.inside = true;
dateAxis.renderer.axisFills.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.interpolationDuration = 500;
valueAxis.rangeChangeDuration = 500;
valueAxis.renderer.inside = true;
valueAxis.renderer.minLabelPosition = 0.05;
valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.ticks.template.disabled = true;
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.dateX = "date";
series1.dataFields.valueY = "Upstream";
series1.interpolationDuration = 500;
series1.defaultState.transitionDuration = 0;
series1.tensionX = 0.8;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "Downstream";
series2.interpolationDuration = 500;
series2.defaultState.transitionDuration = 0;
series2.tensionX = 0.8;
chart.events.on("datavalidated", function () {
dateAxis.zoom({ start: 1 / 15, end: 1.2 }, false, true);
});
dateAxis.interpolationDuration = 500;
dateAxis.rangeChangeDuration = 500;
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
if (interval) {
clearInterval(interval);
}
}
else {
startInterval();
}
}, false);
// add data
var interval;
function startInterval() {
interval = setInterval(function() {
upstream =
upstream + Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
var lastdataItem = series1.dataItems.getIndex(series1.dataItems.length - 1);
chart.addData(
{ date: new Date(lastdataItem.dateX.getTime() + 1000), Upstream: upstream },
1
);
downstream =
downstream + Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 1);
var lastdataItem = series2.dataItems.getIndex(series2.dataItems.length - 1);
chart.addData(
{ date: new Date(lastdataItem.dateX.getTime() + 1000), Downstream: downstream },
1
);
}, 1000);
}
startInterval();
// all the below is optional, makes some fancy effects
// gradient fill of the series
series1.fillOpacity = 1;
var gradient = new am4core.LinearGradient();
gradient.addColor(chart.colors.getIndex(0), 0.2);
gradient.addColor(chart.colors.getIndex(0), 0);
series1.fill = gradient;
// this makes date axis labels to fade out
dateAxis.renderer.labels.template.adapter.add("fillOpacity", function (fillOpacity, target) {
var dataItem = target.dataItem;
return dataItem.position;
})
// need to set this, otherwise fillOpacity is not changed and not set
dateAxis.events.on("validated", function () {
am4core.iter.each(dateAxis.renderer.labels.iterator(), function (label) {
label.fillOpacity = label.fillOpacity;
})
})
// this makes date axis labels which are at equal minutes to be rotated
dateAxis.renderer.labels.template.adapter.add("rotation", function (rotation, target) {
var dataItem = target.dataItem;
if (dataItem.date.getTime() == am4core.time.round(new Date(dataItem.date.getTime()), "minute").getTime()) {
target.verticalCenter = "middle";
target.horizontalCenter = "left";
return -90;
}
else {
target.verticalCenter = "bottom";
target.horizontalCenter = "middle";
return 0;
}
})
// bullet at the front of the line
var bullet = series1.createChild(am4charts.CircleBullet);
bullet.circle.radius = 5;
bullet.fillOpacity = 1;
bullet.fill = chart.colors.getIndex(0);
bullet.isMeasured = false;
series1.events.on("validated", function() {
bullet.moveTo(series1.dataItems.last.point);
bullet.validatePosition();
});
Any insight and help on getting this to be smoother? I think I need to do something with SetInterval() or combine functions somehow.

How to remove the red balloon from amchart graph

Hi I want to remove the red color balloon from amchart graph which is coming while mouse hovering. Can anyone help me to solve this
my code is
var clicks =document.getElementById('clicks').value;
var cam_name =document.getElementById('cam_name').value;
var views =document.getElementById('views').value;
var camp_clicks =clicks.split('~');
var camp_names =cam_name.split('~');
var camp_imprs =views.split('~');
//var camp_clicks = [1,2,3,1.5,6,3,7];
var chart;
var chartData_camp = [];
/* var camp_names=['hi','hello','hw','r','u'];
var camp_costs=[1,2,3,4,5];
var camp_imprs=[1,2,3,4,5];
var camp_clicks=[1,2,3,4,5];*/
for (var i = 0; i < camp_names.length; i++) {
chartData_camp.push({
camp_name: camp_names[i],
camp_click: camp_clicks[i]
});
}
AmCharts.ready(function () {
// generate some random data first
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = 'http://www.xxx.com/en/Images/';
chart.zoomOutButton = {
backgroundColor: '#fff',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData_camp;
chart.categoryField = 'camp_name';
//graph.balloonText = "[[balloon2]]";
chart.balloon.showBullet = false;
// listen for 'dataUpdated' event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener('dataUpdated', zoomChart);
// var cursorSettings = new AmCharts.ChartCursorSettings();
//cursorSettings.valueBalloonsEnabled = false;
// third value axis (on the left, detached)
camp_clickAxis = new AmCharts.ValueAxis();
// camp_clickAxis.offset = 50; // this line makes the axis to appear detached from plot area
camp_clickAxis.gridAlpha = 0;
camp_clickAxis.axisColor = '#3183D5';
camp_clickAxis.axisThickness = 2;
camp_clickAxis.balloonText = "";
// camp_clickAxis.lineAlpha = 2;
camp_clickAxis.lineColor = "#E5F3F9";
// camp_clickAxis.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addValueAxis(camp_clickAxis);
// GRAPHS
// third graph
var camp_clickGraph = new AmCharts.AmGraph();
camp_clickGraph.valueAxis = camp_clickAxis; // we have to indicate which value axis should be used
camp_clickGraph.type = "smoothedLine"; // this line makes the graph smoothed line.
camp_clickGraph.valueField = 'camp_click';
camp_clickGraph.title = ' ';
camp_clickGraph.bullet = 'round';
camp_clickGraph.bulletSize = 10;
camp_clickGraph.lineColor = '#058DC7';
camp_clickGraph.lineThickness = 3;
camp_clickGraph.hideBulletsCount = 30;
camp_clickGraph.fillAlphas = 0.1;
chart.addGraph(camp_clickGraph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = 'mouse';
chart.addChartCursor(chartCursor);
// SCROLLBAR
/*var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);*/
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
chart.addLegend(legend);
// WRITE
chart.write('camp_graph');
});
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart = new AmCharts.AmSerialChart();
chart.zoomToIndexes(0,30);
}

chartCursor.categoryBalloonEnabled = false;

I found the answer. Add this line for javascript chart to disable balloon
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chartCursor.enabled=false;
documentation here