{"id":272,"date":"2025-02-03T22:11:00","date_gmt":"2025-02-03T14:11:00","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=272"},"modified":"2026-06-07T22:14:06","modified_gmt":"2026-06-07T14:14:06","slug":"%e5%9f%ba%e6%9c%ac3d%e5%88%b6%e4%bd%9c%e5%88%9d%e8%af%86","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2025\/02\/03\/%e5%9f%ba%e6%9c%ac3d%e5%88%b6%e4%bd%9c%e5%88%9d%e8%af%86\/","title":{"rendered":"\u57fa\u672c3D\u5236\u4f5c\u521d\u8bc6"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u57fa\u7840\u5b9e\u73b0<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script setup lang=\"ts\">\nimport * as THREE from 'three'\nimport { ref, onMounted } from 'vue'\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\/\/\u521d\u59cb\u5316\u573a\u666f\nconst scene = new THREE.Scene();\n\n\/\/\u521b\u5efa\u76f8\u673a\nconst camera = new THREE.PerspectiveCamera(\n  75, \n  window.innerWidth \/ window.innerHeight, \n  0.1, \n  1000\n);\n\n\/\/\u8bbe\u7f6e\u76f8\u673a\u4f4d\u7f6e\ncamera.position.z = 30;\n\n\/\/ \u521b\u5efa\u51e0\u4f55\u4f53\nconst geometry = new THREE.BoxGeometry( 10, 10, 10 );\n\/\/\u521b\u5efa\u6750\u8d28\nconst material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\n\/\/\u521b\u5efa\u7f51\u683c\nconst cube  = new THREE.Mesh( geometry, material );\nscene.add( cube );\n\n\/\/\u8f68\u9053\u63a7\u5236\u5668\nlet controls: OrbitControls;\n\n\/\/\u521b\u5efa\u6e32\u67d3\u5668\nconst renderer = new THREE.WebGLRenderer();\n\/\/\u8bbe\u7f6e\u6e32\u67d3\u5668\u5c3a\u5bf8\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\nconst container = ref&lt;HTMLDivElement | null>(null);\n\n\/\/\u6dfb\u52a0\u5750\u6807\u8f85\u52a9\u5668\nconst axesHelper = new THREE.AxesHelper( 20 );\nscene.add( axesHelper );\n\nconst render = () => {\n  renderer.render(scene, camera);\n  requestAnimationFrame(render);\n}\n\nonMounted(() => {\n  if (container.value) {\n    \/\/\u6dfb\u52a0\u8f68\u9053\u63a7\u5236\u5668\n    controls = new OrbitControls( camera, renderer.domElement );\n    controls.enableDamping = true;\n    controls.update();\n    \n    container.value.appendChild(renderer.domElement);\n    render();\n  }\n});\n\n\n&lt;\/script>\n\n&lt;template>\n  &lt;div ref = \"container\" class=\"container\">\n\n  &lt;\/div>\n&lt;\/template>\n&lt;style lang=\"scss\">\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n.container {\n  width: 100vh;\n  height: 100vh;\n}\n&lt;\/style><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u8f68\u9053\u67e5\u770b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/threejs.org\/docs\/?q=bitCont#OrbitControls\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/threejs.org\/docs\/?q=bitCont#OrbitControls<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5750\u6807\u8f85\u52a9\u5668<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/threejs.org\/docs\/?q=AxesHelper#AxesHelper\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/threejs.org\/docs\/?q=AxesHelper#AxesHelper<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u57fa\u7840\u5b9e\u73b0 \u8f68\u9053\u67e5\u770b https:\/\/threejs..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,11],"tags":[],"class_list":["post-272","post","type-post","status-publish","format-standard","hentry","category-js","category-front"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"<a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/js\/\" rel=\"category tag\">JS<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/\" rel=\"category tag\">\u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":2,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/272\/revisions\/274"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}