+
diff --git a/package-lock.json b/package-lock.json
index c51885a..a0b2246 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,65 @@
"name": "hist-leaves",
"version": "1.0.0",
"dependencies": {
+ "cesium": "^1.145.0",
"three": "^0.170.0"
},
"devDependencies": {
"pngjs": "^7.0.0",
"puppeteer-core": "^25.11.0",
- "vite": "^6.0.0"
+ "vite": "^6.0.0",
+ "vite-plugin-cesium": "^1.2.23"
+ }
+ },
+ "node_modules/@cesium/engine": {
+ "version": "26.3.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@cesium/engine/-/engine-26.3.0.tgz",
+ "integrity": "sha512-jtgOewm/IZoypmqpbeTlYhMOKhQg+XPwUXoYat84vhIU8l8SfVSEat4Lc/Y4Fb7ypi3z1YmElKjVYvoI5CH6Pw==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@cesium/wasm-splats": "^0.1.0-alpha.2",
+ "@spz-loader/core": "0.3.1",
+ "@tweenjs/tween.js": "^25.0.0",
+ "@zip.js/zip.js": "^2.9.0",
+ "autolinker": "^4.0.0",
+ "bitmap-sdf": "^1.0.3",
+ "dompurify": "^3.4.14",
+ "draco3d": "^1.5.1",
+ "earcut": "3.0.2",
+ "grapheme-splitter": "^1.0.4",
+ "jsep": "^1.3.8",
+ "kdbush": "^4.1.0",
+ "ktx-parse": "^1.0.0",
+ "lerc": "^2.0.0",
+ "mersenne-twister": "^1.1.0",
+ "meshoptimizer": "^1.2.0",
+ "pako": "^3.0.0",
+ "protobufjs": "^8.8.0",
+ "rbush": "^4.0.1",
+ "topojson-client": "^3.1.0",
+ "urijs": "^1.19.7"
+ },
+ "engines": {
+ "node": ">=22.0.0"
+ }
+ },
+ "node_modules/@cesium/wasm-splats": {
+ "version": "0.1.0-alpha.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@cesium/wasm-splats/-/wasm-splats-0.1.0-alpha.2.tgz",
+ "integrity": "sha512-t9pMkknv31hhIbLpMa8yPvmqfpvs5UkUjgqlQv9SeO8VerCXOYnyP8/486BDaFrztM0A7FMbRjsXtNeKvqQghA==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/@cesium/widgets": {
+ "version": "16.2.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@cesium/widgets/-/widgets-16.2.0.tgz",
+ "integrity": "sha512-cxYw8t4GVJUVSNCN+yDXqB7MqxLme1mGWT4W3pYQXrlswdIBey9Q+rf5cVZysd0PUGcrLXFtNRfbScOqQe78BQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@cesium/engine": "^26.3.0",
+ "nosleep.js": "^0.12.0"
+ },
+ "engines": {
+ "node": ">=22.0.0"
}
},
"node_modules/@esbuild/aix-ppc64": {
@@ -507,6 +560,33 @@
}
}
},
+ "node_modules/@rollup/pluginutils": {
+ "version": "4.2.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+ "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "estree-walker": "^2.0.1",
+ "picomatch": "^2.2.2"
+ },
+ "engines": {
+ "node": ">= 8.0.0"
+ }
+ },
+ "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+ "version": "2.3.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/picomatch/-/picomatch-2.3.2.tgz",
+ "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=8.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.63.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.3.tgz",
@@ -896,6 +976,22 @@
"win32"
]
},
+ "node_modules/@spz-loader/core": {
+ "version": "0.3.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@spz-loader/core/-/core-0.3.1.tgz",
+ "integrity": "sha512-8qJ1WIBXaJu8HjnJAjYniE0kYcr0kCe5Hp7kDzYiGVvvd7zyrOBwbF5imoW5mvwx1Qba0hxGEK5R9jEoaHKJFA==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=16",
+ "pnpm": ">=8"
+ }
+ },
+ "node_modules/@tweenjs/tween.js": {
+ "version": "25.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@tweenjs/tween.js/-/tween.js-25.0.0.tgz",
+ "integrity": "sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==",
+ "license": "MIT"
+ },
"node_modules/@types/estree": {
"version": "1.0.9",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/estree/-/estree-1.0.9.tgz",
@@ -903,6 +999,24 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/@types/trusted-types": {
+ "version": "2.0.7",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+ "license": "MIT",
+ "optional": true
+ },
+ "node_modules/@zip.js/zip.js": {
+ "version": "2.15.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/@zip.js/zip.js/-/zip.js-2.15.0.tgz",
+ "integrity": "sha512-hYAuHAaWjt0axbofaDL5XUlmrQPsBDcK3f45ApZuh6N+8UGVk26GoGdtGDvcvzahsHytTQ6DtBVXwG9IcCMjjQ==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "bun": ">=0.7.0",
+ "deno": ">=1.0.0",
+ "node": ">=18.0.0"
+ }
+ },
"node_modules/ansi-regex": {
"version": "6.3.0",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/ansi-regex/-/ansi-regex-6.3.0.tgz",
@@ -929,6 +1043,53 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
+ "node_modules/at-least-node": {
+ "version": "1.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/at-least-node/-/at-least-node-1.0.0.tgz",
+ "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+ "dev": true,
+ "license": "ISC",
+ "engines": {
+ "node": ">= 4.0.0"
+ }
+ },
+ "node_modules/autolinker": {
+ "version": "4.1.5",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/autolinker/-/autolinker-4.1.5.tgz",
+ "integrity": "sha512-vEfYZPmvVOIuE567XBVCsx8SBgOYtjB2+S1iAaJ+HgH+DNjAcrHem2hmAeC9yaNGWayicv4yR+9UaJlkF3pvtw==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.8.1"
+ },
+ "engines": {
+ "pnpm": ">=10.10.0"
+ }
+ },
+ "node_modules/bitmap-sdf": {
+ "version": "1.0.4",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/bitmap-sdf/-/bitmap-sdf-1.0.4.tgz",
+ "integrity": "sha512-1G3U4n5JE6RAiALMxu0p1XmeZkTeCwGKykzsLTCqVzfSDaN6S7fKnkIkfejogz+iwqBWc0UYAIKnKHNN7pSfDg==",
+ "license": "MIT"
+ },
+ "node_modules/cesium": {
+ "version": "1.145.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/cesium/-/cesium-1.145.0.tgz",
+ "integrity": "sha512-6Azix8b5LPpoVSx8XQ6zPztpluJVmq+CEO3W2rOWxtc6bri6Nc9MvCYhKmTW1LAEwfisV7yzNgfulCXw9842+g==",
+ "license": "Apache-2.0",
+ "workspaces": [
+ "packages/engine",
+ "packages/widgets",
+ "packages/sandcastle"
+ ],
+ "dependencies": {
+ "@cesium/engine": "^26.3.0",
+ "@cesium/widgets": "^16.2.0",
+ "protobufjs": "^8.8.0"
+ },
+ "engines": {
+ "node": ">=22.0.0"
+ }
+ },
"node_modules/chromium-bidi": {
"version": "17.0.2",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/chromium-bidi/-/chromium-bidi-17.0.2.tgz",
@@ -979,6 +1140,50 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/commander": {
+ "version": "2.20.3",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/commander/-/commander-2.20.3.tgz",
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+ "license": "MIT"
+ },
+ "node_modules/debug": {
+ "version": "2.6.9",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "ms": "2.0.0"
+ }
+ },
+ "node_modules/debug/node_modules/ms": {
+ "version": "2.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/depd": {
+ "version": "2.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/depd/-/depd-2.0.0.tgz",
+ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/destroy": {
+ "version": "1.2.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/destroy/-/destroy-1.2.0.tgz",
+ "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8",
+ "npm": "1.2.8000 || >= 1.4.16"
+ }
+ },
"node_modules/devtools-protocol": {
"version": "0.0.1680125",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/devtools-protocol/-/devtools-protocol-0.0.1680125.tgz",
@@ -986,6 +1191,34 @@
"dev": true,
"license": "BSD-3-Clause"
},
+ "node_modules/dompurify": {
+ "version": "3.4.15",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/dompurify/-/dompurify-3.4.15.tgz",
+ "integrity": "sha512-EUBjM+B+lkDE41iE82DDSCfkoPGfXx8IxFxPMjNzm/Uk4xDet77rTN9wqlxlVg71kK7XGuUMv6wUxJUwwv+Xyw==",
+ "license": "(MPL-2.0 OR Apache-2.0)",
+ "optionalDependencies": {
+ "@types/trusted-types": "^2.0.7"
+ }
+ },
+ "node_modules/draco3d": {
+ "version": "1.5.7",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/draco3d/-/draco3d-1.5.7.tgz",
+ "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/earcut": {
+ "version": "3.0.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/earcut/-/earcut-3.0.2.tgz",
+ "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
+ "license": "ISC"
+ },
+ "node_modules/ee-first": {
+ "version": "1.1.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/ee-first/-/ee-first-1.1.1.tgz",
+ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/emoji-regex": {
"version": "10.6.0",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -993,6 +1226,16 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/encodeurl": {
+ "version": "2.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/encodeurl/-/encodeurl-2.0.0.tgz",
+ "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/esbuild": {
"version": "0.25.12",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/esbuild/-/esbuild-0.25.12.tgz",
@@ -1045,6 +1288,30 @@
"node": ">=6"
}
},
+ "node_modules/escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/estree-walker": {
+ "version": "2.0.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/estree-walker/-/estree-walker-2.0.2.tgz",
+ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/etag": {
+ "version": "1.8.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/etag/-/etag-1.8.1.tgz",
+ "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/fdir": {
"version": "6.5.0",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/fdir/-/fdir-6.5.0.tgz",
@@ -1063,6 +1330,32 @@
}
}
},
+ "node_modules/fresh": {
+ "version": "0.5.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/fresh/-/fresh-0.5.2.tgz",
+ "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/fs-extra": {
+ "version": "9.1.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/fs-extra/-/fs-extra-9.1.0.tgz",
+ "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "at-least-node": "^1.0.0",
+ "graceful-fs": "^4.2.0",
+ "jsonfile": "^6.0.1",
+ "universalify": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/fsevents/-/fsevents-2.3.3.tgz",
@@ -1101,6 +1394,138 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/graceful-fs": {
+ "version": "4.2.11",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/graceful-fs/-/graceful-fs-4.2.11.tgz",
+ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+ "dev": true,
+ "license": "ISC"
+ },
+ "node_modules/grapheme-splitter": {
+ "version": "1.0.4",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+ "license": "MIT"
+ },
+ "node_modules/http-errors": {
+ "version": "2.0.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/http-errors/-/http-errors-2.0.1.tgz",
+ "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "depd": "~2.0.0",
+ "inherits": "~2.0.4",
+ "setprototypeof": "~1.2.0",
+ "statuses": "~2.0.2",
+ "toidentifier": "~1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+ "dev": true,
+ "license": "ISC"
+ },
+ "node_modules/is-reference": {
+ "version": "1.2.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/is-reference/-/is-reference-1.2.1.tgz",
+ "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/estree": "*"
+ }
+ },
+ "node_modules/jsep": {
+ "version": "1.4.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/jsep/-/jsep-1.4.0.tgz",
+ "integrity": "sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 10.16.0"
+ }
+ },
+ "node_modules/jsonfile": {
+ "version": "6.2.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/jsonfile/-/jsonfile-6.2.1.tgz",
+ "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "universalify": "^2.0.0"
+ },
+ "optionalDependencies": {
+ "graceful-fs": "^4.1.6"
+ }
+ },
+ "node_modules/kdbush": {
+ "version": "4.1.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/kdbush/-/kdbush-4.1.0.tgz",
+ "integrity": "sha512-e9vurzrXJQrFX6ckpHP3bvj5l+9CnYzkxDNnNQ1h2QTqdWsUAJgXiKdGNcOa1EY85dU8KbQ+z/FdQdB7P+9yfQ==",
+ "license": "ISC"
+ },
+ "node_modules/ktx-parse": {
+ "version": "1.1.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/ktx-parse/-/ktx-parse-1.1.0.tgz",
+ "integrity": "sha512-mKp3y+FaYgR7mXWAbyyzpa/r1zDWeaunH+INJO4fou3hb45XuNSwar+7llrRyvpMWafxSIi99RNFJ05MHedaJQ==",
+ "license": "MIT"
+ },
+ "node_modules/lerc": {
+ "version": "2.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/lerc/-/lerc-2.0.0.tgz",
+ "integrity": "sha512-7qo1Mq8ZNmaR4USHHm615nEW2lPeeWJ3bTyoqFbd35DLx0LUH7C6ptt5FDCTAlbIzs3+WKrk5SkJvw8AFDE2hg==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/long": {
+ "version": "5.3.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/long/-/long-5.3.2.tgz",
+ "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/magic-string": {
+ "version": "0.25.9",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/magic-string/-/magic-string-0.25.9.tgz",
+ "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "sourcemap-codec": "^1.4.8"
+ }
+ },
+ "node_modules/mersenne-twister": {
+ "version": "1.1.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/mersenne-twister/-/mersenne-twister-1.1.0.tgz",
+ "integrity": "sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA==",
+ "license": "MIT"
+ },
+ "node_modules/meshoptimizer": {
+ "version": "1.2.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/meshoptimizer/-/meshoptimizer-1.2.0.tgz",
+ "integrity": "sha512-davRZeIJbxJrE24cwQle7ZDsxjdk/OphNOV83oX+efQinyoHY9Jcyz3MHbaoG0qySZajldGztNZ1RN/T19PZsg==",
+ "license": "MIT"
+ },
+ "node_modules/mime": {
+ "version": "1.6.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/mime/-/mime-1.6.0.tgz",
+ "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "mime": "cli.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/mitt/-/mitt-3.0.1.tgz",
@@ -1118,6 +1543,13 @@
"node": ">=18.0.0"
}
},
+ "node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/nanoid": {
"version": "3.3.19",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/nanoid/-/nanoid-3.3.19.tgz",
@@ -1137,6 +1569,51 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
+ "node_modules/nosleep.js": {
+ "version": "0.12.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/nosleep.js/-/nosleep.js-0.12.0.tgz",
+ "integrity": "sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA==",
+ "license": "MIT"
+ },
+ "node_modules/on-finished": {
+ "version": "2.4.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/on-finished/-/on-finished-2.4.1.tgz",
+ "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "ee-first": "1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/pako": {
+ "version": "3.0.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/pako/-/pako-3.0.2.tgz",
+ "integrity": "sha512-uBv6IT2aT1A78iU6dpNEbf6+CyhlV/6g9JlJs9kpgjFGFhruIICVRysF/W0SLzXg5+hCl+KroH7e4YUyfEmgLg==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/puzrin"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/nodeca"
+ }
+ ],
+ "license": "(MIT AND Zlib)"
+ },
+ "node_modules/parseurl": {
+ "version": "1.3.3",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/parseurl/-/parseurl-1.3.3.tgz",
+ "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/picocolors/-/picocolors-1.1.1.tgz",
@@ -1196,6 +1673,18 @@
"node": "^10 || ^12 || >=14"
}
},
+ "node_modules/protobufjs": {
+ "version": "8.8.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/protobufjs/-/protobufjs-8.8.0.tgz",
+ "integrity": "sha512-N3xhQ5yyBx3vQq4gubBfASzYhJGNzeDbjqBpu61g7UVylsN/qyffU96TKWD3GbbLOKF82VGNRNvv1+BFgE31Eg==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "long": "^5.3.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/puppeteer-core": {
"version": "25.11.0",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/puppeteer-core/-/puppeteer-core-25.11.0.tgz",
@@ -1214,6 +1703,31 @@
"node": ">=22.12.0"
}
},
+ "node_modules/quickselect": {
+ "version": "3.0.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/quickselect/-/quickselect-3.0.0.tgz",
+ "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+ "license": "ISC"
+ },
+ "node_modules/range-parser": {
+ "version": "1.2.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/range-parser/-/range-parser-1.2.1.tgz",
+ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/rbush": {
+ "version": "4.0.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/rbush/-/rbush-4.0.1.tgz",
+ "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
+ "license": "MIT",
+ "dependencies": {
+ "quickselect": "^3.0.0"
+ }
+ },
"node_modules/rollup": {
"version": "4.63.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/rollup/-/rollup-4.63.3.tgz",
@@ -1260,6 +1774,54 @@
"fsevents": "~2.3.2"
}
},
+ "node_modules/send": {
+ "version": "0.19.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/send/-/send-0.19.2.tgz",
+ "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "destroy": "1.2.0",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "etag": "~1.8.1",
+ "fresh": "~0.5.2",
+ "http-errors": "~2.0.1",
+ "mime": "1.6.0",
+ "ms": "2.1.3",
+ "on-finished": "~2.4.1",
+ "range-parser": "~1.2.1",
+ "statuses": "~2.0.2"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/serve-static": {
+ "version": "1.16.3",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/serve-static/-/serve-static-1.16.3.tgz",
+ "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "parseurl": "~1.3.3",
+ "send": "~0.19.1"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/setprototypeof": {
+ "version": "1.2.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/setprototypeof/-/setprototypeof-1.2.0.tgz",
+ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+ "dev": true,
+ "license": "ISC"
+ },
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1270,6 +1832,24 @@
"node": ">=0.10.0"
}
},
+ "node_modules/sourcemap-codec": {
+ "version": "1.4.8",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+ "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/statuses": {
+ "version": "2.0.2",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/statuses/-/statuses-2.0.2.tgz",
+ "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/string-width": {
"version": "8.2.2",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/string-width/-/string-width-8.2.2.tgz",
@@ -1326,6 +1906,36 @@
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
+ "node_modules/toidentifier": {
+ "version": "1.0.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/toidentifier/-/toidentifier-1.0.1.tgz",
+ "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/topojson-client": {
+ "version": "3.1.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/topojson-client/-/topojson-client-3.1.0.tgz",
+ "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+ "license": "ISC",
+ "dependencies": {
+ "commander": "2"
+ },
+ "bin": {
+ "topo2geo": "bin/topo2geo",
+ "topomerge": "bin/topomerge",
+ "topoquantize": "bin/topoquantize"
+ }
+ },
+ "node_modules/tslib": {
+ "version": "2.8.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/tslib/-/tslib-2.8.1.tgz",
+ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+ "license": "0BSD"
+ },
"node_modules/typed-query-selector": {
"version": "2.12.2",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
@@ -1333,6 +1943,22 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/universalify": {
+ "version": "2.0.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/universalify/-/universalify-2.0.1.tgz",
+ "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 10.0.0"
+ }
+ },
+ "node_modules/urijs": {
+ "version": "1.19.11",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/urijs/-/urijs-1.19.11.tgz",
+ "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
+ "license": "MIT"
+ },
"node_modules/vite": {
"version": "6.4.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/vite/-/vite-6.4.3.tgz",
@@ -1408,6 +2034,55 @@
}
}
},
+ "node_modules/vite-plugin-cesium": {
+ "version": "1.2.23",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/vite-plugin-cesium/-/vite-plugin-cesium-1.2.23.tgz",
+ "integrity": "sha512-x9A8ZCEoegceXg/E+LnxKr0XBsI9CR4cgYWQ2Dd3cUEYwKcTnHQ3kBfpol7BUcGtgQnQos/mtVrRmuVQBXFjHw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "fs-extra": "^9.1.0",
+ "rollup-plugin-external-globals": "^0.6.1",
+ "serve-static": "^1.14.1"
+ },
+ "peerDependencies": {
+ "cesium": "^1.95.0",
+ "vite": ">=2.7.1"
+ }
+ },
+ "node_modules/vite-plugin-cesium/node_modules/rollup": {
+ "version": "2.80.0",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/rollup/-/rollup-2.80.0.tgz",
+ "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
+ "dev": true,
+ "license": "MIT",
+ "peer": true,
+ "bin": {
+ "rollup": "dist/bin/rollup"
+ },
+ "engines": {
+ "node": ">=10.0.0"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/vite-plugin-cesium/node_modules/rollup-plugin-external-globals": {
+ "version": "0.6.1",
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/rollup-plugin-external-globals/-/rollup-plugin-external-globals-0.6.1.tgz",
+ "integrity": "sha512-mlp3KNa5sE4Sp9UUR2rjBrxjG79OyZAh/QC18RHIjM+iYkbBwNXSo8DHRMZWtzJTrH8GxQ+SJvCTN3i14uMXIA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@rollup/pluginutils": "^4.0.0",
+ "estree-walker": "^2.0.1",
+ "is-reference": "^1.2.1",
+ "magic-string": "^0.25.7"
+ },
+ "peerDependencies": {
+ "rollup": "^2.25.0"
+ }
+ },
"node_modules/webdriver-bidi-protocol": {
"version": "0.4.3",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.3.tgz",
diff --git a/package.json b/package.json
index 33e40fc..ee05d09 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
"preview": "vite preview"
},
"dependencies": {
+ "cesium": "^1.145.0",
"three": "^0.170.0"
},
"devDependencies": {
"pngjs": "^7.0.0",
"puppeteer-core": "^25.11.0",
- "vite": "^6.0.0"
+ "vite": "^6.0.0",
+ "vite-plugin-cesium": "^1.2.23"
}
}
diff --git a/src/assets/earth-blue-marble.jpg b/src/assets/earth-blue-marble.jpg
deleted file mode 100644
index e673a7c..0000000
Binary files a/src/assets/earth-blue-marble.jpg and /dev/null differ
diff --git a/src/core/App.js b/src/core/App.js
index fe843f7..e9b1498 100644
--- a/src/core/App.js
+++ b/src/core/App.js
@@ -3,13 +3,13 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ENTRIES } from '../data/entries.js';
import { Binder } from '../scene/binder.js';
import { Timeline, TIMELINE_SPREAD } from '../scene/timeline.js';
-import { Globe } from '../scene/globe.js';
+import { CesiumGlobe } from '../scene/CesiumGlobe.js';
import { Overlay } from '../ui/overlay.js';
import { clamp, easeInOutCubic } from '../utils/easing.js';
const CAMERA_POSES = {
binder: { pos: new THREE.Vector3(0.2, 0.75, 2.95), target: new THREE.Vector3(0, 0.02, 0), max: 6, min: 1.6 },
- timeline: { pos: new THREE.Vector3(0, 1.4, 7.9), target: new THREE.Vector3(0, 0, 0), max: 13, min: 3.4 },
+ timeline: { pos: new THREE.Vector3(0, 1.4, 7.9), target: new THREE.Vector3(0, 0, 0), max: 13, min: 1.5 },
globe: { pos: new THREE.Vector3(0, 0.35, 3.7), target: new THREE.Vector3(0, 0, 0), max: 8, min: 2.2 },
};
@@ -69,7 +69,7 @@ export class App {
}
_initLights() {
- const hemi = new THREE.HemisphereLight(0xfff1d8, 0x221811, 0.55);
+ const hemi = new THREE.HemisphereLight(0xfff1d8, 0x2a1f14, 0.8);
this.scene.add(hemi);
const key = new THREE.DirectionalLight(0xffe6c0, 2.4);
@@ -89,6 +89,16 @@ export class App {
const rim = new THREE.DirectionalLight(0x8fa0d0, 0.7);
rim.position.set(-2.5, 1.2, -3.5);
this.scene.add(rim);
+
+ // 低角度掠射光：横扫皮面，凸显皮革纹理凹凸
+ const graze = new THREE.DirectionalLight(0xffd9a8, 1.1);
+ graze.position.set(-4.5, 0.7, 2.6);
+ this.scene.add(graze);
+
+ // 背面补光：让外侧牛皮从背面看也可见
+ const backLight = new THREE.DirectionalLight(0xffd9a8, 0.55);
+ backLight.position.set(0.5, 1.2, -3.5);
+ this.scene.add(backLight);
}
_initScene() {
@@ -96,16 +106,14 @@ export class App {
this.binder.onChange = (i) => this._select(i, { syncBinder: false });
this.timeline = new Timeline();
- this.globe = new Globe({ renderer: this.renderer });
+ this.globe = new CesiumGlobe({ onPick: (i) => this._pickGlobe(i) });
this.scene.add(this.binder.group);
this.scene.add(this.timeline.group);
- this.scene.add(this.globe.group);
this._buildGround();
this.timeline.group.visible = false;
- this.globe.group.visible = false;
this._collectInteractives();
}
@@ -148,7 +156,7 @@ export class App {
});
});
this.timeline.cards.forEach((c) => this.interactives.timeline.push(c.card));
- this.globe.markers.forEach((m) => this.interactives.globe.push(m.marker));
+ // 地理视图由 Cesium 自行拾取，不参与 Three.js 射线检测
}
_initEvents() {
@@ -237,6 +245,13 @@ export class App {
return hits.length ? hits[0] : null;
}
+ _pickGlobe(index) {
+ this._select(index, { syncBinder: false });
+ // 点击地理标记时，显示右下角登记卡详情
+ document.getElementById('detail-card').classList.remove('hidden');
+ this.binder.syncTo(index);
+ }
+
_pick() {
const hit = this._hitTest();
if (!hit) return;
@@ -280,9 +295,24 @@ export class App {
this.view = view;
this.overlay.setView(view);
+ const isGlobe = view === 'globe';
+
this.binder.group.visible = view === 'binder';
this.timeline.group.visible = view === 'timeline';
- this.globe.group.visible = view === 'globe';
+
+ // Cesium 地球：地理视图显示 Cesium 画布，其余视图显示 Three.js 画布
+ document.getElementById('scene').style.display = isGlobe ? 'none' : 'block';
+ document.getElementById('cesium-container').style.display = isGlobe ? 'block' : 'none';
+
+ if (isGlobe) {
+ this.globe.ensureCreated();
+ this.globe.setVisible(true);
+ this.globe.setSelected(this.selected);
+ this.globe.resize();
+ } else {
+ this.globe.setVisible(false);
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
+ }
// 登记卡详情仅在活页本视图展示，避免遮挡时间轴/地理内容
document.getElementById('detail-card').classList.toggle('hidden', view !== 'binder');
@@ -295,8 +325,7 @@ export class App {
this.controls.enableRotate = !locked;
this.controls.enablePan = !locked;
this.controls.enableZoom = true;
- this.controls.autoRotate = view === 'globe';
- this.controls.autoRotateSpeed = 0.5;
+ this.controls.autoRotate = false;
// 进入时间轴时复位横向偏移
if (view === 'timeline') {
@@ -304,7 +333,7 @@ export class App {
this.timeline.group.position.x = 0;
}
- this._tweenCamera(pose.pos, pose.target);
+ if (!isGlobe) this._tweenCamera(pose.pos, pose.target);
}
_tweenCamera(toPos, toTarget) {
@@ -320,6 +349,7 @@ export class App {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
+ if (this.globe) this.globe.resize();
}
_animate() {
diff --git a/src/data/worldMap.js b/src/data/worldMap.js
deleted file mode 100644
index f6fed26..0000000
--- a/src/data/worldMap.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// 简化的大陆轮廓（经纬度多边形），用于生成点阵风格的地球。
-// 坐标 [lng, lat]，用于艺术化表达，不求精确。
-
-export const CONTINENTS = [
- { name: '北美洲', poly: [[-168,66],[-140,70],[-90,72],[-60,60],[-55,52],[-65,45],[-75,35],[-80,25],[-90,29],[-97,26],[-97,22],[-105,20],[-110,23],[-117,33],[-125,40],[-125,49],[-135,58],[-150,60],[-165,60],[-168,66]] },
- { name: '格陵兰', poly: [[-45,60],[-55,70],[-40,83],[-20,80],[-22,70],[-32,60],[-45,60]] },
- { name: '南美洲', poly: [[-77,8],[-60,5],[-51,2],[-35,-5],[-40,-15],[-48,-25],[-58,-35],[-65,-40],[-68,-50],[-72,-53],[-75,-45],[-72,-35],[-70,-20],[-76,-12],[-80,-3],[-77,8]] },
- { name: '欧洲', poly: [[-9,43],[-9,37],[3,43],[10,44],[12,48],[8,54],[10,58],[18,58],[25,60],[30,60],[40,68],[30,70],[20,70],[10,64],[5,62],[-5,58],[-9,43]] },
- { name: '不列颠', poly: [[-5,50],[-2,53],[-2,57],[-5,58],[-4,54],[-5,50]] },
- { name: '冰岛', poly: [[-22,64],[-18,66],[-14,65],[-20,63],[-22,64]] },
- { name: '非洲', poly: [[-6,35],[10,37],[20,32],[32,31],[37,18],[43,11],[40,-3],[40,-11],[35,-20],[30,-30],[20,-35],[15,-28],[12,-18],[13,-9],[8,5],[0,5],[-9,5],[-15,10],[-17,15],[-13,25],[-6,35]] },
- { name: '马达加斯加', poly: [[44,-12],[48,-16],[50,-16],[47,-25],[44,-22],[44,-12]] },
- { name: '阿拉伯', poly: [[35,30],[43,12],[52,15],[58,22],[55,26],[48,30],[35,30]] },
- { name: '亚洲', poly: [[27,40],[45,42],[55,46],[60,50],[70,55],[90,60],[120,68],[160,70],[180,66],[180,60],[160,58],[140,52],[135,44],[125,39],[120,32],[112,21],[108,13],[104,8],[98,8],[95,16],[92,22],[85,20],[80,12],[77,7],[74,14],[70,21],[66,25],[60,25],[55,27],[48,29],[40,31],[32,34],[27,40]] },
- { name: '日本', poly: [[130,31],[140,35],[142,42],[145,44],[140,40],[135,34],[130,31]] },
- { name: '东南亚', poly: [[98,6],[102,-2],[106,-6],[114,-8],[120,-3],[110,3],[104,2],[98,6]] },
- { name: '新几内亚', poly: [[131,-1],[138,-3],[145,-6],[147,-9],[140,-8],[134,-4],[131,-1]] },
- { name: '澳大利亚', poly: [[114,-22],[122,-18],[130,-12],[138,-17],[146,-19],[153,-28],[150,-37],[140,-38],[130,-32],[120,-34],[114,-22]] },
- { name: '新西兰', poly: [[172,-34],[175,-38],[178,-38],[173,-41],[168,-46],[167,-45],[170,-40],[172,-34]] },
-];
-
-// 判断点是否在多边形内（射线法）
-function pointInPoly(lng, lat, poly) {
- let inside = false;
- for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
- const [xi, yi] = poly[i];
- const [xj, yj] = poly[j];
- if ((yi > lat) !== (yj > lat) && lng < ((xj - xi) * (lat - yi)) / (yj - yi) + xi) {
- inside = !inside;
- }
- }
- return inside;
-}
-
-// 生成陆地点阵（经纬度网格）
-export function landPoints(step = 2.2) {
- const pts = [];
- for (let lat = -62; lat <= 74; lat += step) {
- for (let lng = -180; lng < 180; lng += step) {
- for (const c of CONTINENTS) {
- if (pointInPoly(lng, lat, c.poly)) {
- pts.push([lng, lat]);
- break;
- }
- }
- }
- }
- return pts;
-}
diff --git a/src/scene/CesiumGlobe.js b/src/scene/CesiumGlobe.js
new file mode 100644
index 0000000..a48e8ff
--- /dev/null
+++ b/src/scene/CesiumGlobe.js
@@ -0,0 +1,161 @@
+import * as Cesium from 'cesium';
+import { ENTRIES, CATEGORY_INFO } from '../data/entries.js';
+
+// 免费、无需 Ion 令牌的影像与地形源
+const IMAGERY_URL =
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
+const TERRAIN_URL =
+ 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer';
+
+export class CesiumGlobe {
+ constructor({ onPick } = {}) {
+ this.onPick = onPick;
+ this.viewer = null;
+ this.markers = [];
+ this.selected = -1;
+ this._created = false;
+ this._visible = false;
+ }
+
+ ensureCreated() {
+ if (this._created) return;
+ this._created = true;
+
+ const container = document.getElementById('cesium-container');
+
+ this.viewer = new Cesium.Viewer(container, {
+ animation: false,
+ timeline: false,
+ geocoder: false,
+ homeButton: false,
+ sceneModePicker: false,
+ baseLayerPicker: false,
+ navigationHelpButton: false,
+ fullscreenButton: false,
+ infoBox: false,
+ selectionIndicator: false,
+ baseLayer: false,
+ requestRenderMode: true,
+ });
+
+ const viewer = this.viewer;
+ const scene = viewer.scene;
+
+ // 贴合暗色主题
+ scene.backgroundColor = Cesium.Color.fromCssColorString('#14100d');
+ scene.skyAtmosphere.show = false;
+ scene.skyBox.show = false;
+ scene.sun.show = false;
+ scene.moon.show = false;
+ scene.globe.enableLighting = false;
+ scene.globe.showGroundAtmosphere = false;
+ scene.globe.baseColor = Cesium.Color.fromCssColorString('#0a1626');
+
+ // 相机交互：限制滚轮缩放范围，避免过近/过远
+ const controller = scene.screenSpaceCameraController;
+ controller.enableCollisionDetection = true; // 必须开启：缩放距离限制在关闭时会被忽略
+ controller.minimumZoomDistance = 10000; // 最近约 10 km（区域尺度）
+ controller.maximumZoomDistance = 8e6; // 最远约 8000 km
+
+ // 精细化渲染：质量与性能的平衡
+ scene.globe.maximumScreenSpaceError = 2.0; // 默认细分，最省性能
+ scene.globe.tileCacheSize = 600; // 更大的瓦片缓存，减少细节刷新
+ scene.fxaa = false; // 关闭抗锯齿后处理，省一个全屏通道
+ viewer.resolutionScale = 1.5; // 1.5 倍超采样，替代 FXAA 提供更锐利的抗锯齿
+ scene.maximumRenderTimeChange = Infinity; // 配合 requestRenderMode：静止时停止重绘，大幅省电省帧
+
+ // 卫星影像
+ const imagery = new Cesium.UrlTemplateImageryProvider({
+ url: IMAGERY_URL,
+ credit: 'Imagery © Esri, Maxar, Earthstar Geographics',
+ maximumLevel: 19,
+ });
+ viewer.imageryLayers.addImageryProvider(imagery);
+
+ // 真实地形（Esri World Elevation 3D，免费无 token；失败则保持默认椭球）
+ const terrain = new Cesium.Terrain(
+ Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(TERRAIN_URL),
+ );
+ terrain.errorEvent.addEventListener((err) => {
+ console.warn('[CesiumGlobe] 地形加载失败，使用椭球：', err);
+ });
+ scene.setTerrain(terrain);
+
+ viewer.clock.shouldAnimate = false;
+
+ this._buildMarkers();
+ this._setupPick();
+
+ viewer.camera.setView({
+ destination: Cesium.Cartesian3.fromDegrees(35, 12, 7.2e6),
+ });
+ }
+
+ _buildMarkers() {
+ const viewer = this.viewer;
+ const gold = Cesium.Color.fromCssColorString('#e0c46a');
+ const ivory = Cesium.Color.fromCssColorString('#e8d9b4');
+ const ink = Cesium.Color.fromCssColorString('#14100d');
+
+ ENTRIES.forEach((entry, i) => {
+ const info = CATEGORY_INFO[entry.category] || CATEGORY_INFO['事'];
+ const color = Cesium.Color.fromCssColorString(info.color);
+
+ const entity = viewer.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(entry.lng, entry.lat),
+ point: {
+ pixelSize: 8,
+ color,
+ outlineColor: gold,
+ outlineWidth: 1.5,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ },
+ label: {
+ text: entry.name,
+ font: '17px Georgia, "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif',
+ fillColor: ivory,
+ outlineColor: ink,
+ outlineWidth: 3,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ pixelOffset: new Cesium.Cartesian2(0, -16),
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ show: false,
+ },
+ });
+
+ entity.entryIndex = i;
+ this.markers.push({ entity, index: i });
+ });
+ }
+
+ _setupPick() {
+ const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+ handler.setInputAction((movement) => {
+ const picked = this.viewer.scene.pick(movement.position);
+ if (Cesium.defined(picked) && picked.id && picked.id.entryIndex !== undefined) {
+ this.onPick?.(picked.id.entryIndex);
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ this._handler = handler;
+ }
+
+ setSelected(index) {
+ this.selected = index;
+ if (!this.viewer) return;
+ this.markers.forEach(({ entity, index: i }) => {
+ const on = i === index;
+ entity.point.pixelSize = on ? 12 : 8;
+ entity.label.show = on;
+ });
+ this.viewer.scene.requestRender();
+ }
+
+ setVisible(visible) {
+ this._visible = visible;
+ if (visible && this.viewer) this.viewer.scene.requestRender();
+ }
+
+ resize() {
+ if (this.viewer) this.viewer.resize();
+ }
+}
diff --git a/src/scene/binder.js b/src/scene/binder.js
index bf6f4db..9ec6d1c 100644
--- a/src/scene/binder.js
+++ b/src/scene/binder.js
@@ -13,85 +13,254 @@ function makeLeatherTexture({ emblem = false } = {}) {
const c = document.createElement('canvas');
c.width = w; c.height = h;
const ctx = c.getContext('2d');
- // 皮革底色（斜向渐变）
+
+ // 小牛皮：深棕色，平滑细腻的纯色
const g = ctx.createLinearGradient(0, 0, w, h);
- g.addColorStop(0, '#5c3f2c');
- g.addColorStop(0.5, '#4a3223');
- g.addColorStop(1, '#392516');
+ g.addColorStop(0, '#6e4527');
+ g.addColorStop(0.5, '#5f3a20');
+ g.addColorStop(1, '#4f2f19');
ctx.fillStyle = g;
ctx.fillRect(0, 0, w, h);
- // 皮革颗粒
- for (let i = 0; i < 32000; i++) {
+
+ // 极细腻的天然纹理（小牛皮几乎无颗粒，只有细微毛孔）
+ for (let i = 0; i < 16000; i++) {
const x = Math.random() * w, y = Math.random() * h;
- ctx.fillStyle = Math.random() > 0.5 ? 'rgba(28,16,8,0.16)' : 'rgba(178,128,74,0.10)';
- ctx.fillRect(x, y, Math.random() * 3 + 0.5, Math.random() * 3 + 0.5);
+ const s = Math.random() * 1.2 + 0.3;
+ ctx.fillStyle = Math.random() > 0.5 ? 'rgba(28,14,6,0.06)' : 'rgba(205,165,125,0.05)';
+ ctx.beginPath();
+ ctx.ellipse(x, y, s, s * 0.7, Math.random() * Math.PI, 0, Math.PI * 2);
+ ctx.fill();
}
- // 大块斑驳
- for (let i = 0; i < 70; i++) {
- const x = Math.random() * w, y = Math.random() * h, r = Math.random() * 90 + 20;
+
+ // 极淡的天然色差
+ for (let i = 0; i < 40; i++) {
+ const x = Math.random() * w, y = Math.random() * h, r = Math.random() * 120 + 40;
const rg = ctx.createRadialGradient(x, y, 0, x, y, r);
- rg.addColorStop(0, Math.random() > 0.5 ? 'rgba(0,0,0,0.09)' : 'rgba(205,145,85,0.07)');
+ rg.addColorStop(0, 'rgba(20,8,3,0.06)');
rg.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = rg;
ctx.fillRect(0, 0, w, h);
}
- // 金线压花边框 + 角饰
- ctx.strokeStyle = 'rgba(201,162,39,0.5)';
- ctx.lineWidth = 3;
- ctx.strokeRect(20, 20, w - 40, h - 40);
- ctx.strokeStyle = 'rgba(201,162,39,0.26)';
- ctx.lineWidth = 1.2;
- ctx.strokeRect(28, 28, w - 56, h - 56);
- ctx.fillStyle = 'rgba(201,162,39,0.72)';
- for (const [cx, cy] of [[20, 20], [w - 20, 20], [20, h - 20], [w - 20, h - 20]]) {
- ctx.save(); ctx.translate(cx, cy); ctx.rotate(Math.PI / 4); ctx.fillRect(-4, -4, 8, 8); ctx.restore();
- }
- if (emblem) {
- // 中央烫金徽记
- ctx.strokeStyle = 'rgba(201,162,39,0.55)';
- ctx.lineWidth = 2.5;
- ctx.beginPath(); ctx.arc(w / 2, h / 2, 84, 0, Math.PI * 2); ctx.stroke();
- ctx.beginPath(); ctx.arc(w / 2, h / 2, 70, 0, Math.PI * 2); ctx.stroke();
- ctx.fillStyle = 'rgba(224,196,106,0.92)';
- ctx.font = '700 72px "Kaiti SC","STKaiti","KaiTi",serif';
- ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
- ctx.fillText('史', w / 2, h / 2 + 6);
- }
+
const tex = new THREE.CanvasTexture(c);
tex.colorSpace = THREE.SRGBColorSpace;
tex.anisotropy = 8;
return tex;
}
-// 圆角盒体（ExtrudeGeometry 拉伸 + 倒角）
-function roundedRectShape(w, h, r) {
+// 内侧绒面（粗糙、哑光、模糊绒毛）
+function makeSuedeTexture() {
+ const w = 512, h = 640;
+ const c = document.createElement('canvas');
+ c.width = w; c.height = h;
+ const ctx = c.getContext('2d');
+ const g = ctx.createLinearGradient(0, 0, w, h);
+ g.addColorStop(0, '#a8825c');
+ g.addColorStop(0.5, '#96724e');
+ g.addColorStop(1, '#866244');
+ ctx.fillStyle = g;
+ ctx.fillRect(0, 0, w, h);
+ for (let i = 0; i < 90000; i++) {
+ const x = Math.random() * w, y = Math.random() * h;
+ ctx.fillStyle = Math.random() > 0.5 ? 'rgba(40,22,10,0.10)' : 'rgba(230,200,160,0.08)';
+ ctx.fillRect(x, y, Math.random() * 1.6 + 0.3, Math.random() * 1.6 + 0.3);
+ }
+ ctx.strokeStyle = 'rgba(30,16,8,0.10)';
+ ctx.lineWidth = 0.8;
+ for (let i = 0; i < 16000; i++) {
+ const x = Math.random() * w, y = Math.random() * h, a = Math.random() * Math.PI, l = Math.random() * 5 + 1;
+ ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + Math.cos(a) * l, y + Math.sin(a) * l); ctx.stroke();
+ }
+ const edge = ctx.createRadialGradient(w / 2, h / 2, Math.min(w, h) * 0.4, w / 2, h / 2, Math.max(w, h) * 0.72);
+ edge.addColorStop(0, 'rgba(0,0,0,0)');
+ edge.addColorStop(1, 'rgba(50,28,12,0.18)');
+ ctx.fillStyle = edge;
+ ctx.fillRect(0, 0, w, h);
+ const tex = new THREE.CanvasTexture(c);
+ tex.colorSpace = THREE.SRGBColorSpace;
+ tex.anisotropy = 8;
+ return tex;
+}
+
+// 圆角矩形轮廓（直线段 + 圆弧段都用 lineTo 细分，正反面/皮边共享同一轮廓）
+function roundedRectShape(w, h, r, edgeSeg = 40, arcSeg = 12) {
+ const hw = w / 2, hh = h / 2;
const s = new THREE.Shape();
- const x = -w / 2, y = -h / 2;
- s.moveTo(x + r, y);
- s.lineTo(x + w - r, y);
- s.quadraticCurveTo(x + w, y, x + w, y + r);
- s.lineTo(x + w, y + h - r);
- s.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
- s.lineTo(x + r, y + h);
- s.quadraticCurveTo(x, y + h, x, y + h - r);
- s.lineTo(x, y + r);
- s.quadraticCurveTo(x, y, x + r, y);
+ s.moveTo(-hw + r, hh);
+ // 上边
+ for (let i = 1; i <= edgeSeg; i++) s.lineTo(-hw + r + (w - 2 * r) * i / edgeSeg, hh);
+ // 右上角：90° → 0°
+ for (let i = 1; i <= arcSeg; i++) { const a = Math.PI / 2 - (Math.PI / 2) * i / arcSeg; s.lineTo(hw - r + r * Math.cos(a), hh - r + r * Math.sin(a)); }
+ // 右边
+ for (let i = 1; i <= edgeSeg; i++) s.lineTo(hw, hh - r - (h - 2 * r) * i / edgeSeg);
+ // 右下角：0° → -90°
+ for (let i = 1; i <= arcSeg; i++) { const a = 0 - (Math.PI / 2) * i / arcSeg; s.lineTo(hw - r + r * Math.cos(a), -hh + r + r * Math.sin(a)); }
+ // 下边
+ for (let i = 1; i <= edgeSeg; i++) s.lineTo(hw - r - (w - 2 * r) * i / edgeSeg, -hh);
+ // 左下角：-90° → -180°
+ for (let i = 1; i <= arcSeg; i++) { const a = -Math.PI / 2 - (Math.PI / 2) * i / arcSeg; s.lineTo(-hw + r + r * Math.cos(a), -hh + r + r * Math.sin(a)); }
+ // 左边
+ for (let i = 1; i <= edgeSeg; i++) s.lineTo(-hw, -hh + r + (h - 2 * r) * i / edgeSeg);
+ // 左上角：180° → 90°
+ for (let i = 1; i <= arcSeg; i++) { const a = Math.PI - (Math.PI / 2) * i / arcSeg; s.lineTo(-hw + r + r * Math.cos(a), hh - r + r * Math.sin(a)); }
+ s.closePath();
return s;
}
-function makeRoundedBox(w, h, d, r, bevel = 0.012) {
- const geo = new THREE.ExtrudeGeometry(roundedRectShape(w, h, r), {
- depth: d,
- bevelEnabled: true,
- bevelThickness: bevel,
- bevelSize: bevel * 0.85,
- bevelSegments: 3,
- curveSegments: 10,
- });
- geo.translate(0, 0, -d / 2);
+// 随机牛皮弯曲：低频平滑起伏（更柔和、更自然），正反面/皮边共用同一函数保证一致
+function leatherWarp(x, y) {
+ const s = Math.sin(x * 1.3 + 0.7) * Math.cos(y * 1.1 + 0.9)
+ + Math.sin(x * 0.8 + y * 1.5 + 0.4) * 0.6
+ + Math.sin(x * 2.1 + 1.6) * Math.sin(y * 1.7 + 0.5) * 0.3;
+ return s * 0.002;
+}
+
+// 软皮曲面：ShapeGeometry 三角化（圆角正确、无缺口）+ 书脊处弧度弯曲
+function makeLeatherSurface(w, h, crXY, curve, flip) {
+ const shape = roundedRectShape(w, h, crXY);
+ const geo = new THREE.ShapeGeometry(shape);
+ const pos = geo.attributes.position;
+ // ShapeGeometry 的 UV 是原始坐标，需归一化到 [0,1]
+ const uv0 = geo.attributes.uv;
+ for (let i = 0; i < uv0.count; i++) {
+ uv0.setXY(i, (uv0.getX(i) + w / 2) / w, (uv0.getY(i) + h / 2) / h);
+ }
+ uv0.needsUpdate = true;
+ const hh = h / 2, sigma = 0.5;
+ for (let i = 0; i < pos.count; i++) {
+ const x = pos.getX(i), y = pos.getY(i);
+ const v = y / hh;
+ const z = -curve * Math.exp(-(x * x) / (2 * sigma * sigma)) * (1 - 0.25 * v * v) + leatherWarp(x, y);
+ pos.setZ(i, z);
+ }
+ pos.needsUpdate = true;
+ if (flip) {
+ // 背面：反转索引绕向（法线朝 -z），并镜像 UV
+ const idx = geo.index;
+ for (let i = 0; i < idx.count; i += 3) {
+ const t = idx.getX(i + 1);
+ idx.setX(i + 1, idx.getX(i + 2));
+ idx.setX(i + 2, t);
+ }
+ idx.needsUpdate = true;
+ const uv = geo.attributes.uv;
+ for (let i = 0; i < uv.count; i++) uv.setX(i, 1 - uv.getX(i));
+ uv.needsUpdate = true;
+ }
+ geo.computeVertexNormals();
return geo;
}
+// 皮边：与曲面共享同一圆角矩形轮廓的窄侧壁（封闭厚度，纯色）
+function makeSideRim(w, h, crXY, thick, curve) {
+ const shape = roundedRectShape(w, h, crXY);
+ const pts = shape.getPoints();
+ const hh = h / 2, sigma = 0.5;
+ const pos = [], idx = [];
+ for (let i = 0; i < pts.length; i++) {
+ const px = pts[i].x, py = pts[i].y;
+ const v = py / hh;
+ const z = -curve * Math.exp(-(px * px) / (2 * sigma * sigma)) * (1 - 0.25 * v * v) + leatherWarp(px, py);
+ pos.push(px, py, z - thick / 2, px, py, z + thick / 2);
+ if (i > 0) {
+ const a = (i - 1) * 2, b = a + 1, c = i * 2, d = i * 2 + 1;
+ idx.push(a, c, b, b, c, d);
+ }
+ }
+ const n = pts.length;
+ idx.push((n - 1) * 2, 0, (n - 1) * 2 + 1, (n - 1) * 2 + 1, 0, 1);
+ const geo = new THREE.BufferGeometry();
+ geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+ geo.setIndex(idx);
+ geo.computeVertexNormals();
+ return geo;
+}
+
+// 皮革法线贴图：由卵石颗粒 + 皱纹 + 缝线凹槽的高度图生成
+function makeLeatherNormalMap() {
+ const w = 512, h = 640;
+ const c = document.createElement('canvas');
+ c.width = w; c.height = h;
+ const ctx = c.getContext('2d', { willReadFrequently: true });
+ // 平面基准
+ ctx.fillStyle = 'rgb(128,128,128)';
+ ctx.fillRect(0, 0, w, h);
+ // 极细颗粒（光滑小牛皮：几乎无凹凸）
+ for (let i = 0; i < 30000; i++) {
+ const x = Math.random() * w, y = Math.random() * h, r = Math.random() * 1.5 + 0.4;
+ const g = ctx.createRadialGradient(x, y, 0, x, y, r);
+ g.addColorStop(0, 'rgba(255,255,255,0.2)');
+ g.addColorStop(0.65, 'rgba(128,128,128,0.03)');
+ g.addColorStop(1, 'rgba(0,0,0,0.16)');
+ ctx.fillStyle = g;
+ ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
+ }
+ // 高度图 → 法线贴图
+ const img = ctx.getImageData(0, 0, w, h);
+ const out = ctx.createImageData(w, h);
+ const S = 1.6;
+ const hAt = (yy, xx) => img.data[(Math.min(h - 1, Math.max(0, yy)) * w + Math.min(w - 1, Math.max(0, xx))) * 4];
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const l = hAt(y, x - 1), r = hAt(y, x + 1), u = hAt(y - 1, x), d = hAt(y + 1, x);
+ const nx = (l - r) * S;
+ const ny = (u - d) * S;
+ const nz = 255;
+ const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
+ const o = (y * w + x) * 4;
+ out.data[o] = (nx / len * 0.5 + 0.5) * 255;
+ out.data[o + 1] = (ny / len * 0.5 + 0.5) * 255;
+ out.data[o + 2] = (nz / len * 0.5 + 0.5) * 255;
+ out.data[o + 3] = 255;
+ }
+ }
+ ctx.putImageData(out, 0, 0);
+ const tex = new THREE.CanvasTexture(c);
+ tex.colorSpace = THREE.NoColorSpace;
+ tex.anisotropy = 8;
+ return tex;
+}
+
+// 内侧绒面法线：密集细绒毛（高频噪点）
+function makeSuedeNormalMap() {
+ const w = 512, h = 640;
+ const c = document.createElement('canvas');
+ c.width = w; c.height = h;
+ const ctx = c.getContext('2d', { willReadFrequently: true });
+ ctx.fillStyle = 'rgb(128,128,128)';
+ ctx.fillRect(0, 0, w, h);
+ // 密集绒毛噪点
+ const img = ctx.createImageData(w, h);
+ for (let i = 0; i < img.data.length; i += 4) {
+ const v = 128 + (Math.random() - 0.5) * 60;
+ img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
+ img.data[i + 3] = 255;
+ }
+ ctx.putImageData(img, 0, 0);
+ // 高度 → 法线
+ const src = ctx.getImageData(0, 0, w, h);
+ const out = ctx.createImageData(w, h);
+ const S = 4.5;
+ const hAt = (yy, xx) => src.data[(Math.min(h - 1, Math.max(0, yy)) * w + Math.min(w - 1, Math.max(0, xx))) * 4];
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const l = hAt(y, x - 1), r = hAt(y, x + 1), u = hAt(y - 1, x), d = hAt(y + 1, x);
+ const nx = (l - r) * S, ny = (u - d) * S, nz = 255;
+ const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
+ const o = (y * w + x) * 4;
+ out.data[o] = (nx / len * 0.5 + 0.5) * 255;
+ out.data[o + 1] = (ny / len * 0.5 + 0.5) * 255;
+ out.data[o + 2] = (nz / len * 0.5 + 0.5) * 255;
+ out.data[o + 3] = 255;
+ }
+ }
+ ctx.putImageData(out, 0, 0);
+ const tex = new THREE.CanvasTexture(c);
+ tex.colorSpace = THREE.NoColorSpace;
+ tex.anisotropy = 8;
+ return tex;
+}
+
export class Binder {
constructor() {
this.group = new THREE.Group();
@@ -101,8 +270,11 @@ export class Binder {
this.onChange = null;
this.coverTex = makeLeatherTexture({ emblem: true });
- this.spineTex = makeLeatherTexture({ emblem: false });
+ this.leatherNormalTex = makeLeatherNormalMap();
+ this.suedeTex = makeSuedeTexture();
+ this.suedeNormalTex = makeSuedeNormalMap();
this._buildCovers();
+ this._buildHingePlate();
this._buildRings();
this._buildPages();
@@ -111,46 +283,75 @@ export class Binder {
}
_buildCovers() {
- const coverW = PAGE_W + 0.12;
- const coverH = PAGE_H + 0.18;
- const thick = 0.05;
- const coverMat = new THREE.MeshStandardMaterial({
- map: this.coverTex, roughness: 0.58, metalness: 0.1,
+ const coverW = PAGE_W + 0.2;
+ const coverH = PAGE_H + 0.2;
+ const spineW = 0.12;
+ const thick = 0.017; // 牛皮厚度（减 1/3）
+
+ // 外侧：光滑深棕小牛皮（纯色，微光泽）
+ const outerMat = new THREE.MeshStandardMaterial({
+ map: this.coverTex,
+ normalMap: this.leatherNormalTex,
+ normalScale: new THREE.Vector2(0.3, 0.3),
+ roughness: 0.25,
+ metalness: 0.0,
});
- const spineMat = new THREE.MeshStandardMaterial({
- map: this.spineTex, roughness: 0.6, metalness: 0.08,
+ // 内侧：粗糙绒面（哑光）
+ const innerMat = new THREE.MeshStandardMaterial({
+ map: this.suedeTex,
+ normalMap: this.suedeNormalTex,
+ normalScale: new THREE.Vector2(1.1, 1.1),
+ roughness: 0.92,
+ metalness: 0.0,
});
- // 圆角倒角封面
- const coverGeo = makeRoundedBox(coverW, coverH, thick, 0.07);
- this.coverL = new THREE.Mesh(coverGeo, coverMat);
- this.coverL.position.set(-(0.05 + coverW / 2), 0, -0.115);
- this.coverL.receiveShadow = true;
- this.coverL.castShadow = true;
- this.coverR = new THREE.Mesh(coverGeo, coverMat);
- this.coverR.position.set(0.05 + coverW / 2, 0, -0.115);
- this.coverR.receiveShadow = true;
- this.coverR.castShadow = true;
+ // 一张牛皮：正反两张弯曲曲面 + 封闭皮边（UV 正确无拉伸）
+ const totalW = coverW * 2 + spineW;
+ const frontGeo = makeLeatherSurface(totalW, coverH, 0.06, 0.07, false);
+ const backGeo = makeLeatherSurface(totalW, coverH, 0.06, 0.07, true);
+ const rimGeo = makeSideRim(totalW, coverH, 0.06, thick, 0.07);
+ const rimMat = new THREE.MeshStandardMaterial({ color: 0x6b4524, roughness: 0.7, metalness: 0.0, side: THREE.DoubleSide });
- // 圆角书脊
- const spineGeo = makeRoundedBox(0.1, coverH, 0.16, 0.03, 0.008);
- this.spine = new THREE.Mesh(spineGeo, spineMat);
- this.spine.position.set(0, 0, -0.11);
- this.spine.receiveShadow = true;
+ const front = new THREE.Mesh(frontGeo, innerMat); // +z 朝书页（绒面）
+ front.position.z = thick / 2;
+ const back = new THREE.Mesh(backGeo, outerMat); // -z 朝外（光滑）
+ back.position.z = -thick / 2;
+ const rim = new THREE.Mesh(rimGeo, rimMat);
- // 书脊上下金属箍
- const bandMat = new THREE.MeshStandardMaterial({
- color: 0xc9a227, metalness: 0.85, roughness: 0.32,
+ this.cover = new THREE.Group();
+ this.cover.add(front, back, rim);
+ this.cover.position.set(0, 0, -0.095);
+ front.receiveShadow = back.receiveShadow = rim.receiveShadow = true;
+ front.castShadow = back.castShadow = rim.castShadow = true;
+
+ this.group.add(this.cover);
+ }
+
+ _buildHingePlate() {
+ // 金属连接片：薄薄地贴合在牛皮书脊内面上，用于连接铁环
+ const mat = new THREE.MeshStandardMaterial({
+ color: 0xd8d2c6, metalness: 0.95, roughness: 0.25,
});
- const bandGeo = makeRoundedBox(0.115, 0.07, 0.18, 0.02, 0.004);
- for (const by of [-0.72, 0.72]) {
- const band = new THREE.Mesh(bandGeo, bandMat);
- band.position.set(0, by, -0.11);
- band.castShadow = true;
- this.group.add(band);
+ // 薄片（有可见厚度的金属条），贴在牛皮内面（书脊处曲面 z≈-0.122）上
+ const plate = new THREE.Mesh(new THREE.BoxGeometry(0.09, 1.85, 0.04), mat);
+ plate.position.set(0, 0.07, -0.135);
+ plate.castShadow = true;
+ plate.receiveShadow = true;
+
+ // 铆钉：把薄片钉在牛皮上
+ const rivetGeo = new THREE.SphereGeometry(0.013, 12, 10);
+ const rivets = [];
+ for (const ry of [-0.72, -0.36, 0, 0.36, 0.72]) {
+ const rivet = new THREE.Mesh(rivetGeo, mat);
+ rivet.position.set(0, ry, -0.114);
+ rivet.scale.z = 0.5;
+ rivet.castShadow = true;
+ rivets.push(rivet);
}
- this.group.add(this.coverL, this.coverR, this.spine);
+ this.hingePlate = new THREE.Group();
+ this.hingePlate.add(plate, ...rivets);
+ this.group.add(this.hingePlate);
}
_buildRings() {
@@ -172,12 +373,21 @@ export class Binder {
}
_buildPages() {
- const segX = 72, segY = 6;
+ const segX = 96, segY = 8;
ENTRIES.forEach((entry, i) => {
const geo = new THREE.PlaneGeometry(PAGE_W, PAGE_H, segX, segY);
// 页内缘离书脊留出小空隙，左右页不紧贴
geo.translate(PAGE_W / 2 + PAGE_GAP, 0, 0);
+ // 纸张自然弧度：自由边略向正面翘起
+ const pa = geo.attributes.position;
+ for (let k = 0; k < pa.count; k++) {
+ const x = pa.getX(k), y = pa.getY(k);
+ const u = Math.min(1, Math.max(0, (x - PAGE_GAP) / PAGE_W));
+ const yNorm = (y + PAGE_H / 2) / PAGE_H;
+ pa.setZ(k, pa.getZ(k) + 0.05 * Math.sin((Math.PI * u) / 2) * (0.8 + 0.2 * yNorm));
+ }
+ pa.needsUpdate = true;
const base = Float32Array.from(geo.attributes.position.array);
const { front, back } = getPageTextures(entry);
@@ -236,13 +446,13 @@ export class Binder {
}
_updateCurvature() {
- // 翻页时整页弧形抬升：自由边最高、书脊侧贴环（如帆鼓风），顶边略强于底边；静止时完全平整
+ // 翻页时整页柔软弧弯：自由边最高、中段有“腹”、书脊侧贴环；顶边略强于底边；静止时完全平整
this.pages.forEach((p) => {
const pos = p.geometry.attributes.position;
const arr = pos.array;
const theta = Math.abs(p.angle); // 0..π
const c = Math.sin(theta); // 0 静止，1 翻页中途
- const A = 0.42 * c; // 抬升幅度（整页弧）
+ const A = 0.58 * c; // 抬升幅度（整页弧）
for (let i = 0; i < arr.length; i += 3) {
const x = p.base[i];
const y = p.base[i + 1];
@@ -250,7 +460,9 @@ export class Binder {
const u = Math.min(1, s / PAGE_W); // 0 内缘 .. 1 自由边
const yNorm = (y + PAGE_H / 2) / PAGE_H; // 0 底边 .. 1 顶边
const twist = 0.7 + 0.3 * yNorm; // 顶边抬升略强
- const z = A * twist * Math.sin((Math.PI * u) / 2);
+ // 主抬升 + 中段“腹”的次级谐波，曲线更饱满、更柔软
+ const belly = 0.85 * Math.sin((Math.PI * u) / 2) + 0.15 * Math.sin(Math.PI * u);
+ const z = A * twist * belly;
arr[i + 2] = p.base[i + 2] + z;
}
pos.needsUpdate = true;
@@ -269,13 +481,13 @@ export class Binder {
flipForward() {
if (!this.canFlipForward()) return;
- this.flip = { index: this.current, from: 0, to: -Math.PI, t: 0, duration: 1.15 };
+ this.flip = { index: this.current, from: 0, to: -Math.PI, t: 0, duration: 1.3 };
this.pages[this.current].group.position.z = 0.006;
}
flipBackward() {
if (!this.canFlipBackward()) return;
- this.flip = { index: this.current - 1, from: -Math.PI, to: 0, t: 0, duration: 1.15 };
+ this.flip = { index: this.current - 1, from: -Math.PI, to: 0, t: 0, duration: 1.3 };
this.pages[this.current - 1].group.position.z = 0.006;
}
@@ -290,7 +502,6 @@ export class Binder {
const p = this.pages[f.index];
p.angle = angle;
p.group.rotation.y = angle;
- p.group.position.y = 0.05 * Math.sin(Math.PI * k);
this._updateCurvature();
if (k >= 1) {
diff --git a/src/scene/globe.js b/src/scene/globe.js
deleted file mode 100644
index 9f9886b..0000000
--- a/src/scene/globe.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import * as THREE from 'three';
-import { ENTRIES, CATEGORY_INFO } from '../data/entries.js';
-import { makeTextSprite } from '../utils/labels.js';
-import earthUrl from '../assets/earth-blue-marble.jpg';
-
-const R = 1.6;
-
-export function latLngToVec3(lat, lng, r = R) {
- const phi = ((90 - lat) * Math.PI) / 180;
- const theta = ((lng + 180) * Math.PI) / 180;
- const x = -r * Math.sin(phi) * Math.cos(theta);
- const z = r * Math.sin(phi) * Math.sin(theta);
- const y = r * Math.cos(phi);
- return new THREE.Vector3(x, y, z);
-}
-
-export class Globe {
- constructor({ renderer } = {}) {
- this.group = new THREE.Group();
- this.markers = [];
- this.selected = -1;
- this.renderer = renderer;
-
- this._buildSphere();
- this._buildGraticule();
- this._buildMarkers();
- }
-
- _buildSphere() {
- const geo = new THREE.SphereGeometry(R, 64, 48);
- const mat = new THREE.MeshStandardMaterial({
- color: 0x0b111d, roughness: 0.82, metalness: 0.0,
- });
- const sphere = new THREE.Mesh(geo, mat);
- sphere.receiveShadow = true;
- this.group.add(sphere);
-
- // 球体表面：真实地球地形（NASA 蓝弹珠卫星影像，等距圆柱投影）
- const loader = new THREE.TextureLoader();
- loader.load(earthUrl, (tex) => {
- tex.colorSpace = THREE.SRGBColorSpace;
- const maxAniso = this.renderer ? this.renderer.capabilities.getMaxAnisotropy() : 8;
- tex.anisotropy = Math.min(8, maxAniso);
- mat.map = tex;
- mat.color.set(0xffffff);
- mat.needsUpdate = true;
-
- // 贴图就绪后，按真实地形采样生成点阵，保证珠子与地图精准对齐
- this._buildDots(tex.image);
- });
-
- // 大气微光（背面发光）
- const glowGeo = new THREE.SphereGeometry(R * 1.015, 64, 48);
- const glowMat = new THREE.MeshBasicMaterial({
- color: 0x2a3b5c, transparent: true, opacity: 0.16, side: THREE.BackSide,
- });
- this.group.add(new THREE.Mesh(glowGeo, glowMat));
- }
-
- _buildGraticule() {
- const mat = new THREE.LineBasicMaterial({ color: 0x3d4f6a, transparent: true, opacity: 0.45 });
- // 纬线
- for (let lat = -60; lat <= 60; lat += 30) {
- const pts = [];
- for (let lng = 0; lng <= 360; lng += 4) {
- pts.push(latLngToVec3(lat, lng - 180, R * 1.002));
- }
- const g = new THREE.BufferGeometry().setFromPoints(pts);
- this.group.add(new THREE.Line(g, mat));
- }
- // 经线
- for (let lng = 0; lng < 180; lng += 30) {
- const pts = [];
- for (let lat = -90; lat <= 90; lat += 4) {
- pts.push(latLngToVec3(lat, lng, R * 1.002));
- }
- const g = new THREE.BufferGeometry().setFromPoints(pts);
- this.group.add(new THREE.Line(g, mat));
- }
- }
-
- _buildDots(image) {
- // 用真实地形贴图采样：珠子经纬度直接从贴图像素反推，与地图精准对齐
- const W = 2048, H = 1024;
- const canvas = document.createElement('canvas');
- canvas.width = W;
- canvas.height = H;
- const ctx = canvas.getContext('2d', { willReadFrequently: true });
- ctx.drawImage(image, 0, 0, W, H);
- const px = ctx.getImageData(0, 0, W, H).data;
-
- // 蓝弹珠中海洋以蓝色为主导通道；非蓝色主导即为陆地/冰盖。
- // 采样坐标系与 SphereGeometry + flipY 的 UV 完全一致，保证珠子与贴图精准对齐。
- const isLand = (vx, vy, vz) => {
- let phi = Math.atan2(vz, -vx); // 方位角
- if (phi < 0) phi += Math.PI * 2; // 归一化到 [0, 2π)
- const theta = Math.acos(Math.max(-1, Math.min(1, vy))); // 极角，0=北极
- const x = Math.min(W - 1, Math.max(0, Math.round((phi / (Math.PI * 2)) * (W - 1))));
- const y = Math.min(H - 1, Math.max(0, Math.round((theta / Math.PI) * (H - 1))));
- const i = (y * W + x) * 4;
- const r = px[i], g = px[i + 1], b = px[i + 2];
- // 海洋：蓝色占优且饱和度高（蓝明显大于红）。
- // 用相对比例而非绝对值，避免把高纬度偏蓝的雪原/苔原（如西伯利亚）误判为海。
- return !(b > r && b > g && (b - r) / Math.max(1, b) > 0.25);
- };
-
- // 斐波那契球：单位球面上均匀分布的点
- const fib = (N) => {
- const pts = [];
- const phiG = Math.PI * (3 - Math.sqrt(5));
- for (let i = 0; i < N; i++) {
- const y = 1 - (i / (N - 1)) * 2;
- const rad = Math.sqrt(Math.max(0, 1 - y * y));
- const th = phiG * i;
- pts.push([Math.cos(th) * rad, y, Math.sin(th) * rad]);
- }
- return pts;
- };
-
- // 陆地珠子：只保留落在真实陆地上的点
- const landPts = [];
- for (const [vx, vy, vz] of fib(40000)) {
- if (isLand(vx, vy, vz)) landPts.push(new THREE.Vector3(vx, vy, vz).multiplyScalar(R * 1.004));
- }
-
- // 海洋珠子：只保留落在真实海洋上的点（密度略低，作背景微光）
- const oceanPts = [];
- for (const [vx, vy, vz] of fib(9000)) {
- if (!isLand(vx, vy, vz)) oceanPts.push(new THREE.Vector3(vx, vy, vz).multiplyScalar(R * 1.002));
- }
-
- this._buildDotBeads(landPts, {
- radius: 0.0032, color: 0xe8d9b4, opacity: 0.95, emissiveIntensity: 0.6,
- });
- this._buildDotBeads(oceanPts, {
- radius: 0.0022, color: 0x53658a, opacity: 0.65, emissiveIntensity: 0.45,
- });
- }
-
- _buildDotBeads(positions, { radius, color, opacity, emissiveIntensity }) {
- const geo = new THREE.SphereGeometry(radius, 8, 6);
- const mat = new THREE.MeshStandardMaterial({
- color,
- emissive: new THREE.Color(color),
- emissiveIntensity,
- roughness: 0.55,
- metalness: 0.0,
- transparent: true,
- opacity,
- });
- const mesh = new THREE.InstancedMesh(geo, mat, positions.length);
- const dummy = new THREE.Object3D();
- positions.forEach((p, i) => {
- dummy.position.copy(p);
- dummy.updateMatrix();
- mesh.setMatrixAt(i, dummy.matrix);
- });
- mesh.instanceMatrix.needsUpdate = true;
- this.group.add(mesh);
- }
-
- _buildMarkers() {
- const sphereGeo = new THREE.SphereGeometry(0.024, 20, 16);
- const ringGeo = new THREE.TorusGeometry(0.04, 0.006, 10, 28);
-
- ENTRIES.forEach((entry, i) => {
- const info = CATEGORY_INFO[entry.category] || CATEGORY_INFO['事'];
- const pos = latLngToVec3(entry.lat, entry.lng, R * 1.012);
-
- const mat = new THREE.MeshStandardMaterial({
- color: 0x111111, emissive: new THREE.Color(info.color),
- emissiveIntensity: 0.9, roughness: 0.4, metalness: 0.3,
- });
- const marker = new THREE.Mesh(sphereGeo, mat);
- marker.position.copy(pos);
- marker.userData = { view: 'globe', index: i };
-
- // 选中环（切于球面）
- const ring = new THREE.Mesh(ringGeo, new THREE.MeshBasicMaterial({ color: 0xe0c46a, transparent: true, opacity: 0.9 }));
- ring.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), pos.clone().normalize());
- ring.position.copy(pos);
- ring.visible = false;
-
- // 名称标签
- const label = makeTextSprite(entry.name, { fontSize: 40, color: '#e8d9b4' });
- label.scale.multiplyScalar(0.42);
- label.position.copy(pos.clone().multiplyScalar(1.22));
- label.visible = false;
-
- this.group.add(marker, ring, label);
- this.markers.push({ marker, ring, label, index: i });
- });
- }
-
- setSelected(index) {
- this.selected = index;
- this.markers.forEach((m) => {
- const on = m.index === index;
- m.ring.visible = on;
- m.label.visible = on;
- });
- }
-}
diff --git a/src/scene/timeline.js b/src/scene/timeline.js
index 6586e44..858e968 100644
--- a/src/scene/timeline.js
+++ b/src/scene/timeline.js
@@ -72,14 +72,12 @@ export class Timeline {
outline.visible = false;
card.add(outline);
- // 活页上方：主题（常显，随选中上浮）
- const name = makeTextSprite(entry.name, { fontSize: 30, color: '#e8d9b4' });
- name.scale.multiplyScalar(0.22);
+ // 活页上方：主题（常显，随选中上浮，超宽居中换行）
+ const name = makeTextSprite(entry.name, { fontSize: 17, color: '#e8d9b4', scale: 0.13, maxWidth: 1.0 });
name.position.set(x, NAME_Y, 0);
// 轴下方：时间（常显，固定不动）
- const time = makeTextSprite(entry.time, { fontSize: 22, color: '#c9a227' });
- time.scale.multiplyScalar(0.18);
+ const time = makeTextSprite(entry.time, { fontSize: 13, color: '#c9a227', scale: 0.11 });
time.position.set(x, -1.06, 0);
this.group.add(card, name, time);
diff --git a/src/styles.css b/src/styles.css
index dfb332e..2ded785 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -26,6 +26,15 @@ html, body {
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+#cesium-container {
+ position: absolute; inset: 0; width: 100%; height: 100%;
+ display: none; background: #14100d;
+}
+#cesium-container .cesium-viewer,
+#cesium-container .cesium-widget,
+#cesium-container canvas { width: 100%; height: 100%; }
+/* 隐藏左下角全部归属信息（Cesium ion logo + 影像文字） */
+#cesium-container .cesium-widget-credits { display: none !important; }
/* 气氛遮罩 */
.vignette {
diff --git a/src/textures/pages.js b/src/textures/pages.js
index de0d694..48fef40 100644
--- a/src/textures/pages.js
+++ b/src/textures/pages.js
@@ -9,7 +9,7 @@ export const TEX_W = 768;
export const TEX_H = 1075;
export const HOLE_U = [0.085, 0.24, 0.4, 0.56, 0.72, 0.855]; // 活页孔（自顶部归一化）
export const HOLE_X = 0.065; // 孔中心相对页内缘（环前交点 0.085 − 页缘空隙 0.02）
-export const HOLE_R = 0.052; // 孔半径（世界）
+export const HOLE_R = 0.03; // 孔半径（世界，略大于环丝，留出穿环空隙）
const SERIF = '"Noto Serif SC","Songti SC","STSong","SimSun",Georgia,serif';
const KAI = '"Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif';
diff --git a/src/utils/labels.js b/src/utils/labels.js
index 4d659a2..08a4d99 100644
--- a/src/utils/labels.js
+++ b/src/utils/labels.js
@@ -1,5 +1,43 @@
import * as THREE from 'three';
+// 超采样倍数：文字以更高分辨率栅格化，拉近/放大后依然清晰
+const SS = 4;
+
+// 折行：尽量均分两行（标题较短），均分不满足时逐字折行
+function wrapText(ctx, text, maxW) {
+ if (maxW === Infinity || ctx.measureText(text).width <= maxW) return [text];
+
+ let best = 1;
+ let bestDiff = Infinity;
+ for (let i = 1; i < text.length; i++) {
+ const a = ctx.measureText(text.slice(0, i)).width;
+ const b = ctx.measureText(text.slice(i)).width;
+ if (a > maxW || b > maxW) continue;
+ const diff = Math.abs(a - b);
+ if (diff < bestDiff) { bestDiff = diff; best = i; }
+ }
+ const first = text.slice(0, best);
+ const second = text.slice(best);
+ if (ctx.measureText(first).width <= maxW && ctx.measureText(second).width <= maxW) {
+ return [first, second];
+ }
+
+ // 兜底：逐字折行
+ const lines = [];
+ let line = '';
+ for (const ch of text) {
+ if (line && ctx.measureText(line + ch).width > maxW) {
+ lines.push(line);
+ line = ch;
+ } else {
+ line += ch;
+ }
+ }
+ if (line) lines.push(line);
+ if (!lines.length) lines.push('');
+ return lines;
+}
+
// 用 Canvas 生成文字精灵（始终面向相机的标签）
export function makeTextSprite(text, {
fontSize = 42,
@@ -9,36 +47,54 @@ export function makeTextSprite(text, {
padding = 24,
font = 'Georgia, "Noto Serif SC", serif',
weight = '600',
- letterSpacing = '0.08em',
+ scale = 1, // 单行文字的精灵世界高度
+ maxWidth = Infinity, // 精灵世界最大宽度，超宽则居中换行
+ lineHeight = 1.6, // 行高倍数（相对字号）
} = {}) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
- ctx.font = `${weight} ${fontSize}px ${font}`;
- const w = Math.ceil(ctx.measureText(text).width) + padding * 2;
- const h = Math.ceil(fontSize * 1.6);
- canvas.width = w;
- canvas.height = h;
+ const fontStr = `${weight} ${fontSize}px ${font}`;
+ ctx.font = fontStr;
+
+ const lineH = Math.ceil(fontSize * lineHeight);
+ // 每行文本像素预算：保证该行显示宽度 ≤ maxWidth 世界单位
+ const textBudget = maxWidth === Infinity ? Infinity : (maxWidth * lineH) / scale - padding * 2;
+
+ const lines = wrapText(ctx, text, textBudget);
+ const maxLineW = Math.max(0, ...lines.map((l) => ctx.measureText(l).width));
+ const w = Math.ceil(maxLineW) + padding * 2;
+ const h = lineH * lines.length;
+
+ canvas.width = Math.ceil(w * SS);
+ canvas.height = Math.ceil(h * SS);
const c2 = canvas.getContext('2d');
- c2.font = ctx.font;
+ c2.scale(SS, SS);
+ c2.font = fontStr;
c2.textBaseline = 'middle';
c2.textAlign = 'center';
c2.lineJoin = 'round';
- if (stroke) {
- c2.lineWidth = strokeWidth;
- c2.strokeStyle = stroke;
- c2.strokeText(text, w / 2, h / 2);
- }
- c2.fillStyle = color;
- c2.fillText(text, w / 2, h / 2);
+
+ lines.forEach((line, i) => {
+ const y = lineH * (i + 0.5);
+ if (stroke) {
+ c2.lineWidth = strokeWidth;
+ c2.strokeStyle = stroke;
+ c2.strokeText(line, w / 2, y);
+ }
+ c2.fillStyle = color;
+ c2.fillText(line, w / 2, y);
+ });
const tex = new THREE.CanvasTexture(canvas);
tex.colorSpace = THREE.SRGBColorSpace;
- tex.anisotropy = 4;
+ tex.anisotropy = 8;
+ tex.minFilter = THREE.LinearMipmapLinearFilter;
+ tex.generateMipmaps = true;
const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthTest: false });
const sprite = new THREE.Sprite(mat);
- const aspect = w / h;
- sprite.scale.set(aspect, 1, 1);
+ // 单行世界高度 = scale；多行总高度 = numLines * scale（宽度按 w/lineH 同步换算）
+ sprite.scale.set((w / lineH) * scale, lines.length * scale, 1);
return sprite;
}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..e0d4b1c
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import cesium from 'vite-plugin-cesium';
+
+export default defineConfig({
+ plugins: [cesium()],
+});