{"id":1047,"date":"2025-12-30T16:03:27","date_gmt":"2025-12-30T08:03:27","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=1047"},"modified":"2025-12-30T16:03:27","modified_gmt":"2025-12-30T08:03:27","slug":"threejs%e4%b8%89%e7%bb%b4%e5%9c%b0%e5%9b%be%e5%8f%af%e8%a7%86%e5%8c%96","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/30\/threejs%e4%b8%89%e7%bb%b4%e5%9c%b0%e5%9b%be%e5%8f%af%e8%a7%86%e5%8c%96\/","title":{"rendered":"threejs\u4e09\u7ef4\u5730\u56fe\u53ef\u89c6\u5316"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd**\u300cThree.js \u4e09\u7ef4\u5730\u56fe\u53ef\u89c6\u5316\u300d\u7cfb\u7edf\u5b9e\u6218\u6307\u5357**\uff0c\u4ece\u539f\u7406 \u2192 \u6280\u672f\u9009\u578b \u2192 \u6838\u5fc3\u5b9e\u73b0 \u2192 \u793a\u4f8b\u4ee3\u7801\uff0c\u4e00\u6b21\u8bb2\u6e05\u695a\uff0c\u9002\u5408\u4f60\u505a <strong>3D \u5730\u56fe\u3001\u53ef\u89c6\u5316\u5927\u5c4f\u3001\u57ce\u5e02\u6570\u5b57\u5b6a\u751f\u3001\u6570\u636e\u5c55\u793a<\/strong>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e00\u3001Three.js \u4e09\u7ef4\u5730\u56fe\u53ef\u89c6\u5316\u662f\u4ec0\u4e48\uff1f<\/h1>\n\n\n\n<p><strong>Three.js + \u5730\u56fe = \u81ea\u7531\u5ea6\u6700\u9ad8\u7684 3D \u5730\u7406\u53ef\u89c6\u5316\u65b9\u6848<\/strong><\/p>\n\n\n\n<p>\u5b83\u4e0d\u662f\u201c\u81ea\u5e26\u5730\u56fe\u201d\u7684\u65b9\u6848\uff0c\u800c\u662f\uff1a<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Three.js \u8d1f\u8d23\u4e09\u7ef4\u6e32\u67d3<\/strong><br><strong>\u5730\u56fe\u6570\u636e\uff08GeoJSON \/ \u74e6\u7247 \/ \u9ad8\u7a0b\uff09\u4f60\u81ea\u5df1\u63a7\u5236<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>\u6240\u4ee5\u5b83\u7279\u522b\u9002\u5408\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udf0c \u79d1\u5e7b \/ \u672a\u6765\u98ce\u5730\u56fe<\/li>\n\n\n\n<li>\ud83e\udde0 \u6570\u636e\u9a71\u52a8\u7684 3D \u57ce\u5e02<\/li>\n\n\n\n<li>\ud83d\udcca \u53ef\u89c6\u5316\u5927\u5c4f<\/li>\n\n\n\n<li>\ud83c\udfae \u6e38\u620f\u5316\u5730\u7406\u573a\u666f<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e8c\u3001Three.js \u505a\u4e09\u7ef4\u5730\u56fe\u7684\u6838\u5fc3\u601d\u8def\uff08\u5f88\u91cd\u8981\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u6838\u5fc3\u903b\u8f91\u4e00\u53e5\u8bdd\u7248<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u628a\u5730\u56fe\u5f53\u6210\u51e0\u4f55\u6a21\u578b\u6765\u6e32\u67d3<\/strong><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u89c1\u6570\u636e\u6765\u6e90<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6570\u636e\u7c7b\u578b<\/th><th>\u7528\u9014<\/th><\/tr><\/thead><tbody><tr><td>GeoJSON<\/td><td>\u884c\u653f\u533a\u8fb9\u754c<\/td><\/tr><tr><td>\u7ecf\u7eac\u5ea6<\/td><td>\u70b9\u4f4d\u6570\u636e<\/td><\/tr><tr><td>DEM \u9ad8\u7a0b<\/td><td>\u5730\u5f62\u8d77\u4f0f<\/td><\/tr><tr><td>\u5efa\u7b51\u6570\u636e<\/td><td>\u697c\u5b87\u62c9\u4f38<\/td><\/tr><tr><td>\u74e6\u7247\u5730\u56fe<\/td><td>\u5e95\u56fe<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e09\u3001Three.js \u4e09\u7ef4\u5730\u56fe\u5e38\u89c1\u5b9e\u73b0\u65b9\u5f0f\uff08\u4e3b\u6d41\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 \u65b9\u5f0f 1\uff1aGeoJSON \u2192 3D \u5730\u56fe\uff08\u6700\u5e38\u7528\uff09<\/h2>\n\n\n\n<p><strong>\u9002\u5408\uff1a\u4e2d\u56fd\u5730\u56fe \/ \u7701\u5e02\u5730\u56fe \/ \u533a\u57df\u5730\u56fe<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9e\u73b0\u6b65\u9aa4<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u52a0\u8f7d GeoJSON<\/li>\n\n\n\n<li>\u7ecf\u7eac\u5ea6 \u2192 \u5e73\u9762\u5750\u6807<\/li>\n\n\n\n<li>Shape \u62c9\u4f38\u6210 3D<\/li>\n\n\n\n<li>\u52a0\u5149\u7167\u3001\u6750\u8d28\u3001\u52a8\u753b<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u6548\u679c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>3D \u4e2d\u56fd\u5730\u56fe<\/li>\n\n\n\n<li>\u884c\u653f\u533a\u7acb\u4f53\u8fb9\u754c<\/li>\n\n\n\n<li>\u6570\u636e\u9a71\u52a8\u9ad8\u5ea6 \/ \u989c\u8272<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 \u65b9\u5f0f 2\uff1aThree.js + \u5730\u56fe\u74e6\u7247\uff08\u66f4\u771f\u5b9e\uff09<\/h2>\n\n\n\n<p><strong>\u9002\u5408\uff1a\u771f\u5b9e\u57ce\u5e02 \/ \u536b\u661f\u5730\u56fe<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mapbox \u74e6\u7247<\/li>\n\n\n\n<li>\u9ad8\u5fb7 \/ OpenStreetMap<\/li>\n\n\n\n<li>\u5c06\u74e6\u7247\u8d34\u6210 Plane<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udccc \u96be\u70b9\uff1a<br>\u5750\u6807\u8f6c\u6362 + \u5c42\u7ea7\u63a7\u5236<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 \u65b9\u5f0f 3\uff1aThree.js + \u9ad8\u7a0b\u5730\u5f62\uff08\u9ad8\u7aef\uff09<\/h2>\n\n\n\n<p><strong>\u9002\u5408\uff1a\u5c71\u5730 \/ \u5730\u7406 \/ \u6570\u5b57\u5b6a\u751f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>DEM \u6570\u636e<\/li>\n\n\n\n<li>PlaneGeometry + \u9ad8\u5ea6\u8d34\u56fe<\/li>\n\n\n\n<li>\u9876\u70b9\u4f4d\u79fb<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u56db\u3001\u6838\u5fc3\u6280\u672f\u70b9\uff08\u4e00\u5b9a\u8981\u61c2\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u7ecf\u7eac\u5ea6 \u2192 Three.js \u5750\u6807<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction lngLatToVector3(lng, lat) {\n  const x = lng * 100;\n  const y = lat * 100;\n  return new THREE.Vector3(x, -y, 0);\n}\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u5b9e\u9645\u9879\u76ee\u4e00\u822c\u8981 <strong>\u58a8\u5361\u6258\u6295\u5f71<\/strong> \u6216 <strong>Mapbox \u6295\u5f71<\/strong><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 GeoJSON \u62c9\u4f38\u6210 3D \u5730\u56fe\uff08\u6838\u5fc3\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst shape = new THREE.Shape(points);\nconst geometry = new THREE.ExtrudeGeometry(shape, {\n  depth: 10,\n  bevelEnabled: false\n});\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u5149\u7167 &amp; \u6750\u8d28\uff08\u51b3\u5b9a\u8d28\u611f\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(100, 200, 300);\nscene.add(light);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 \u6570\u636e\u9a71\u52a8\u9ad8\u5ea6\uff08\u53ef\u89c6\u5316\u5173\u952e\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ngeometry.translate(0, 0, value * 5);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e94\u3001\u5b8c\u6574\u793a\u4f8b\uff1aThree.js 3D \u4e2d\u56fd\u5730\u56fe\uff08\u7b80\u5316\u7248\uff09<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script&gt;\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(45, innerWidth\/innerHeight, 1, 10000);\ncamera.position.set(0, -200, 300);\n\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(innerWidth, innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n\/\/ \u5149\u7167\nscene.add(new THREE.AmbientLight(0x404040));\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(200, 200, 300);\nscene.add(light);\n\n\/\/ \u793a\u4f8b\u533a\u57df\nconst shape = new THREE.Shape(&#x5B;\n  new THREE.Vector2(-50, -50),\n  new THREE.Vector2(50, -50),\n  new THREE.Vector2(50, 50),\n  new THREE.Vector2(-50, 50)\n]);\n\nconst geometry = new THREE.ExtrudeGeometry(shape, {\n  depth: 20,\n  bevelEnabled: false\n});\n\nconst material = new THREE.MeshStandardMaterial({\n  color: 0x1e90ff\n});\n\nconst mesh = new THREE.Mesh(geometry, material);\nscene.add(mesh);\n\nfunction animate() {\n  requestAnimationFrame(animate);\n  mesh.rotation.z += 0.002;\n  renderer.render(scene, camera);\n}\nanimate();\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u516d\u3001Three.js \u5730\u56fe\u5e38\u89c1\u89c6\u89c9\u6548\u679c<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udfe6 \u884c\u653f\u533a\u7acb\u4f53\u62c9\u4f38<\/li>\n\n\n\n<li>\ud83c\udf08 \u6570\u503c\u6e10\u53d8\u7740\u8272<\/li>\n\n\n\n<li>\u2728 \u8fb9\u754c\u53d1\u5149\u7ebf<\/li>\n\n\n\n<li>\ud83d\ude80 \u98de\u7ebf\u52a8\u753b<\/li>\n\n\n\n<li>\ud83d\udd35 \u70b9\u4f4d\u6ce2\u7eb9<\/li>\n\n\n\n<li>\ud83d\udcca \u67f1\u72b6 \/ \u70ed\u529b\u53e0\u52a0<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e03\u3001Three.js vs Cesium vs Mapbox<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6848<\/th><th>\u4f18\u70b9<\/th><th>\u7f3a\u70b9<\/th><\/tr><\/thead><tbody><tr><td>Three.js<\/td><td>\u81ea\u7531\u5ea6\u6700\u9ad8<\/td><td>\u5730\u7406\u8981\u81ea\u5df1\u7b97<\/td><\/tr><tr><td>Cesium<\/td><td>\u4e13\u4e1a GIS<\/td><td>\u5b66\u4e60\u6210\u672c\u9ad8<\/td><\/tr><tr><td>Mapbox<\/td><td>\u5feb &amp; \u7f8e<\/td><td>\u81ea\u5b9a\u4e49\u53d7\u9650<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\ud83d\udc49 <strong>\u79d1\u5e7b \/ \u5927\u5c4f \/ \u521b\u610f\u5c55\u793a\uff1a\u9009 Three.js<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd**\u300cThree.js \u4e09\u7ef4\u5730\u56fe\u53ef\u89c6\u5316\u300d\u7cfb\u7edf\u5b9e\u6218\u6307\u5357**\uff0c\u4ece\u539f\u7406 \u2192&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/30\/threejs%e4%b8%89%e7%bb%b4%e5%9c%b0%e5%9b%be%e5%8f%af%e8%a7%86%e5%8c%96\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1047","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=1047"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1047\/revisions"}],"predecessor-version":[{"id":1048,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1047\/revisions\/1048"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=1047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=1047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=1047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}