Dimension is a magical thing, from two-dimensional and three-dimensional to four-dimensional and five-dimensional, everyone has different understanding of them. We know that two-dimensional is point, line and plane in the simplest sense, while three-dimensional gives it more three-dimensional and dynamic factors.
A two-dimensional surface can be in a three-dimensional space, it doesn’t have to be a plane, as long as the coordinates of the points in the surface need exactly two components to be completely described. As for the distorted shape, position and orientation of the surface in the three-dimensional space, this is the external information of the two-dimensional space. As long as the topology remains unchanged, the creatures in the two-dimensional space cannot sense the distortion, position and orientation.
Making a 3D visualization application is not easy, so be prepared as a front-end developer. A good development software is essential. ThingJS is a BS architecture, based on HTML5 and WebGL technology, and requires only basic Javascript development experience. Easy to browse and debug on mainstream browsers, PC and mobile devices. ThingJS offers simple, rich functionality for visualization applications.
Take a look at the development process:
/ * *
* Note: Reference JS and CSS resources
* Default JS scripts and CSS styles are time-stamped and loaded in the order in the urls array
* See the tutorial for more information about referencing JS and CSS resources
* Twitter – Bootstrap, moment are external resources copied from the ThingJS directory for Internet reasons
* Tutorials: ThingJS Tutorials — > Online Development — > References TO JS and CSS
* Difficulty: ★★☆☆
* /
THING.Utils.dynamicLoad([
‘/ static/vendor/twitter – the bootstrap 3.3.7 / CSS/bootstrap. Min. CSS’,
‘/ static/vendor/twitter – the bootstrap 3.3.7 / js/bootstrap. Min. Js’,
‘/static/vendor/moment/moment.js’],
function () {
/ / create the App
var app = new THING.App({
url: ‘https://www.thingjs.com/static/models/storehouse’
});
// Execute after loading the scenario
app.on(‘load’, function (ev) {
var btn = createButton();
btn.on(‘click’, function () {
// Use the moment library to get the current time
var now = moment().format(‘YYYY-MM-DD HH:mm:ss’);
console.log(now);
})
});
})
function createButton() {
// Use the bootstrap style
var template =
`<button class=”btn btn-default” type=”button” style=”position:absolute; left:20px; top:20px; Z-index :2″> </button id > ‘;
var btn = $(‘#div2d’).append($(template));
return btn;
}
/ * *
* Description: This example shows how to create a simple earth
* /
var app = new THING.App();
// Set the app background to black
app.background = [0, 0, 0];
// Reference the map component script
THING.Utils.dynamicLoad([‘https://www.thingjs.com/uearth/uearth.min.js’], function () {
// Create an earth
var map = app.create({
type: ‘Map’,
Atmosphere: true, // Show/hide the atmosphere by default
style: {
Night: true, // Day/night effect is enabled by default
Fog: false // Turn on/off Fog effect is turned off by default
},
Attribution: ‘Google’// Copyright information for the map in the bottom right corner
});
// Create a tile layer
var tileLayer = app.create({
type: ‘TileLayer’,
name: ’tileLayer1′,
url: ‘https://mt0.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}’
});
// Add a tile map layer to earth
map.addLayer(tileLayer);
// Map registration click event
map.on(‘click’, function (ev) {
console.clear();
// Get the latitude and longitude of the mouse click
var lonlat = ev.coordinates;
console.log(lonlat);
// Convert latitude and longitude coordinates to 3d coordinates, with the second parameter representing the altitude from the ground
var worldPos = CMAP.Util.convertLonlatToWorld(lonlat, 0)
console.log(worldPos);
// Calculate the rotation information of the object on the Earth according to latitude and longitude and azimuth. The second parameter is azimuth default 0
var angles = CMAP.Util.getAnglesFromLonlat(lonlat, 0);
console.log(angles);
})
});