├── .gitignore
├── images
├── 框1.png
├── 框2.png
├── 框3.png
├── image.png
├── line.png
├── 天气1.png
├── 导航栏.png
├── 时间2.png
├── 框21.png
├── 状态栏.png
├── 登录3.png
├── 竖线0.png
├── 背景图.png
├── 退出4.png
├── header_bg.png
├── 图层 690 拷贝 6.png
└── 智慧农业数据可视化____.png
├── draco
├── draco_decoder.wasm
└── draco_wasm_wrapper.js
├── font
└── DingTalkJinBuTi.woff2
├── models
└── LittlestTokyo.glb
├── package.json
├── README.md
├── css
├── tittle.css
├── navigation.css
├── model.css
└── style.css
├── js
├── chart4.js
├── chart1.js
├── chart2.js
├── chart5.js
├── chart3.js
└── chart6.js
├── index.html
├── style.css
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/images/框1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/框1.png
--------------------------------------------------------------------------------
/images/框2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/框2.png
--------------------------------------------------------------------------------
/images/框3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/框3.png
--------------------------------------------------------------------------------
/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/image.png
--------------------------------------------------------------------------------
/images/line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/line.png
--------------------------------------------------------------------------------
/images/天气1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/天气1.png
--------------------------------------------------------------------------------
/images/导航栏.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/导航栏.png
--------------------------------------------------------------------------------
/images/时间2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/时间2.png
--------------------------------------------------------------------------------
/images/框21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/框21.png
--------------------------------------------------------------------------------
/images/状态栏.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/状态栏.png
--------------------------------------------------------------------------------
/images/登录3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/登录3.png
--------------------------------------------------------------------------------
/images/竖线0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/竖线0.png
--------------------------------------------------------------------------------
/images/背景图.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/背景图.png
--------------------------------------------------------------------------------
/images/退出4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/退出4.png
--------------------------------------------------------------------------------
/images/header_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/header_bg.png
--------------------------------------------------------------------------------
/images/图层 690 拷贝 6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/图层 690 拷贝 6.png
--------------------------------------------------------------------------------
/draco/draco_decoder.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/draco/draco_decoder.wasm
--------------------------------------------------------------------------------
/font/DingTalkJinBuTi.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/font/DingTalkJinBuTi.woff2
--------------------------------------------------------------------------------
/images/智慧农业数据可视化____.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/images/智慧农业数据可视化____.png
--------------------------------------------------------------------------------
/models/LittlestTokyo.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunfishlk/Smart-Agriculture-and-Digital-Twins-demo/HEAD/models/LittlestTokyo.glb
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "three": "^0.160.0"
4 | },
5 | "devDependencies": {
6 | "vite": "^5.0.12"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### Setup
2 |
3 | ```
4 | git clone git@github.com:sunfishlk/Smart-Agriculture-and-Digital-Twins-demo.git
5 | ```
6 |
7 | ```
8 | cd Smart-Agriculture-and-Digital-Twins-demo
9 | ```
10 |
11 | ```
12 | npm install
13 | ```
14 |
15 | ```
16 | npx vite
17 | ```
18 |
19 | ### 技术栈
20 |
21 | 使用`three.js`和`echarts.js`制作,模型为[ThreeJS官网首页](https://threejs.org)导入的[LittlestTokyo.glb](https://threejs.org/examples/#webgl_animation_keyframes)模型
22 |
23 |
--------------------------------------------------------------------------------
/css/tittle.css:
--------------------------------------------------------------------------------
1 | .tittle1 {
2 | height: 2.375rem;
3 | width: 10rem;
4 | margin-top: 0px;
5 | }
6 |
7 | .line {
8 | width: 9.5rem;
9 | height: 0.1875rem;
10 | background-image: url('../images/line.png');
11 | }
12 |
13 | .tittle2 {
14 | height: 2.375rem;
15 | width: 10rem;
16 | padding: 1.25rem 0px 0px 1.25rem;
17 |
18 | }
19 |
20 | .common-span {
21 | font-size: 1.375rem;
22 | color: aliceblue;
23 | font-weight: 1000;
24 | letter-spacing: 0.375rem;
25 | outline: none;
26 | /* 定义一个自定义属性 --c,可以通过 var 函数对其调用 */
27 | --c: rgb(51,204,255,0.7);
28 | /* 使用自定义属性 --c 设置文字阴影(产生发光效果) */
29 | text-shadow: 0 0 10px var(--c),
30 | 0 0 20px var(--c),
31 | 0 0 40px var(--c),
32 | 0 0 80px var(--c),
33 | 0 0 160px var(--c);
34 |
35 | }
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/css/navigation.css:
--------------------------------------------------------------------------------
1 | .navigation {
2 | margin: 0;
3 | width: 100%;
4 | height: 9.5rem;
5 | background-image: url('../images/导航栏.png');
6 | background-size: cover;
7 | text-align: center;
8 | position: relative;
9 | /* 添加相对定位 */
10 | }
11 |
12 | .navigation span {
13 | position: absolute;
14 | /* 绝对定位 */
15 | top: 1.25rem;
16 | /* 距离顶部20px */
17 | left: 50%;
18 | /* 水平居中 */
19 | transform: translateX(-50%);
20 | /* 水平居中 */
21 | color: rgb(36, 200, 255);
22 | font-size: 2.875rem;
23 | font-weight: 700;
24 | letter-spacing: 0.125rem;
25 | /* 取消文字轮廓 */
26 | outline: none;
27 | /* 执行动画:动画名为glowing,时长为2秒,无限次播放 */
28 | animation: glowing 1.2s infinite;
29 | }
30 |
31 | /* 定义发光动画 */
32 | @keyframes glowing {
33 | 0% {
34 | text-shadow: 0 0 10px rgb(115, 220, 255);
35 | }
36 |
37 | 25% {
38 | text-shadow: 0 0 20px rgb(115, 220, 255);
39 | }
40 |
41 | 50% {
42 | text-shadow: 0 0 30px rgb(115, 220, 255);
43 | }
44 |
45 | 75% {
46 | text-shadow: 0 0 20px rgb(115, 220, 255);
47 | }
48 |
49 | 100% {
50 | text-shadow: 0 0 10px rgb(115, 220, 255);
51 | }
52 |
53 | }
--------------------------------------------------------------------------------
/js/chart4.js:
--------------------------------------------------------------------------------
1 | var myChart = echarts.init(document.getElementById('right1'));
2 |
3 | var option = {
4 | tooltip: {
5 | trigger: 'item'
6 | },
7 | legend: {
8 | orient: 'vertical', // 设置图例垂直显示
9 | right: '6%', // 调整图例位置到右侧
10 | top: 'center', // 垂直居中
11 | textStyle: {
12 | color: 'white' // 设置图例文本颜色为白色
13 | }
14 | },
15 |
16 | series: [
17 | {
18 | name: 'Access From',
19 | type: 'pie',
20 | radius: ['40%', '80%'],
21 | center: ['40%', '47%'],
22 | avoidLabelOverlap: false,
23 | label: {
24 | show: false,
25 | position: 'center'
26 | },
27 | emphasis: {
28 | label: {
29 | show: true,
30 | fontSize: 30,
31 | fontWeight: 'bold',
32 | color: 'white' // 设置强调标签的颜色为白色
33 | }
34 | },
35 | labelLine: {
36 | show: false
37 | },
38 | data: [
39 | { value: 1048, name: '小麦' },
40 | { value: 735, name: '大豆' },
41 | { value: 580, name: '水稻' },
42 | { value: 484, name: '苹果' },
43 | { value: 300, name: '杂草' }
44 | ]
45 | }
46 | ],
47 | textStyle: {
48 | color: 'white' // 设置所有文本的颜色为白色
49 | }
50 | };
51 |
52 | option && myChart.setOption(option);
53 | myChart.resize({
54 | width: 350,
55 | height: 200
56 | })
--------------------------------------------------------------------------------
/js/chart1.js:
--------------------------------------------------------------------------------
1 |
2 | // 基于准备好的dom,初始化echarts实例
3 | // var myChart = echarts.init(document.querySelector('.middleB'));
4 | var myChart = echarts.init(document.getElementById('left1'));
5 | // 指定图表的配置项和数据
6 | var option = {
7 | tooltip: {
8 | trigger: 'axis',
9 | axisPointer: {
10 | type: 'cross',
11 | label: {
12 | backgroundColor: '#0098c9',//坐标抽上面图形颜色
13 | borderRadius: 5
14 | }
15 | }
16 | },
17 | grid: {
18 | left: '10%',
19 | bottom: '10%',
20 | top: '8%'
21 | },
22 | xAxis: {
23 | type: 'category',
24 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
25 | axisLabel: {
26 | color: 'white' // 设置x轴文本颜色为白色
27 | }
28 | },
29 | yAxis: {
30 | type: 'value',
31 | axisLabel: {
32 | color: 'white' // 设置x轴文本颜色为白色
33 | }
34 | },
35 | series: [
36 | {
37 | type: 'bar',
38 | data: [120, 200, 150, 80, 70, 110, 130],
39 | itemStyle: {
40 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
41 | { offset: 0, color: 'rgb(76,240,249,0.9)' }, // 0% 处的颜色
42 | { offset: 1, color: 'rgb(0,151,200,0.9)' } // 100% 处的颜色,这里改为使用第一个渐变色
43 | ])
44 | }
45 | }
46 | ]
47 | };
48 |
49 |
50 | // 使用刚指定的配置项和数据显示图表。
51 | myChart.setOption(option);
52 | myChart.resize({
53 | width: 350,
54 | height: 200
55 | })
--------------------------------------------------------------------------------
/js/chart2.js:
--------------------------------------------------------------------------------
1 | // var myChart = echarts.init(document.querySelector('.middleB'));
2 | var myChart = echarts.init(document.getElementById('left2'));
3 | // 指定图表的配置项和数据
4 | var option = {
5 | tooltip: {
6 | trigger: 'axis',
7 | axisPointer: {
8 | type: 'cross',
9 | label: {
10 | backgroundColor: '#0098c9',
11 | borderRadius: 5
12 | }
13 | }
14 | },
15 | grid: {
16 | left: '10%',
17 | bottom: '10%',
18 | top: '8%'
19 | },
20 | yAxis: { // 将原先的xAxis改成yAxis
21 | type: 'category', // 将原先的type改成category
22 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
23 | axisLabel: {
24 | color: 'white'
25 | }
26 | },
27 | xAxis: { // 将原先的yAxis改成xAxis
28 | type: 'value', // 将原先的type改成value
29 | axisLabel: {
30 | color: 'white'
31 | }
32 | },
33 | series: [
34 | {
35 | type: 'bar', // 将原先的type改成bar
36 | data: [120, 200, 150, 80, 70, 110, 130],
37 | itemStyle: {
38 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
39 | { offset: 0, color: 'rgb(25,111,254,0.9)' }, // 0% 处的颜色
40 | { offset: 1, color: 'rgb(14,28,88,0.9)' } // 100% 处的颜色,这里改为使用第一个渐变色
41 | ])
42 | }
43 | }
44 | ]
45 | };
46 |
47 |
48 |
49 | // 使用刚指定的配置项和数据显示图表。
50 | myChart.setOption(option);
51 | myChart.resize({
52 | width: 350,
53 | height: 200
54 | })
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
p;)--l in this?this[--k]=this[l]:delete this[--k];return this}},"es6","es3");
20 | $jscomp.typedArrayCopyWithin=function(h){return h?h:Array.prototype.copyWithin};$jscomp.polyfill("Int8Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint8Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint8ClampedArray.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Int16Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");
21 | $jscomp.polyfill("Uint16Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Int32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Uint32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Float32Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");$jscomp.polyfill("Float64Array.prototype.copyWithin",$jscomp.typedArrayCopyWithin,"es6","es5");
22 | var DracoDecoderModule=function(){var h="undefined"!==typeof document&&document.currentScript?document.currentScript.src:void 0;"undefined"!==typeof __filename&&(h=h||__filename);return function(n){function k(e){return a.locateFile?a.locateFile(e,U):U+e}function p(e,b){if(e){var c=ia;var d=e+b;for(b=e;c[b]&&!(b>=d);)++b;if(16