Select to view content in your preferred language

# 3D intersection of 2 objects

681
4
01-10-2022 03:08 AM
New Contributor III

Hi Developers,

I am working on 3D data in ArcGIS API for JavaScript, I have to perform intersection of 2 objects as height of bus with underpass. as the height of bus or any vehical increases at certain height it will be not allowed to go through that, for this purpose i need to perform intersection.

Thank You

4 Replies
Esri Contributor

Hi

You could use view.hitTest and calculate from the result the difference.
Check also the sample SceneView - hitTest .
Which kind of 3D data are you using?

Let me know if this helps?

New Contributor III

I need your precious help in applying hit test between these two objects. one is tree another is Electric line. can you help me in this.

the code is given below

<html>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>
Generate univariate continuous size and color visualization in 3D | Sample
| ArcGIS API for JavaScript 4.22
</title>

rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>

<style>
html,
body,
#viewDiv {
margin: 0;
height: 100%;
width: 100%;
}

#containerDiv {
background-color: white;
text-align: center
}
#slider {
background-color: white;
width: 20px;

}

#title {
font-size: 14pt;
}
</style>

<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/smartMapping/renderers/univariateColorSize",
"esri/smartMapping/statistics/histogram",
"esri/widgets/smartMapping/ColorSizeSlider",
"esri/symbols/PathSymbol3DLayer",
"esri/smartMapping/renderers/color"
], (
WebScene,
SceneView,
FeatureLayer,
colorAndSizeRendererCreator,
histogram,
ColorSizeSlider,
PathSymbol3DLayer,
color
) => {
const map = new WebScene({
portalItem: {
id: "cee32f0d1548477c83323e9476d11903"
}
});

// The minSize and maxSize of volumetric symbols are determined
// based on the view/camera the data will be displayed in.

const view = new SceneView({
container: "viewDiv",
map: map
});

// Create FeatureLayer instance with popupTemplate

const layer = new FeatureLayer({
url: "https://services8.arcgis.com/Dxp0iiM83fijnVoI/ArcGIS/rest/services/Tree_TH/FeatureServer/0",
visible: true,
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{CITY_NAME}, {CNTRY_NAME}",
content: "Height: {Z}",
fieldInfos: [
{
fieldName: "Z",

format: {
digitSeparator: false,
places: 0
}
}
]
}
});

const symbol = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "REGION",
defaultSymbol: {
type: "line-3d",
field: "arcid",
// autocasts as new LineSymbol3D()
symbolLayers: [{
type: "path", // autocasts as new PathSymbol3DLayer()
profile: "circle",
width: 0.05, // width of the tube in meters
material: { color: [ 0,0,0 ] }
}]}
};

const ETLINE = new FeatureLayer({
url: "https://services8.arcgis.com/Dxp0iiM83fijnVoI/arcgis/rest/services/ETLine/FeatureServer",
renderer: symbol,
outFields: ["*"],
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{Cmn_Name}",
content:
"<i>{Sci_Name}</i><br>" +
"This tree is in {Condition} condition and is {Height} Meter in height."
}
})

// configure parameters for the renderer generator.
// the layer must be specified along with a field name
// or arcade expression. The view and other properties determine
// the appropriate default color and size schemes.

const params = {
layer: layer,
field: "Z",
valueUnit: "meter",
view: view,
minValue: 0,
maxValue: 47,
symbolType: "3d-volumetric-uniform",

};

// Generate a renderer visualizing a single variable
// with continuous color and size based on the
// statistics of the data in the provided layer
// and field name.
//
// This resolves to an object containing several helpful
// properties, including size/color schemes, statistics,
// the renderer, and visual variables
let rendererResult = null;

view.when().then(() => {
colorAndSizeRendererCreator
.createContinuousRenderer(params)
.then((response) => {
// set generated renderer on the layer and add it to the map
rendererResult = response;
response.renderer.classBreakInfos[0].symbol = {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Acer",
valueUnit: "meter"
},
layer.renderer = response.renderer;
if (!layer.visible) {
layer.visible = true;
}

// generate a histogram for use in the slider. Input the layer
// and field name to generate it.
// a field and normalization field

return histogram({
layer: layer,
field: params.field,
numBins: 100,
minValue: params.minValue,
maxValue: params.maxValue
});
})
.then((histogramResult) => {
const slider = ColorSizeSlider.fromRendererResult(
rendererResult,
histogramResult,
);
slider.container = "slider";
slider.viewModel.precision = 100;
slider.labelFormatFunction = (value) => {
return parseInt(value.toFixed(0)).toLocaleString();
};
slider.histogramConfig.standardDeviation = null;

// when the user slides the handle(s), update the renderer
// with the updated color and size visual variable objects

function changeEventHandler() {
const renderer = layer.renderer.clone();
renderer.visualVariables = slider.updateVisualVariables(
renderer.visualVariables
);
layer.renderer = renderer;
}
///////////////////////////hit test///////////////////////////////////////
/* view
.hitTest(event, { exclude: [view.graphics] })
.then((hitTestResult) => {
// print the information to the panel
hitresultground.textContent = `\${Math.round(
hitTestResult.ground.distance
)} m`;
hitresultcount.textContent = hitTestResult.results.length;

let lastHit = null;
if (hitTestResult.results.length > 0) {
lastHit =
hitTestResult.results[hitTestResult.results.length - 1];
// create point graphic for each hit on objects
hitTestResult.results.forEach((result, index) => {
const hitObject = new Graphic({
geometry: result.mapPoint,
symbol:
index === 0 ? ETLINE : layer
});
///////////////////////////////////////////////////////////////////////////////////////////

slider.on( ["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);

})
.catch(console.error);
});
});
</script>

<body>
<div id="viewDiv"></div>
<div id="containerDiv">
<span id="title" class="esri-widget">Tree Height</span>
<div id="slider"></div>
</div>
</body>
</html>

New Contributor

Thanks   it is really helpful. I will inform You once it will work in my application

Esri Contributor

Hi, @pragati224

We don't currently support object intersections in 3D, I'm afraid. But if the power cables are line features, you can try out the Elevation Profile Widget and input these cables as Elevation Profile Lines. The widget then draws a section along this line, highlighting any intersections with objects in the view (e.g. the trees).