#earth-container {
width: 100%;
height: 600px;
}
import React, { useEffect } from ‘react’;
import * as echarts from ‘echarts’;
import ‘echarts-gl’;
import geoCoordMap from ‘./geoCoordMap.js’;
const EarthModel = () => {
useEffect(() => {
const chartDom = document.getElementById(‘earth-container’);
const myChart = echarts.init(chartDom);
const option = {
globe: {
baseTexture: ‘/assets/earth.jpg’,
heightTexture: ‘/assets/earth-height.jpg’,
displacementScale: 0.04,
shading: ‘realistic’,
environment: ‘/assets/starfield.jpg’,
realisticMaterial: {
roughness: 1
},
postEffect: {
enable: true,
depthOfField: {
focalDistance: 10
}
},
light: {
main: {
intensity: 1,
shadow: true
},
ambientCubemap: {
texture: ‘/assets/canyon.hdr’,
exposure: 2,
diffuseIntensity: 0.5,
}
}
},
series: [{
type: ‘map’,
map: ‘world’,
name: ‘world’,
roam: true,
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
areaColor: ‘#323c48’,
borderColor: ‘#111’
},
data: []
}]
};
myChart.setOption(option);
myChart.on(‘click’, function (params) {
console.log(params.name);
});
}, []);
return (
);
};
export default EarthModel;
In the above HTML file, we have included the necessary HTML tags to create a 3D Earth model using React, Vite, JavaScript, ECharts, and Web GL.
In the “ section, we have included meta tags for character set and viewport, as well as a title for the page. We have also included a “ tag to apply some styling to the Earth container.
In the “ section, we have added a `
Inside the “ tag, we have used the `import` statement to import the required libraries and data for creating the 3D Earth model. We then define a React functional component called `EarthModel` that utilizes the `useEffect` hook to initialize the ECharts instance and set the necessary configuration options for the 3D Earth model.
Finally, we export the `EarthModel` component so that it can be used in other parts of the application.
Overall, this HTML file showcases how HTML tags can be used in conjunction with React, Vite, JavaScript, ECharts, and Web GL to create an interactive 3D Earth model for web applications.
