Digital twin city 3D map realizes dynamic loading of cool 3D model and vehicle personnel trajectory animation

esmap 2021-08-06 14:28:37 阅读数:663

本文一共[544]字,预计阅读时长:1分钟~
digital twin city map realizes

Introduction to 3D map of digital twin city

ESMap Urban 3D maps provide a variety of high-precision 、 Interesting and cool 3D models , Like architecture 、 tree 、 vehicle 、 Personnel, etc , It also supports a variety of cool animations , For example, the movement of the model 、 rotate 、 flashing 、 Glow and so on . I believe many of my friends can't wait to know how to realize these animations , Add these animations to your 3D map of the city , Now let Xiaobian show you !

3D city map initialization

Any cool animation effect is inseparable from the support of maps , Since we have already described how to initialize ESMap Three dimensional map of the city , I'm just going to go over it here . If you don't know how map initialization works , You can see this guide ESMap Urban 3D map development guide ( On ) Or go to ESMap Three dimensional map of the city SDK Developing documents .

City 3D Map 3D model creation

This paper takes the car model as an example , Explains how to create a 3D model and animate the model in a map .

  • Create a new 3D model layer ( Due to data loading 、 Problems in page rendering , Create 3D model code to be written in the map loading completion event map.on('loadComplete') after )
var floorLayer = map.getBuildingById(0).getFloor(1);
var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
  • Create a 3D model annotation instance
var url = './model/bus2/gongjiaoche.gltf';
var marker3d = new esmap.ES3DMarker({
x: x, //x coordinate
y: y, //y coordinate
id: 2018, // Customize id identification
name: "myTree", // Customize name
url: url, // The file address of the model
size: 1, // Size
angle: 0, // Rotation angle
height: 0, // Height
showLevel: 16, // Hide when the zoom level of the map reaches
spritify: false // Whether to update the size with the zoom of the map
});
  • Add a 3D model instance to the floor object
layer.addMarker(marker); // Add dimensions to layers
floor.addLayer(layer);

The final car model is shown in the figure below :

image

City 3D Map 3D model animation implementation

The model moves

  • Realization ( among marker3d Dimension an instance of the 3D model you created earlier )
marker3d.moveTo({
x: 12683603.861957192, y: 2574670.255345741
})
  • Effect display

image

Model rotation

  • Realization
marker3d.rotateTo({
angle:30 // The absolute value , angle
//time:0.6 // Jump time , Generally omit
})
  • Effect display

image

Model jump

  • Realization
marker3d.jump({
times:3, // frequency
height:8 // Height
// time:1, // Jump time , Generally omit
//delay:0 // Delay execution by a few seconds
})
  • Effect display

image

Zoom in and out of the model

  • Realization
marker3d.setScale(2);
marker3d.restoreScale();
  • Effect display

image

The model moves along the path

  • Realization
var points = [
{
x: 12683435.841512972,
y: 2557888.6579067316,
fnum: 1,
// offset:0
},
{
x: 12683433.708513774,
y: 2557872.0505466303,
fnum: 1,
// offset:0
}];
marker3d.movePath({
//time:10, // Complete the move at the specified time . And speed Choose one of two parameters
speed: 10, // Speed , If this item is set, ignore time
loop: true, // Whether to execute circularly
orientToPathDegree:0, // The angle at which an object moves along a path
path: points, // Path point set
offsetHeight: 0, // Height when moving
followPosition:true,// First person perspective , Follow the moving position
followScaleLevel:1,// First person perspective , Follow zoom map size
viewTiltAngle:map.maxPolarAngle,// First person perspective , Map pitch angle
followAngle:true, // First person perspective , Dynamically change the map angle according to the path
orientToPath:true, // Whether the object moves along the path
angle:0, // The angle at which an object moves along a path
complete: function() {
// Animation execution completion callback event
},
onMoving: function(e) {
// Path movement real-time callback
// Get the real-time location in the model movement
console.log(e)
},
});
  • Effect display

image

More detailed 3D model animation implementation , You can go to ESMap Three dimensional map of the city SDK Developing documents see .

3D model display 、 Hide and delete

  • 3D model hiding
// Hide Layers
layer.visible=false;
  • 3D model deletion
// Delete the layer by name on the floor
floorLayer.removeLayersByNames("name");
// Delete layers on floors according to type
floorLayer.removeLayersByTypes(esmap.ESLayerType.MODEL3D);

summary

The above is the use of ESMap The whole process of realizing cool 3D model animation in urban 3D map , Want to experience more ESMap The function of city 3D map , Welcome to ESMap Online development .

版权声明:本文为[esmap]所创,转载请带上原文链接,感谢。 https://car.inotgo.com/2021/08/20210806142626506L.html