Change symbolLayer in place without having to recreate it

178
0
03-15-2023 04:11 PM
JPichel
New Contributor II

Hi, I am building an application where I need to update my 3D model of a drone several times per second. For the drone model I add a Graphic to a GraphicsLayer with a PointSymbol3D having a ObjectSymbol3DLayer that has the drone model. The code for creating this graphic is this:

 

const point = new Point({
spatialReference: SPATIAL_REFERENCE,
latitude: telemetry.latitude,
longitude: telemetry.longitude,
hasZ: true,
z: telemetry.relativeAltitude,
})

const symbolLayer = new ObjectSymbol3DLayer({
height: 1,
anchor: 'relative',
anchorPosition: {
x: 0,
y: 0,
z: -0.2,
},
resource: {
href: './drone3D.glb'
},
heading: telemetry.heading + 180,
tilt: telemetry.pitch,
roll: telemetry.roll,
})

const symbol = new PointSymbol3D({
symbolLayers: [
symbolLayer
]
})

droneModel = new Graphic({
geometry: point,
symbol,
})

droneModelLayer.add(droneModel)
focusDrone()

Since I need to do this kind of operation several times per second, I don't want to make a new ObjectSymbol3DLayer everytime, but I would rather like modifying its properties in-place. More exactly I just need to modify the tilt, heading and roll of the ObjectSymbol3DLayer. I've tried many ways to do this, but can't make it work:

 

const symbolLayer = ((droneModel.symbol as PointSymbol3D).get('symbolLayers') as any)[0]
symbolLayer.set({
heading: telemetry.heading + 180,
tilt: telemetry.pitch,
roll: telemetry.roll
})

0 Kudos
0 Replies