{"@attributes":{"version":"2.0"},"channel":{"title":"Blah Blah Booooom","link":"https:\/\/zhuzi.dev\/","description":"Personal Blog of Bamboo\/Zhuzi\/\u7af9\u5b50","image":{"title":"Blah Blah Booooom","url":"https:\/\/zhuzi.dev\/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E","link":"https:\/\/zhuzi.dev\/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"},"generator":"Hugo -- gohugo.io","language":"en","managingEditor":"zhuzi.mn#gmail.com (bambooom)","webMaster":"zhuzi.mn#gmail.com (bambooom)","lastBuildDate":"Thu, 03 Apr 2025 00:00:00 +0000","item":[{"title":"Three.js Journey Notes 6 - Shaders Part1","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-6-shaders-part1\/","pubDate":"Thu, 03 Apr 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-6-shaders-part1\/","description":"<h2 id=\"what-is-a-shader\">What is a shader<\/h2>\n<ul>\n<li>one of the main components of WebGL<\/li>\n<li>a program written in <strong>GLSL<\/strong><\/li>\n<li>sent to GPU<\/li>\n<li>Position each vertex of a geometry<\/li>\n<li>Colorize each visible <em>&ldquo;pixel&rdquo;<\/em> (accurately should be using term <em>&ldquo;fragment&rdquo;<\/em>) of that geometry<\/li>\n<\/ul>\n<blockquote>\n<p>Then we send a lot of data to the shader such as the vertices coordinates, the mesh transformation, information about the camera and its field of view, parameters like the color, the textures, the lights, the fog, etc. The GPU then processes all of this data following the shader instructions, and our geometry appears in the render.<\/p>","content":"<![CDATA[<h2 id=\"what-is-a-shader\">What is a shader<\/h2>\n<ul>\n<li>one of the main components of WebGL<\/li>\n<li>a program written in <strong>GLSL<\/strong><\/li>\n<li>sent to GPU<\/li>\n<li>Position each vertex of a geometry<\/li>\n<li>Colorize each visible <em>&ldquo;pixel&rdquo;<\/em> (accurately should be using term <em>&ldquo;fragment&rdquo;<\/em>) of that geometry<\/li>\n<\/ul>\n<blockquote>\n<p>Then we send a lot of data to the shader such as the vertices coordinates, the mesh transformation, information about the camera and its field of view, parameters like the color, the textures, the lights, the fog, etc. The GPU then processes all of this data following the shader instructions, and our geometry appears in the render.<\/p>\n<\/blockquote>\n<p>Two types of shaders<\/p>\n<ul>\n<li><strong>Vertex shader<\/strong>\n<ul>\n<li>position the vertices of the geometry<\/li>\n<li>send vertices positions, mesh transformations (its position, rotation, scale), camera information (its position, rotation, and field of view) to GPU<\/li>\n<li>GPU use these data to project the vertices on a 2D space aka our canvas<\/li>\n<li>data changes between vertices called <strong>attribute<\/strong>, like vertex position\n<ul>\n<li>attribute can only be used in vertex shader<\/li>\n<\/ul>\n<\/li>\n<li>data doesn&rsquo;t change between vertices called <strong>uniform<\/strong>, like position of the mesh\n<ul>\n<li>uniform can be used in both vertex shader and fragment shader<\/li>\n<\/ul>\n<\/li>\n<li>vertex shader happens first, and the fragment shader is proceeded<\/li>\n<\/ul>\n<\/li>\n<li><strong>Fragment shader<\/strong>\n<ul>\n<li>color each visible fragment of the geometry<\/li>\n<li>send data like color by using <strong>uniform<\/strong>, or<\/li>\n<li><em>send data from vertex shader to fragment shader<\/em>, this kind of data is called <strong>varying<\/strong><\/li>\n<li>\u4e2d\u95f4\u72b6\u6001\u4f1a get interpolated\uff0c\u6bd4\u5982\u4e09\u89d2\u5f62\u6bcf\u4e2a\u9876\u70b9\u7684 color \u4e0d\u4e00\u6837\u7684\u8bdd\uff0c\u4e2d\u95f4\u7684\u70b9\u7684\u989c\u8272\u5c31\u4f1a\u6df7\u5408\u4e09\u79cd\u989c\u8272\u3002\u4e5f\u4e0d\u4ec5\u662f color \u6709\u8fd9\u79cd\u6548\u679c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/shader-basic.png\" alt=\"\"  \/>\n\n<\/p>\n<p>Why creating our own shaders<\/p>\n<ul>\n<li>Three.js materials are limited<\/li>\n<li>shaders can be very simple and performant<\/li>\n<li>can apply post-process<\/li>\n<\/ul>\n<h2 id=\"rawshadermaterial\"><code>RawShaderMaterial<\/code><\/h2>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RawShaderMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">vertexShader<\/span><span class=\"o\">:<\/span> <span class=\"sb\">`\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        uniform mat4 projectionMatrix;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        uniform mat4 viewMatrix;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        uniform mat4 modelMatrix;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        attribute vec3 position;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        void main()\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        {\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">            gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        }\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">    `<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">fragmentShader<\/span><span class=\"o\">:<\/span> <span class=\"sb\">`\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        precision mediump float;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        void main()\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        {\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">        }\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"sb\">    `<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>inside <code>vertexShader<\/code> and <code>fragmentShader<\/code> is the GLSL code for shaders.<\/p>\n<p>better to use separate GLSL file for this, add plugins like <a href=\"https:\/\/www.npmjs.com\/package\/vite-plugin-glsl\">vite-plugin-glsl<\/a> to make the project can import GLSL file<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"nx\">testVertexShader<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;.\/shaders\/test\/vertex.glsl&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"nx\">testFragmentShader<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;.\/shaders\/test\/fragment.glsl&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RawShaderMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">vertexShader<\/span><span class=\"o\">:<\/span> <span class=\"nx\">testVertexShader<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">fragmentShader<\/span><span class=\"o\">:<\/span> <span class=\"nx\">testFragmentShader<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"glsl-basics\">GLSL basics<\/h2>\n<ul>\n<li>stands for OpenGL Shading Language<\/li>\n<li>types language, close to C language<\/li>\n<li>no way to log values<\/li>\n<li>indentation not essential<\/li>\n<li>semicolon is required, forgetting one will probably result in compilation error<\/li>\n<li>Variable\n<ul>\n<li><code>float<\/code> <code>int<\/code> <code>bool<\/code> <code>vec2<\/code> <code>vec3<\/code> <code>vec4<\/code><\/li>\n<\/ul>\n<\/li>\n<li>functions<\/li>\n<li>built-in native functions: as\u00a0<code>sin<\/code>,\u00a0<code>cos<\/code>,\u00a0<code>max<\/code>,\u00a0<code>min<\/code>,\u00a0<code>pow<\/code>,\u00a0<code>exp<\/code>,\u00a0<code>mod<\/code>,\u00a0<code>clamp<\/code>, but also very practical functions like\u00a0<code>cross<\/code>,\u00a0<code>dot<\/code>,\u00a0<code>mix<\/code>,\u00a0<code>step<\/code>,\u00a0<code>smoothstep<\/code>,\u00a0<code>length<\/code>,\u00a0<code>distance<\/code>,\u00a0<code>reflect<\/code>,\u00a0<code>refract<\/code>,\u00a0<code>normalize<\/code><\/li>\n<li>Docs:\n<ul>\n<li><a href=\"https:\/\/shaderific.com\/glsl.html\">Shaderific for OpenGL<\/a><\/li>\n<li><a href=\"https:\/\/registry.khronos.org\/OpenGL-Refpages\/gl4\/html\/indexflat.php\">OpenGL 4.x Reference Pages<\/a><\/li>\n<li><a href=\"https:\/\/thebookofshaders.com\/\">The Book of Shaders<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">a<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">b<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">c<\/span> <span class=\"o\">=<\/span> <span class=\"n\">a<\/span> <span class=\"o\">*<\/span> <span class=\"n\">b<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">int<\/span> <span class=\"n\">d<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">e<\/span> <span class=\"o\">=<\/span> <span class=\"n\">b<\/span> <span class=\"o\">*<\/span> <span class=\"k\">float<\/span><span class=\"p\">(<\/span><span class=\"n\">d<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">bool<\/span> <span class=\"n\">foo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">true<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">bool<\/span> <span class=\"n\">bar<\/span> <span class=\"o\">=<\/span> <span class=\"k\">false<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec2<\/span> <span class=\"n\">foo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec2<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ store 2 coordinates x, y<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ foo.x = 1.5;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ foo.y = 3.0;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"n\">foo<\/span> <span class=\"o\">*=<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ will get (2.0, 4.0)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec3<\/span> <span class=\"n\">purpleColor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec3<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"n\">purpleColor<\/span><span class=\"p\">.<\/span><span class=\"n\">r<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ can use r, g, b (alias)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"n\">purpleColor<\/span><span class=\"p\">.<\/span><span class=\"n\">b<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ create vec3 from vec2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec2<\/span> <span class=\"n\">foo2<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec2<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec3<\/span> <span class=\"n\">bar<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec3<\/span><span class=\"p\">(<\/span><span class=\"n\">foo2<\/span><span class=\"p\">,<\/span> <span class=\"mf\">3.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ create vec2 from vec3<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec3<\/span> <span class=\"n\">foo3<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec3<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">3.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec2<\/span> <span class=\"n\">bar2<\/span> <span class=\"o\">=<\/span> <span class=\"n\">foo<\/span><span class=\"p\">.<\/span><span class=\"n\">xy<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ bar2 will be (x,y), order matters<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ vec3, xyzw, rgba<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">vec4<\/span> <span class=\"n\">foo4<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">3.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">4.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">bar3<\/span> <span class=\"o\">=<\/span> <span class=\"n\">foo4<\/span><span class=\"p\">.<\/span><span class=\"n\">w<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 4th value. same as foo4.a<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ functions<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">loremIpsum<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"k\">float<\/span> <span class=\"n\">a<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"k\">float<\/span> <span class=\"n\">b<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">2.0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"k\">return<\/span> <span class=\"n\">a<\/span> <span class=\"o\">+<\/span> <span class=\"n\">b<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ use function<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">float<\/span> <span class=\"n\">result<\/span> <span class=\"o\">=<\/span> <span class=\"n\">loremIpsum<\/span><span class=\"p\">();<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"understanding-the-vertex-shader\">Understanding the vertex shader<\/h2>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"n\">mat4<\/span> <span class=\"n\">projectionMatrix<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"n\">mat4<\/span> <span class=\"n\">viewMatrix<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"n\">mat4<\/span> <span class=\"n\">modelMatrix<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">attribute<\/span> <span class=\"k\">vec3<\/span> <span class=\"n\">position<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">gl_Position<\/span> <span class=\"o\">=<\/span> <span class=\"n\">projectionMatrix<\/span> <span class=\"o\">*<\/span> <span class=\"n\">viewMatrix<\/span> <span class=\"o\">*<\/span> <span class=\"n\">modelMatrix<\/span> <span class=\"o\">*<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"n\">position<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ gl_Position.x += 0.5;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ gl_Position.y += 0.5;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p><code>main<\/code> function will be called automatically.\nThe goal of the instructions in <code>main<\/code> function is to set <code>gl_Position<\/code> properly. And at the end, it&rsquo;s a <code>vec4<\/code>. We can access its <code>x<\/code> <code>y<\/code> <code>z<\/code> <code>w<\/code> properties.<\/p>\n<ul>\n<li>First retrieve the vertex <code>position<\/code> with <code>attribute vec3 position;<\/code><\/li>\n<li>it can be applied for each vertex as <code>gl_Position = \/* ... *\/ vec4(position, 1.0);<\/code><\/li>\n<li>3 matrices transformations\n<ul>\n<li><code>modelMatrix<\/code> apply transformations relative to Mesh. If we scale, rotate or move the Mesh<\/li>\n<li><code>viewMatrix<\/code> apply transformations relative to camera. If we rotate the camera to the left, the vertices should be on the right, if we move the camera in direction of the Mesh, the vertices should get bigger, etc<\/li>\n<li><code>projectionMatrix<\/code> finally transform our coordinations into the final clip space coordinations<\/li>\n<li>read more: <a href=\"https:\/\/learnopengl.com\/Getting-started\/Coordinate-Systems\">LearnOpenGL - Coordinate Systems<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Transforming our plane like wave  via using <code>sin<\/code> on <code>z<\/code><\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">vec4<\/span> <span class=\"n\">modelPosition<\/span> <span class=\"o\">=<\/span> <span class=\"n\">modelMatrix<\/span> <span class=\"o\">*<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"n\">position<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">z<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">sin<\/span><span class=\"p\">(<\/span><span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">x<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">10.0<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"understanding-the-fragment-shader\">Understanding the Fragment Shader<\/h2>\n<p>comes after vertex shader<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ instruction to decide how precise a float be<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ highp: preformance hit and might not work on some devices<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ mediump<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ lowp: can create bugs by the lack of precision<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">precision<\/span> <span class=\"k\">mediump<\/span> <span class=\"k\">float<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"n\">gl_FragColor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>same as vertex shader, the goal is to set <code>gl_FragColor<\/code>, it&rsquo;s also a <code>vec4<\/code> which is corresponding to color channels (<code>r<\/code>, <code>g<\/code>, <code>b<\/code>, <code>a<\/code>), each property goes from 0.0 to 1.0.<\/p>\n<p>If alpha below 1.0, we need to set <code>transparent: true<\/code> in <code>RawShaderMaterial<\/code>.<\/p>\n<h2 id=\"attributes---only-in-vertex-shader\">Attributes - only in Vertex Shader<\/h2>\n<p>For three.js geometry, there is already one attribute named <code>position<\/code> that contains the <code>vec3<\/code> coordinates of each vertex.<\/p>\n<p>Adding a custom attribute:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">geometry<\/span><span class=\"p\">.<\/span><span class=\"nx\">attributes<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">count<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">randoms<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Float32Array<\/span><span class=\"p\">(<\/span><span class=\"nx\">count<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">for<\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">randoms<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">random<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ we name the attribute as `aRandom`\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">geometry<\/span><span class=\"p\">.<\/span><span class=\"nx\">setAttribute<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;aRandom&#39;<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BufferAttribute<\/span><span class=\"p\">(<\/span><span class=\"nx\">randoms<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">))<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>then you can use is in vertex shader<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ vertex.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ define it<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">attribute<\/span> <span class=\"k\">float<\/span> <span class=\"n\">aRandom<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">z<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">aRandom<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ apply on y to make the plane with random spikes<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"varyings---send-data-from-vertex-shader-to-fragment-shader\">Varyings - send data from Vertex Shader to Fragment Shader<\/h2>\n<p>define a varying called <code>vRandom<\/code> and assign it with <code>aRandom<\/code> in vertex shader, then <code>vRandom<\/code> can be used in fragment shader.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ vertex.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">attribute<\/span> <span class=\"k\">float<\/span> <span class=\"n\">aRandom<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">float<\/span> <span class=\"n\">vRandom<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">vRandom<\/span> <span class=\"o\">=<\/span> <span class=\"n\">aRandom<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ fragment.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">precision<\/span> <span class=\"k\">mediump<\/span> <span class=\"k\">float<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">float<\/span> <span class=\"n\">vRandom<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">gl_FragColor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span> <span class=\"n\">vRandom<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Then the spikes on the plane is colored, and values between the vertices are <strong>interpolated<\/strong> - If the GPU is drawing a fragment right between two vertices \u2014one having a varying of\u00a0<code>1.0<\/code>\u00a0and the other having a varying of\u00a0<code>0.0<\/code>\u2014the fragment value will be\u00a0<code>0.5<\/code>.<\/p>\n<h2 id=\"uniforms---send-data-from-js-to-shader-both\">Uniforms - send data from JS to shader, both<\/h2>\n<p>Add custom uniforms to material:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RawShaderMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">vertexShader<\/span><span class=\"o\">:<\/span> <span class=\"nx\">testVertexShader<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">fragmentShader<\/span><span class=\"o\">:<\/span> <span class=\"nx\">testFragmentShader<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">uniforms<\/span><span class=\"o\">:<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">uFrequency<\/span><span class=\"o\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector2<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">)<\/span> <span class=\"p\">},<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">uTime<\/span><span class=\"o\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">},<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">uColor<\/span><span class=\"o\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Color<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;orange&#39;<\/span><span class=\"p\">)<\/span> <span class=\"p\">},<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>and also update <code>uTime<\/code> in tick function:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">elapsedTime<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">clock<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElapsedTime<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ Update material\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">uniforms<\/span><span class=\"p\">.<\/span><span class=\"nx\">uTime<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">elapsedTime<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Then we can use it in shaders<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ vertex.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"k\">vec2<\/span> <span class=\"n\">uFrequency<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">z<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">sin<\/span><span class=\"p\">(<\/span><span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">x<\/span> <span class=\"o\">*<\/span> <span class=\"n\">uFrequency<\/span><span class=\"p\">.<\/span><span class=\"n\">x<\/span> <span class=\"o\">+<\/span> <span class=\"n\">uTime<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">z<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">sin<\/span><span class=\"p\">(<\/span><span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">y<\/span> <span class=\"o\">*<\/span> <span class=\"n\">uFrequency<\/span><span class=\"p\">.<\/span><span class=\"n\">y<\/span> <span class=\"o\">+<\/span> <span class=\"n\">uTime<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>The plane is animated like a flag wave with flying wind<\/p>\n<p>Also we can change the color in fragment shader:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ fragment.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">precision<\/span> <span class=\"k\">mediump<\/span> <span class=\"k\">float<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"k\">vec3<\/span> <span class=\"n\">uColor<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">gl_FragColor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">vec4<\/span><span class=\"p\">(<\/span><span class=\"n\">uColor<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"applying-texture\">Applying Texture<\/h3>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">flagTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/textures\/flag-french.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RawShaderMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">uniforms<\/span><span class=\"o\">:<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>        <span class=\"nx\">uTexture<\/span><span class=\"o\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">flagTexture<\/span> <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Texture can also be used as a uniform, and we need the UV coordinates to make the texture applied accordingly.\n<code>uv<\/code> is attributes already defined in <code>geometry.attributes.uv<\/code>, we can retrieve it directly.<\/p>\n<p>So we need to retrieve the attribute <code>uv<\/code> and assign it to another varying in vertex shader, and then fragment shader can use the varying to apply on texture.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ vertex.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">attribute<\/span> <span class=\"k\">vec2<\/span> <span class=\"n\">uv<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">vec2<\/span> <span class=\"n\">vUv<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">vUv<\/span> <span class=\"o\">=<\/span> <span class=\"n\">uv<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ fragment.glsl<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">precision<\/span> <span class=\"k\">mediump<\/span> <span class=\"k\">float<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"k\">vec3<\/span> <span class=\"n\">uColor<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">uniform<\/span> <span class=\"k\">sampler2D<\/span> <span class=\"n\">uTexture<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">vec2<\/span> <span class=\"n\">vUv<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">vec4<\/span> <span class=\"n\">textureColor<\/span> <span class=\"o\">=<\/span> <span class=\"n\">texture2D<\/span><span class=\"p\">(<\/span><span class=\"n\">uTexture<\/span><span class=\"p\">,<\/span> <span class=\"n\">vUv<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">gl_FragColor<\/span> <span class=\"o\">=<\/span> <span class=\"n\">textureColor<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"color-variations---as-shadows-not-accurate\">Color variations - as shadows (not accurate)<\/h2>\n<p>Store the wind elevation in a variable in vertex shader and send it to fragment shader:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">float<\/span> <span class=\"n\">vElevation<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">float<\/span> <span class=\"n\">elevation<\/span> <span class=\"o\">=<\/span> <span class=\"n\">sin<\/span><span class=\"p\">(<\/span><span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">x<\/span> <span class=\"o\">*<\/span> <span class=\"n\">uFrequency<\/span><span class=\"p\">.<\/span><span class=\"n\">x<\/span> <span class=\"o\">-<\/span> <span class=\"n\">uTime<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">elevation<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">sin<\/span><span class=\"p\">(<\/span><span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">y<\/span> <span class=\"o\">*<\/span> <span class=\"n\">uFrequency<\/span><span class=\"p\">.<\/span><span class=\"n\">y<\/span> <span class=\"o\">-<\/span> <span class=\"n\">uTime<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">modelPosition<\/span><span class=\"p\">.<\/span><span class=\"n\">z<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">elevation<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">vElevation<\/span> <span class=\"o\">=<\/span> <span class=\"n\">elevation<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Then use <code>vElevation<\/code> in fragment shader, use it to change r, g, and b properties of textureColor:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-glsl\" data-lang=\"glsl\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">varying<\/span> <span class=\"k\">float<\/span> <span class=\"n\">vElevation<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">void<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">vec4<\/span> <span class=\"n\">textureColor<\/span> <span class=\"o\">=<\/span> <span class=\"n\">texture2D<\/span><span class=\"p\">(<\/span><span class=\"n\">uTexture<\/span><span class=\"p\">,<\/span> <span class=\"n\">vUv<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">textureColor<\/span><span class=\"p\">.<\/span><span class=\"n\">rgb<\/span> <span class=\"o\">*=<\/span> <span class=\"n\">vElevation<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">2.0<\/span> <span class=\"o\">+<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"n\">gl_FragColor<\/span> <span class=\"o\">=<\/span> <span class=\"n\">textureColor<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Then the brightness variations on the flag as if there is light and shadows.<\/p>\n<h2 id=\"shadermaterial\"><code>ShaderMaterial<\/code><\/h2>\n<p>It&rsquo;s similar to <code>RawShaderMaterial<\/code> with pre-built uniforms and attributes in the shader codes. We can remove the following:<\/p>\n<ul>\n<li><code>uniform mat4 projectionMatrix;<\/code><\/li>\n<li><code>uniform mat4 viewMatrix;<\/code><\/li>\n<li><code>uniform mat4 modelMatrix;<\/code><\/li>\n<li><code>attribute vec3 position;<\/code><\/li>\n<li><code>attribute vec2 uv;<\/code><\/li>\n<li><code>precision mediump float;<\/code><\/li>\n<\/ul>\n<h2 id=\"debugging-tip\">Debugging Tip<\/h2>\n<p>Cannot log data, so need to check the compilation error details, or read the shader code.<\/p>\n<p>Another solution is use <code>gl_FragColor<\/code> to test the values on screen.<\/p>\n<p>Other refs:<\/p>\n<ul>\n<li>The Book of Shaders:\u00a0<a href=\"https:\/\/thebookofshaders.com\/\">https:\/\/thebookofshaders.com\/<\/a><\/li>\n<li>ShaderToy:\u00a0<a href=\"https:\/\/www.shadertoy.com\/\">https:\/\/www.shadertoy.com\/<\/a><\/li>\n<li>The Art of Code Youtube Channel:\u00a0<a href=\"https:\/\/www.youtube.com\/channel\/UCcAlTqd9zID6aNX3TzwxJXg\">https:\/\/www.youtube.com\/channel\/UCcAlTqd9zID6aNX3TzwxJXg<\/a><\/li>\n<\/ul>\n]]>"},{"title":"Three.js Journey Notes 5 - Advanced Techniques Part3","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-5-advanced-techniques-part3\/","pubDate":"Mon, 17 Mar 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-5-advanced-techniques-part3\/","description":"<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<\/ul>\n<h2 id=\"realistic-render\">Realistic Render<\/h2>\n<h3 id=\"tone-mapping\">Tone Mapping<\/h3>\n<p>intends to convert High Dynamic Range (HDR) values to Low Dynamic Range (LDR) values.\nTone mapping in Three.js will actually fake the process of converting LDR to HDR even if the colors aren&rsquo;t HDR resulting in a very realistic render.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Tone mapping\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">toneMapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">ACESFilmicToneMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ adjust exposure, influencing the amount of light allowed into the scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ higher make the scene more bright\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">toneMappingExposure<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>There are multiple possible values:<\/p>","content":"<![CDATA[<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<\/ul>\n<h2 id=\"realistic-render\">Realistic Render<\/h2>\n<h3 id=\"tone-mapping\">Tone Mapping<\/h3>\n<p>intends to convert High Dynamic Range (HDR) values to Low Dynamic Range (LDR) values.\nTone mapping in Three.js will actually fake the process of converting LDR to HDR even if the colors aren&rsquo;t HDR resulting in a very realistic render.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Tone mapping\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">toneMapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">ACESFilmicToneMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ adjust exposure, influencing the amount of light allowed into the scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ higher make the scene more bright\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">toneMappingExposure<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>There are multiple possible values:<\/p>\n<ul>\n<li><code>THREE.NoToneMapping<\/code>\u00a0(default)<\/li>\n<li><code>THREE.LinearToneMapping<\/code><\/li>\n<li><code>THREE.ReinhardToneMapping<\/code> (washed-out colors, high level of realism)<\/li>\n<li><code>THREE.CineonToneMapping<\/code><\/li>\n<li><code>THREE.ACESFilmicToneMapping<\/code><\/li>\n<\/ul>\n<h3 id=\"antialiasing\">Antialiasing<\/h3>\n<blockquote>\n<p>We call aliasing an artifact that might appear in some situations where we can see a stair-like effect, usually on the edge of the geometries. (\u952f\u9f7f\u8fb9\u7f18)<\/p>\n<\/blockquote>\n<ul>\n<li>Easy solution will be increase the renderer&rsquo;s resolution. It&rsquo;s called <strong>super sampling (SSAA)<\/strong> or fullscreen <strong>sampling (FSAA)<\/strong>. But it can result in performance issues.<\/li>\n<li>Other solution: <strong>multi sampling (MSAA)<\/strong>, render multiple values per pixel (usually 4) only for geometries edges.<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">renderer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">WebGLRenderer<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">canvas<\/span><span class=\"o\">:<\/span> <span class=\"nx\">canvas<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">antialias<\/span><span class=\"o\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"c1\">\/\/ do this will enable the MSAA\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"shadows\">Shadows<\/h3>\n<p>Environment map is like a light coming from every direct, it can&rsquo;t cast shadows.\nWe need to add another light which can roughly matched the lighting of environment map and cast the shadows.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Shadows\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">enabled<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">PCFSoftShadowMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ for example add directional light to cast shadow\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Directional light\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">directionalLight<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">DirectionalLight<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;#ffffff&#39;<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ enable shadows of directional light\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">castShadow<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Target\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">updateWorldMatrix<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">far<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">15<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ increase shadow map size to be more realistic and precise shadows\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ directionalLight.shadow.mapSize.set(1024, 1024) \/\/ shadow will be sharp, can be lower to 5112x512\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapSize<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mi\">512<\/span><span class=\"p\">,<\/span> <span class=\"mi\">512<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ will get more blurry shadow, look better and improve the performance\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ activase shadows on all the meshes of the imported modal\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">updateAllMaterials<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">traverse<\/span><span class=\"p\">((<\/span><span class=\"nx\">child<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">child<\/span><span class=\"p\">.<\/span><span class=\"nx\">isMesh<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"nx\">child<\/span><span class=\"p\">.<\/span><span class=\"nx\">castShadow<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"nx\">child<\/span><span class=\"p\">.<\/span><span class=\"nx\">receiveShadow<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>&ldquo;Shadow acne&rdquo;\uff08\u9634\u5f71\u5931\u771f\uff0c\u9634\u5f71\u6697\u6591\uff09 can occur on both smooth and flat surfaces for precision reasons when calculating if the surface is in the shadow or not. Usually caused by not enough resolution. We need to use shadow bias to fix it.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ `normalBias`\u00a0usually helps for rounded surfaces.\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">normalBias<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.027<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ `bias`\u00a0usually helps for flat surfaces.\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">bias<\/span> <span class=\"o\">=<\/span> <span class=\"o\">-<\/span> <span class=\"mf\">0.004<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"texture-color-space\">Texture, Color space<\/h3>\n<blockquote>\n<p>The color space is a way to optimise how colors are being stored according to the human eye sensitivity. This mostly concerns textures that are supposed to be seen.<\/p>\n<\/blockquote>\n<p>By default, Three.js sets the color space to linear, meaning that we need to change textures which are supposed to be seen by human eye to be <code>THREE.SRGBColorSpace<\/code>.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"nx\">floorColorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">wallColorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"code-structuring-for-bigger-projects\">Code Structuring for bigger projects<\/h2>\n<p>\u8fd9\u4f4d\u8001\u5e08\u751a\u81f3\u8fde JS \u7684 class &amp; modules \u4e5f\u987a\u5e26\u8bb2\u4e86\u4e00\u4e9b\u57fa\u7840\u77e5\u8bc6 \ud83d\ude02\ud83e\udef6<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/threejs-journey.com\/assets\/lessons\/42\/014.png\" alt=\"\"  \/>\n\n<\/p>\n<p>Anyway, skip parts I already know about, the folder structure of the above demo can be organized like:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-bash\" data-lang=\"bash\"><span class=\"line\"><span class=\"cl\">.\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u251c\u2500\u2500 experience\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u251c\u2500\u2500 Camera.ts               <span class=\"c1\"># Camera with orbit control<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u251c\u2500\u2500 Renderer.ts             <span class=\"c1\"># WebGLRenderer<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u251c\u2500\u2500 index.ts                <span class=\"c1\"># Experience class: control all<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u251c\u2500\u2500 sources.ts              <span class=\"c1\"># set images\/.. urls<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u251c\u2500\u2500 utils\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2502   \u251c\u2500\u2500 Debug.ts            <span class=\"c1\"># &#39;lil-gui&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2502   \u251c\u2500\u2500 EventEmitter.ts     <span class=\"c1\"># event bus, handle events<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2502   \u251c\u2500\u2500 Resources.ts        <span class=\"c1\"># Resources class: load and handle assets<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2502   \u251c\u2500\u2500 Sizes.ts            <span class=\"c1\"># handle resize<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2502   \u2514\u2500\u2500 Time.ts             <span class=\"c1\"># handle tick()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502   \u2514\u2500\u2500 world\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502       \u251c\u2500\u2500 Environment.ts      <span class=\"c1\"># handle scene and environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502       \u251c\u2500\u2500 Floor.ts            <span class=\"c1\"># Floor class, to draw specific floor<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502       \u251c\u2500\u2500 Fox.ts              <span class=\"c1\"># import and update Model<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2502       \u2514\u2500\u2500 World.ts            <span class=\"c1\"># container for this scene<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u2514\u2500\u2500 index.tsx                   <span class=\"c1\"># my page init<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p><a href=\"https:\/\/github.com\/bambooom\/threejs-journey\/tree\/main\/src\/course\/chapter3-advanced-techniques\/26-code-structuring-for-bigger-projects\">demo example project<\/a><\/p>\n]]>"},{"title":"Three.js Journey Notes 4 - Advanced Techniques Part2","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-4-advanced-techniques-part2\/","pubDate":"Sun, 16 Mar 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-4-advanced-techniques-part2\/","description":"<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"raycaster-and-mouse-events\">Raycaster and Mouse Events<\/h2>\n<p>Raycaster is used to detect if there is a wall in front of the player, or test if the laser\ngun hit something, test if something is currently under the mouse to simulate mouse events, etc.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Raycaster\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">raycaster<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Raycaster<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">rayOrigin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">rayDirection<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">rayDirection<\/span><span class=\"p\">.<\/span><span class=\"nx\">normalize<\/span><span class=\"p\">()<\/span> <span class=\"c1\">\/\/ make sure vector is 1 unit long\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">rayOrigin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rayDirection<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ get objects intersect\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">intersect<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObject<\/span><span class=\"p\">(<\/span><span class=\"nx\">object2<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersect<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ result is also array with only 1 object\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">intersects<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObjects<\/span><span class=\"p\">([<\/span><span class=\"nx\">object1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object3<\/span><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersects<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>If we need to test on each frame, we need to test in tick function like:<\/p>","content":"<![CDATA[<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"raycaster-and-mouse-events\">Raycaster and Mouse Events<\/h2>\n<p>Raycaster is used to detect if there is a wall in front of the player, or test if the laser\ngun hit something, test if something is currently under the mouse to simulate mouse events, etc.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Raycaster\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">raycaster<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Raycaster<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">rayOrigin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">rayDirection<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">rayDirection<\/span><span class=\"p\">.<\/span><span class=\"nx\">normalize<\/span><span class=\"p\">()<\/span> <span class=\"c1\">\/\/ make sure vector is 1 unit long\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">rayOrigin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rayDirection<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ get objects intersect\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">intersect<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObject<\/span><span class=\"p\">(<\/span><span class=\"nx\">object2<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersect<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ result is also array with only 1 object\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">intersects<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObjects<\/span><span class=\"p\">([<\/span><span class=\"nx\">object1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object3<\/span><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersects<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>If we need to test on each frame, we need to test in tick function like:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">clock<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Clock<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ Cast a ray\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"kr\">const<\/span> <span class=\"nx\">rayOrigin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">rayDirection<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector3<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">rayDirection<\/span><span class=\"p\">.<\/span><span class=\"nx\">normalize<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">rayOrigin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">rayDirection<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">objectsToTest<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"nx\">object1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object3<\/span><span class=\"p\">]<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">intersects<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObjects<\/span><span class=\"p\">(<\/span><span class=\"nx\">objectsToTest<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersects<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"handle-hovering\">Handle Hovering<\/h3>\n<p>cast a ray from camera in the mouse&rsquo;s direction<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Mouse\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ simulate a mouse\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">mouse<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vector2<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;mousemove&#39;<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">mouse<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientX<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">2<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">mouse<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"o\">-<\/span> <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientY<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">2<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">mouse<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"c1\">\/\/ set camera from ouse\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">setFromCamera<\/span><span class=\"p\">(<\/span><span class=\"nx\">mouse<\/span><span class=\"p\">,<\/span> <span class=\"nx\">camera<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">objectsToTest<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"nx\">object1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object3<\/span><span class=\"p\">]<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">intersects<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObjects<\/span><span class=\"p\">(<\/span><span class=\"nx\">objectsToTest<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">for<\/span><span class=\"p\">(<\/span><span class=\"kr\">const<\/span> <span class=\"nx\">intersect<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">intersects<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">intersect<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span><span class=\"p\">.<\/span><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;#0000ff&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">for<\/span><span class=\"p\">(<\/span><span class=\"kr\">const<\/span> <span class=\"nx\">object<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">objectsToTest<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">intersects<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersect<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"nx\">intersect<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">object<\/span><span class=\"p\">))<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"nx\">object<\/span><span class=\"p\">.<\/span><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;#ff0000&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p><code>mouseenter<\/code>,\u00a0<code>mouseleave<\/code> events need to detect by yourself like: you have to keep the currently intersecting objects, and when any of them are not in intersects, then it&rsquo;s <code>mouseleave<\/code> event; when there are new intersects, then it&rsquo;s <code>mouseenter<\/code>.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">setFromCamera<\/span><span class=\"p\">(<\/span><span class=\"nx\">mouse<\/span><span class=\"p\">,<\/span> <span class=\"nx\">camera<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">objectsToTest<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"nx\">object1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">object3<\/span><span class=\"p\">]<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"kr\">const<\/span> <span class=\"nx\">intersects<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">raycaster<\/span><span class=\"p\">.<\/span><span class=\"nx\">intersectObjects<\/span><span class=\"p\">(<\/span><span class=\"nx\">objectsToTest<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">intersects<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">currentIntersect<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;mouse enter&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">currentIntersect<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">intersects<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">else<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentIntersect<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;mouse leave&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">currentIntersect<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"handle-click\">Handle Click<\/h3>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;click&#39;<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentIntersect<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">switch<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentIntersect<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"k\">case<\/span> <span class=\"nx\">object1<\/span><span class=\"o\">:<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;click on object 1&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"k\">break<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"k\">case<\/span> <span class=\"nx\">object2<\/span><span class=\"o\">:<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;click on object 2&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"k\">break<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"k\">case<\/span> <span class=\"nx\">object3<\/span><span class=\"o\">:<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;click on object 3&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"k\">break<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"cast-on-loaded-model\">Cast on Loaded Model<\/h3>\n<p>cast again <code>gltf.scene<\/code>.<\/p>\n<h2 id=\"blender-beginner\">Blender Beginner<\/h2>\n<p>Make custom models by hand using <a href=\"https:\/\/www.blender.org\/\">Blender<\/a>.<\/p>\n<p>Blender shortcuts: <a href=\"https:\/\/docs.google.com\/document\/d\/1wZzJrEgNye2ZQqwe8oBh54AXwF5cYIe56EGFe2bb0QU\/edit\">Blender 2.8 - Shortcuts - Google \u6587\u4ef6<\/a><\/p>\n<p>\u5b8c\u5168\u624b\u628a\u624b\u5e26\u7740\u505a\u4e00\u4e2a\u6c49\u5821\uff0c\u6211\u8ddf\u505a\u7684\u7248\u672c\uff1a<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/blender-hamburger-1.png\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/blender-hamburger-2.png\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"environment-map\">Environment Map<\/h2>\n<p>It\u2019s those images surrounding the scene that can be used as a background, but also directly on the objects as reflection and lighting. Environment maps can be used to light up the whole scene in a very realistic manner.<\/p>\n<h3 id=\"cube-texture-environment-map\">Cube Texture Environment Map<\/h3>\n<p>composed of 6 images (faces of cube)<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Loaders\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">cubeTextureLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">CubeTextureLoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ LDR cube texture\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ the order is corresponding to `positive x`,\u00a0`negative x`,\u00a0`positive y`,\u00a0`negative y`,\u00a0`positive z`, and\u00a0`negative z`\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">environmentMap<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cubeTextureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">([<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/px.png&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/nx.png&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/py.png&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/ny.png&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/pz.png&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/environmentMaps\/0\/nz.png&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ set the background\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">background<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ use the environment map to light up model\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"environment-properties\">Environment Properties<\/h3>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ high intersity make it more light\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environmentIntensity<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">4<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ blur the background\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundBlurriness<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ if the environment resolution is quite low or if you want the user to focus on the object in the foreground\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ this control background brightness\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundIntensity<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">5<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ control rotation\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundRotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environmentRotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"hdri-equirectangular-environment-map\">HDRI Equirectangular Environment Map<\/h3>\n<blockquote>\n<p>HDR stands for &ldquo;High Dynamic Range&rdquo; (we often say &ldquo;HDRI&rdquo; , where the &ldquo;I&rdquo; stands for &ldquo;Image&rdquo;).\nIt&rsquo;s only one picture containing kind of a 360\u00b0 view of the surrounding. The proper name for such projection is &ldquo;equirectangular&rdquo;.\nAn HDR environment map doesn&rsquo;t have to be equirectangular, but it\u2019s often the case and Three.js (like most 3D software packages, libraries and engines) supports this projection.<\/p>\n<\/blockquote>\n<p>much heavier to load and render than cube texture.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RGBELoader<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three\/examples\/jsm\/loaders\/RGBELoader.js&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Loaders\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">rgbeLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">RGBELoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"err\">\/ HDR (RGBE) equirectangular<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">rgbeLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/environmentMaps\/0\/2k.hdr&#39;<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environmentMap<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"nx\">environmentMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">EquirectangularReflectionMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">background<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"generate-an-environment-map\">Generate an Environment Map<\/h3>\n<p>online environment map resources: <a href=\"https:\/\/polyhaven.com\/hdris\">HDRIs \u2022 Poly Haven<\/a><\/p>\n<ul>\n<li>using Blender, first draw the scene you want, and then render the scene and it can be saved as HDR.<\/li>\n<li>AI generated, like <a href=\"https:\/\/www.nvidia.com\/en-us\/studio\/canvas\/\">NVIDIA Canvas<\/a><\/li>\n<li>or <a href=\"https:\/\/skybox.blockadelabs.com\/\">Skybox Lab<\/a><\/li>\n<\/ul>\n<h3 id=\"ground-projected-environment-map\">Ground Projected Environment Map<\/h3>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Ground projected skybox\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GroundedSkybox<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three\/addons\/objects\/GroundedSkybox.js&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">rgbeLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/environmentMaps\/2\/2k.hdr&#39;<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environmentMap<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">environmentMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">EquirectangularReflectionMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ Skybox\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"kr\">const<\/span> <span class=\"nx\">skybox<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GroundedSkybox<\/span><span class=\"p\">(<\/span><span class=\"nx\">environmentMap<\/span><span class=\"p\">,<\/span> <span class=\"mi\">15<\/span><span class=\"p\">,<\/span> <span class=\"mi\">70<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ skybox.material.wireframe = true\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">skybox<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">15<\/span> <span class=\"c1\">\/\/ move it down can make the object looks like it&#39;s on the ground\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">skybox<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"real-time-environment-map\">Real-time Environment Map<\/h3>\n<p>create a dynamic environment map where we render the scene on each frame and use the result as the\u00a0<code>environment<\/code>\u00a0directly in Three.js.<\/p>\n<p>main idea is that we are going to render the scene inside our own environment map texture and that it\u2019s going to be a cube texture.\nTo render into a cube texture, we need to use a\u00a0<a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/renderers\/WebGLCubeRenderTarget\">WebGLCubeRenderTarget<\/a>. Render targets are textures in which we can store renders of any scene.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Real time environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Base environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">environmentMap<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/environmentMaps\/blockadesLabsSkybox\/interior_views_cozy_wood_cabin_with_cauldron_and_p.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">environmentMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">EquirectangularReflectionMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">environmentMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">background<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Cube render target\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ 256 is the resolution\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">cubeRenderTarget<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">WebGLCubeRenderTarget<\/span><span class=\"p\">(<\/span><span class=\"mi\">256<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"nx\">type<\/span><span class=\"o\">:<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">HalfFloatType<\/span> <span class=\"c1\">\/\/ or THREE.FloatType\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"c1\">\/\/ format: THREE.RGBAFormat,\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"c1\">\/\/ generateMipmaps: true,\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"c1\">\/\/ minFilter: THREE.LinearMipmapLinearFilter\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cubeRenderTarget<\/span><span class=\"p\">.<\/span><span class=\"nx\">texture<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ since we need to render one texture for each face of a cube, we need\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ render 6 square textures. can use CubeCamera\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Cube camera\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">cubeCamera<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">CubeCamera<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">100<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cubeRenderTarget<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">cubeCamera<\/span><span class=\"p\">.<\/span><span class=\"nx\">layers<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ it should only see holyDonut by using layer\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ at last update on tick\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ Real time environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">holyDonut<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">holyDonut<\/span><span class=\"p\">.<\/span><span class=\"nx\">rotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">sin<\/span><span class=\"p\">(<\/span><span class=\"nx\">elapsedTime<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">cubeCamera<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"nx\">renderer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">scene<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>The above implementation make the objects are blocking the light.\nTo fix it, one can use\u00a0<a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/core\/Layers\">Layers<\/a>. Layers work like categories, setting layers on a camera, the camera will only see objects matching the same layers.<\/p>\n<p>As an example, if a camera has its layers set to\u00a0<code>1<\/code>\u00a0and\u00a0<code>2<\/code>, it\u2019ll only see objects that have layers set to\u00a0<code>1<\/code>\u00a0or\u00a0<code>2<\/code>.\nBy default, all objects and camera layers are set to\u00a0<code>0<\/code>.<\/p>\n<p>Real-time environmenrt maps will be a log in terms of performance. So need to use smallest possible resoliton on the render target.<\/p>\n]]>"},{"title":"Three.js Journey Notes 3 - Advanced Techniques Part1","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-3-advanced-techniques-part1\/","pubDate":"Tue, 11 Mar 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-3-advanced-techniques-part1\/","description":"<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"physics\">Physics<\/h2>\n<p>We need to add physics library.\nThe idea is that we add a physics world which is purely theoretical. We cannot see it.\nSo when we create a Three.js mesh, we also create a version of that mesh inside physics world, like projected one in physics world.\nSo on each frame, physics world update itself, we take the coordinates of the projected physics object and then apply them to the corresponding Three.js mesh.<\/p>","content":"<![CDATA[<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"physics\">Physics<\/h2>\n<p>We need to add physics library.\nThe idea is that we add a physics world which is purely theoretical. We cannot see it.\nSo when we create a Three.js mesh, we also create a version of that mesh inside physics world, like projected one in physics world.\nSo on each frame, physics world update itself, we take the coordinates of the projected physics object and then apply them to the corresponding Three.js mesh.<\/p>\n<blockquote>\n<p>First, you must decide if you need a 3D library or a 2D library. While you might think it has to be a 3D library because Three.js is all about 3D, you might be wrong. 2D libraries are usually much more performant, and if you can sum up your experience physics up to 2D collisions, you better use a 2D library.<\/p>\n<\/blockquote>\n<p>3D Libraries:<\/p>\n<ul>\n<li>Ammo.js: <a href=\"https:\/\/github.com\/kripken\/ammo.js\/\">https:\/\/github.com\/kripken\/ammo.js\/<\/a>\n<ul>\n<li>physics engine written in C++, a little heavy<\/li>\n<li>still updated by community<\/li>\n<li>most used library<\/li>\n<\/ul>\n<\/li>\n<li>Cannon.js: <a href=\"https:\/\/github.com\/schteppe\/cannon.js\">https:\/\/github.com\/schteppe\/cannon.js<\/a>\n<ul>\n<li>lighter than Ammo.js<\/li>\n<li>more comfortable to implement<\/li>\n<li>not updated, but has maintained fork<\/li>\n<\/ul>\n<\/li>\n<li>Oimo.js: <a href=\"https:\/\/github.com\/lo-th\/Oimo.js\">https:\/\/github.com\/lo-th\/Oimo.js<\/a>\n<ul>\n<li>lighter than Ammo.js<\/li>\n<li>easier to implement<\/li>\n<li>not updated<\/li>\n<\/ul>\n<\/li>\n<li>Rapier: <a href=\"https:\/\/github.com\/dimforge\/rapier\">https:\/\/github.com\/dimforge\/rapier<\/a>\n<ul>\n<li>similar to Cannon.js<\/li>\n<li>good performance<\/li>\n<li>still update and maintained\n2D Libraries:<\/li>\n<\/ul>\n<\/li>\n<li>Matter.js: <a href=\"https:\/\/github.com\/liabru\/matter-js\">https:\/\/github.com\/liabru\/matter-js<\/a>\n<ul>\n<li>still kind of updated<\/li>\n<\/ul>\n<\/li>\n<li>p2.js: <a href=\"https:\/\/github.com\/schteppe\/p2.js\">https:\/\/github.com\/schteppe\/p2.js<\/a>\n<ul>\n<li>not updated<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/github.com\/piqnt\/planck.js\">https:\/\/github.com\/piqnt\/planck.js<\/a>\n<ul>\n<li>still updated<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/github.com\/kripken\/box2d.js\/\">https:\/\/github.com\/kripken\/box2d.js\/<\/a>\n<ul>\n<li>not updated<\/li>\n<\/ul>\n<\/li>\n<li>Rapier: <a href=\"https:\/\/github.com\/dimforge\/rapier\">https:\/\/github.com\/dimforge\/rapier<\/a>\n<ul>\n<li>same library for 3D<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>solutions that try to combine Three.js with libraries like\u00a0<a href=\"https:\/\/chandlerprall.github.io\/Physijs\/\">Physijs<\/a>, it uses Ammo.js and supports workers natively.<\/p>\n<h3 id=\"base-example\">Base example<\/h3>\n<p>code example for the following will use Cannon.js.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">as<\/span> <span class=\"nx\">CANNON<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;cannon-es&#39;<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">* Physics world\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">*\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">world<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">World<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ empty space, like Scene in Threejs\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ add gravity, Vec3, just like Three.js Vector3\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">gravity<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"o\">-<\/span><span class=\"mf\">9.82<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ y axis, go down, which is G\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Materials, bouncing and friction behaviour\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">concreteMaterial<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Material<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;concrete&#39;<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">plasticMaterial<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Material<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;plastic&#39;<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ create a Body (which are objects in the physics world that will fall and collide with other bodies)\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Sphere\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">sphereShape<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Sphere<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.5<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ 0.5 is same size as the buffer test sphere\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">sphereBody<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Body<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">mass<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">position<\/span><span class=\"o\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vec3<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">),<\/span> <span class=\"c1\">\/\/ higher than the floor\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>  <span class=\"nx\">shape<\/span><span class=\"o\">:<\/span> <span class=\"nx\">sphereShape<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">material<\/span><span class=\"o\">:<\/span> <span class=\"nx\">plasticMaterial<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">});<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ pushing the sphere to origin\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">sphereBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">applyLocalForce<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vec3<\/span><span class=\"p\">(<\/span><span class=\"mi\">150<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">),<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vec3<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">))<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">addBody<\/span><span class=\"p\">(<\/span><span class=\"nx\">sphereBody<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ like add mesh to scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Floor phsics, add floor to stop the sphere from falling through\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">floorShape<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Plane<\/span><span class=\"p\">();<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">floorBody<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Body<\/span><span class=\"p\">();<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">floorBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">concreteMaterial<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">floorBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">mass<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ default mass is 0, it means static, won&#39;t move\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">floorBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">addShape<\/span><span class=\"p\">(<\/span><span class=\"nx\">floorShape<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ since threejs floor is rotated, need to rotate the cannon floor, which is harder than in threejs\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">floorBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">quaternion<\/span><span class=\"p\">.<\/span><span class=\"nx\">setFromAxisAngle<\/span><span class=\"p\">(<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">Vec3<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">),<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">PI<\/span> <span class=\"o\">*<\/span> <span class=\"mf\">0.5<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">addBody<\/span><span class=\"p\">(<\/span><span class=\"nx\">floorBody<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>To make physics world update on frame, we need to update animate <code>tick()<\/code> function:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ Update physics\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">step<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">60<\/span><span class=\"p\">,<\/span> <span class=\"nx\">deltaTime<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>At last, we need to update our Three.js sphere by using <code>sphereBody<\/code> coordinates:<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">sphere<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Mesh<\/span><span class=\"p\">(<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SphereGeometry<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">32<\/span><span class=\"p\">,<\/span> <span class=\"mi\">32<\/span><span class=\"p\">),<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">MeshStandardMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">metalness<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.3<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">roughness<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.4<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">envMap<\/span><span class=\"o\">:<\/span> <span class=\"nx\">environmentMapTexture<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">envMapIntensity<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">castShadow<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">sphere<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ update position from cannon to threejs, you will see the sphere fall down\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">copy<\/span><span class=\"p\">(<\/span><span class=\"nx\">sphereBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ which just do below copy x, y, z\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sphereBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sphereBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">sphere<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">z<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sphereBody<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">z<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"contact-material\">Contact material<\/h3>\n<p>to make ball bounce, we need to add change material.<\/p>\n<p>A material in physics world is just a reference. So name it with reasonable name.<\/p>\n<p>Concate material is the combination of two materials with defined friction coefficient (how much does it rub) and the restitution coefficient (how much does it bounce)\u2014both have default values of 0.3.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">concretePlasticContactMaterial<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">ContactMaterial<\/span><span class=\"p\">(<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">concreteMaterial<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">plasticMaterial<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">      <span class=\"nx\">friction<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">      <span class=\"nx\">restitution<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.7<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">addContactMaterial<\/span><span class=\"p\">(<\/span><span class=\"nx\">concretePlasticContactMaterial<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Then the ball will bounce.<\/p>\n<h3 id=\"apply-forces\">Apply forces<\/h3>\n<p>many ways to apply forces to a\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>:<\/p>\n<ul>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyForce\">applyForce<\/a>\u00a0to apply a force to the\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>\u00a0from a specified point in space (not necessarily on the\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>&rsquo;s surface) like the wind that pushes everything a little all the time, a small but sudden push on a domino or a greater sudden force to make an angry bird jump toward the enemy castle.<\/li>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyImpulse\">applyImpulse<\/a>\u00a0is like\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyForce\">applyForce<\/a>\u00a0but instead of adding to the force that will result in velocity changes, it applies directly to the velocity.<\/li>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyLocalForce\">applyLocalForce<\/a>\u00a0is the same as\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyForce\">applyForce<\/a>\u00a0but the coordinates are local to the\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>\u00a0(meaning that\u00a0<code>0, 0, 0<\/code>\u00a0would be the center of the\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>).<\/li>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyLocalImpulse\">applyLocalImpulse<\/a>\u00a0is the same as\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html#method_applyImpulse\">applyImpulse<\/a>\u00a0but the coordinates are local to the\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Body<\/a>.<\/li>\n<\/ul>\n<p>Because using &ldquo;force&rdquo; methods will result in velocity changes, let&rsquo;s not use &ldquo;impulse&rdquo; methods<\/p>\n<h3 id=\"broadphase\">Broadphase<\/h3>\n<p>Testing collision between objects are costly in terms of performance.\nThe broadphase doing a rough sorting of Bodies before testing them.<\/p>\n<p>There are 3 broadphase algorithms available in Cannon.js:<\/p>\n<ul>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/NaiveBroadphase.html\">NaiveBroadphase<\/a>: Tests every\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a>\u00a0against every other\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a><\/li>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/GridBroadphase.html\">GridBroadphase<\/a>: Quadrilles the world and only tests\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a>\u00a0against other\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a>\u00a0in the same grid box or the neighbors&rsquo; grid boxes.<\/li>\n<li><a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/SAPBroadphase.html\">SAPBroadphase<\/a>\u00a0(Sweep and prune broadphase): Tests\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a>\u00a0on arbitrary axes during multiples steps.\n<ul>\n<li>can eventually generate bugs where a collision doesn&rsquo;t occur, but it&rsquo;s rare, and it involves doing things like moving\u00a0<a href=\"http:\/\/schteppe.github.io\/cannon.js\/docs\/classes\/Body.html\">Bodies<\/a>\u00a0very fast.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ default is NaiveBoradphase, SAPBoradphase is recommended\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">broadphase<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">CANNON<\/span><span class=\"p\">.<\/span><span class=\"nx\">SAPBroadphase<\/span><span class=\"p\">(<\/span><span class=\"nx\">world<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"sleep\">Sleep<\/h3>\n<p>set this to be true for far and not moving objects, so no need to be tested.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"nx\">world<\/span><span class=\"p\">.<\/span><span class=\"nx\">allowSleep<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"events-on-body\">Events on Body<\/h3>\n<p>\u00a0<code>'collide'<\/code>,\u00a0<code>'sleep'<\/code>\u00a0or\u00a0<code>'wakeup'<\/code>.<\/p>\n<p>for example, play a hit sound when collide<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Sounds\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">hitSound<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Audio<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/sounds\/hit.mp3&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">playHitSound<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">hitSound<\/span><span class=\"p\">.<\/span><span class=\"nx\">play<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">createBox<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">height<\/span><span class=\"p\">,<\/span> <span class=\"nx\">depth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;collide&#39;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">playHitSound<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"imported-models\">Imported Models<\/h2>\n<p>some of popular 3D model formats:<\/p>\n<ul>\n<li>OBJ<\/li>\n<li>FBX<\/li>\n<li>STL<\/li>\n<li>PLY<\/li>\n<li>COLLADA<\/li>\n<li>3DS<\/li>\n<li>GLTF\n<ul>\n<li>stands for GL Transmission Format, made by the Khronos Group (the guys behind OpenGL, WebGL, Vulkan, Collada and with many members like AMD \/ ATI, Nvidia, Apple, id Software, Google, Nintendo, etc.)<\/li>\n<li>become very popular these past few years<\/li>\n<li>supports very different sets of data<\/li>\n<li>supports various file formats like json, binary, embed textures<\/li>\n<li>has become the standard when it comes to real-time<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Find some pre-made models on: <a href=\"https:\/\/github.com\/KhronosGroup\/glTF-Sample-Assets\">GitHub - KhronosGroup\/glTF-Sample-Assets: An assortment of assets that demonstrate features and capabilities of the glTF format<\/a><\/p>\n<p>Each model folder contain different GLTF formats, these 4 are most important:<\/p>\n<ul>\n<li>glTF\n<ul>\n<li>kind of default format, it&rsquo;s a JSON, can open it in editor<\/li>\n<li>contains various information like cameras, lights, scenes, materials, objects transformations,<\/li>\n<li>but neither the geometries nor the textures<\/li>\n<li><code>Duck0.bin<\/code> is the file contain geometries and all information associated with the vertices like UV coordinates, normals, vertex colors, etc.<\/li>\n<li><code>DuckCM.png<\/code>\u00a0is simply the texture of the duck.<\/li>\n<li>we only need to load <code>Duck.gltf<\/code><\/li>\n<\/ul>\n<\/li>\n<li>glTF-Binary\n<ul>\n<li>composed of only one file, binary file<\/li>\n<li>a little lighter and more comfortable to load<\/li>\n<li>but won&rsquo;t be able to alter its data<\/li>\n<\/ul>\n<\/li>\n<li>glTF-Draco\n<ul>\n<li>like glTF default one, but the buffer data is compressed using the\u00a0<a href=\"https:\/\/github.com\/google\/draco\">Draco algorithm<\/a><\/li>\n<li>its <code>.bin<\/code> file size is much lighter<\/li>\n<\/ul>\n<\/li>\n<li>glTF-Embedded\n<ul>\n<li>like glTF-Binary, with only one file, but actually it&rsquo;s a JSON which you can edit<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Choosing which format is based on how you want to handle the assets.<\/p>\n<blockquote>\n<p>If you want to be able to alter the textures or the coordinates of the lights after exporting, you better go for the\u00a0<strong>glTF-default<\/strong>. It also presents the advantage of loading the different files separately, resulting in a load speed improvement.\nIf you want only one file per model and don&rsquo;t care about modifying the assets, you better go for\u00a0<strong>glTF-Binary<\/strong>.\nIn both cases, you must decide if you want to use the\u00a0<strong>Draco<\/strong>\u00a0compression or not, but we will cover this part later.<\/p>\n<\/blockquote>\n<h3 id=\"base-example-1\">Base Example<\/h3>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GLTFLoader<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three\/examples\/jsm\/loaders\/GLTFLoader.js&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">* Models\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">*\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">gltfLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">GLTFLoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">gltfLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/models\/Duck\/glTF\/Duck.gltf&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ success loaded callback\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;success&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">])<\/span> <span class=\"c1\">\/\/ duck\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>        <span class=\"c1\">\/\/ if there are multiple parts in this model, we need to add them all like\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/for(const child of gltf.scene.children)\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/{\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/    scene.add(child)\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/}\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/ but we cannot use for loop, The problem is that when we add a child from one scene to the other, it gets automatically removed from the first scene. That means that the first scene now has fewer children in it.\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"c1\">\/\/ can use while loop\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t\t<span class=\"k\">while<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t\t<span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t\t    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t\t<span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">},<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ progress callback, can be omitted\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"p\">(<\/span><span class=\"nx\">progress<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;progress&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">progress<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">},<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ error callback, can be omitted\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;error&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"draco-compression-example\">Draco compression example<\/h3>\n<p>Draco need a decoder, which is located in\u00a0<code>\/node_modules\/three\/examples\/jsm\/libs\/<\/code>, so need to copy whole folder to be next to model folder<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">DRACOLoader<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three\/examples\/jsm\/loaders\/DRACOLoader.js&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">dracoLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">DRACOLoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">dracoLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">setDecoderPath<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/draco\/&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">gltfLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">setDRACOLoader<\/span><span class=\"p\">(<\/span><span class=\"nx\">dracoLoader<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"animated-model\">Animated Model<\/h3>\n<p>Some models already contain animation. To activate it, we need\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/animation\/AnimationMixer\">AnimationMixer<\/a>, it&rsquo;s like a player associated with an object that can contain one or many <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/animation\/AnimationClip\">AnimationClips<\/a>.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kd\">let<\/span> <span class=\"nx\">mixer<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">gltfLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"s1\">&#39;\/models\/Fox\/glTF\/Fox.gltf&#39;<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">scale<\/span><span class=\"p\">.<\/span><span class=\"nx\">set<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.03<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.03<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.03<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">mixer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">AnimationMixer<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">scene<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"kr\">const<\/span> <span class=\"nx\">action<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">mixer<\/span><span class=\"p\">.<\/span><span class=\"nx\">clipAction<\/span><span class=\"p\">(<\/span><span class=\"nx\">gltf<\/span><span class=\"p\">.<\/span><span class=\"nx\">animations<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">play<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>and update the mixer in tick function to update it<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">mixer<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"nx\">mixer<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"nx\">deltaTime<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"c1\">\/\/ ...\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div>]]>"},{"title":"Three.js Journey Notes 2 - Classic Techniques","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-2-classic-techniques\/","pubDate":"Mon, 10 Mar 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-2-classic-techniques\/","description":"<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"lights\">Lights<\/h2>\n<p>basically walk through all lights types to demonstrate them one by one and\nfeel what they can do.<\/p>\n<ul>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/AmbientLight\">AmbientLight<\/a>\n<ul>\n<li>applies omnidirectional(\u5168\u65b9\u5411\u7684) lighting on all geometries of the scene.<\/li>\n<li>good to simulate light bouncing around the scene<\/li>\n<li>cannot be used to cast shadows as it does not have a direction<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/DirectionalLight\">DirectionalLight<\/a>\n<ul>\n<li>coming from same direction, parallel, like the Sun<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/HemisphereLight\">HemisphereLight<\/a>\n<ul>\n<li>similar to the\u00a0<em>AmbientLight<\/em>\u00a0but with a <em>different color<\/em> fading from the <em>sky<\/em> to the color coming from the ground.<\/li>\n<li>Faces facing the sky will be lit by one color while another color will lit faces facing the ground.<\/li>\n<li>cannot be used to cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/PointLight\">PointLight<\/a>\n<ul>\n<li>almost like a lighter, light source is infinitely small, and the light spreads uniformly in every direction<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/RectAreaLight\">RectAreaLight<\/a>\n<ul>\n<li>like a big rectangle lights you can see on the photoshoot set, big plane lighting<\/li>\n<li>can be used to simulate light sources such as bright windows or strip lighting<\/li>\n<li>only works with <code>MeshStandardMaterial<\/code> and <code>MeshPhysicalMaterial<\/code><\/li>\n<li>cannot be used to cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/SpotLight\">SpotLight<\/a>\n<ul>\n<li>like flashlight, \u624b\u7535\u7b52\ud83d\udd26\u805a\u5149\u706f\u6548\u679c<\/li>\n<li>gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"performance\">Performance<\/h3>\n<blockquote>\n<p>Add as few lights as possible and try to use the lights that cost less<\/p>","content":"<![CDATA[<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-1-basics\">Notes 1 - Basics<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"lights\">Lights<\/h2>\n<p>basically walk through all lights types to demonstrate them one by one and\nfeel what they can do.<\/p>\n<ul>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/AmbientLight\">AmbientLight<\/a>\n<ul>\n<li>applies omnidirectional(\u5168\u65b9\u5411\u7684) lighting on all geometries of the scene.<\/li>\n<li>good to simulate light bouncing around the scene<\/li>\n<li>cannot be used to cast shadows as it does not have a direction<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/DirectionalLight\">DirectionalLight<\/a>\n<ul>\n<li>coming from same direction, parallel, like the Sun<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/HemisphereLight\">HemisphereLight<\/a>\n<ul>\n<li>similar to the\u00a0<em>AmbientLight<\/em>\u00a0but with a <em>different color<\/em> fading from the <em>sky<\/em> to the color coming from the ground.<\/li>\n<li>Faces facing the sky will be lit by one color while another color will lit faces facing the ground.<\/li>\n<li>cannot be used to cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/PointLight\">PointLight<\/a>\n<ul>\n<li>almost like a lighter, light source is infinitely small, and the light spreads uniformly in every direction<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/RectAreaLight\">RectAreaLight<\/a>\n<ul>\n<li>like a big rectangle lights you can see on the photoshoot set, big plane lighting<\/li>\n<li>can be used to simulate light sources such as bright windows or strip lighting<\/li>\n<li>only works with <code>MeshStandardMaterial<\/code> and <code>MeshPhysicalMaterial<\/code><\/li>\n<li>cannot be used to cast shadows<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/SpotLight\">SpotLight<\/a>\n<ul>\n<li>like flashlight, \u624b\u7535\u7b52\ud83d\udd26\u805a\u5149\u706f\u6548\u679c<\/li>\n<li>gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets<\/li>\n<li>can cast shadows<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"performance\">Performance<\/h3>\n<blockquote>\n<p>Add as few lights as possible and try to use the lights that cost less<\/p>\n<\/blockquote>\n<ul>\n<li>Minimal cost:\n<ul>\n<li>AmbientLight<\/li>\n<li>HemisphereLight<\/li>\n<\/ul>\n<\/li>\n<li>Moderate cost:\n<ul>\n<li>DirectionalLight<\/li>\n<li>PointLight<\/li>\n<\/ul>\n<\/li>\n<li>High cost:\n<ul>\n<li>SpotLight<\/li>\n<li>RectAreaLight<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Another technique is called baking, idea it that you can bake the light into the texture.\nSo that you can have the effects on the texture as loaded, but it can&rsquo;t be changed when you change the scene.<\/p>\n<h3 id=\"helpers\">Helpers<\/h3>\n<p>helpers for positioning and orienting the lights:<\/p>\n<ul>\n<li>HemisphereLightHelper<\/li>\n<li>DirectionalLightHelper<\/li>\n<li>PointLightHelper<\/li>\n<li>RectAreaLightHelper<\/li>\n<li>SpotLightHelper<\/li>\n<\/ul>\n<h2 id=\"shadows\">Shadows<\/h2>\n<blockquote>\n<p>The back of the objects are indeed in the dark, and this is called the <strong>core shadow<\/strong>. What we are missing is the <strong>drop shadow<\/strong>, where objects create shadows on the other objects.<\/p>\n<\/blockquote>\n<blockquote>\n<p>When you do one render, Three.js will first do a render for each light supposed to cast shadows. Those renders will simulate what the light sees as if it was a camera. During these lights renders, MeshDepthMaterial replaces all meshes materials.<\/p>\n<\/blockquote>\n<blockquote>\n<p>The results are stored as textures and named shadow maps.<\/p>\n<\/blockquote>\n<blockquote>\n<p>You won&rsquo;t see those shadow maps directly, but they are used on every material supposed to receive shadows and projected on the geometry.\nHere&rsquo;s an excellent example of what the directional light and the spotlight see: <a href=\"https:\/\/threejs.org\/examples\/webgl_shadowmap_viewer.html\">https:\/\/threejs.org\/examples\/webgl_shadowmap_viewer.html<\/a><\/p>\n<\/blockquote>\n<p>\u7b80\u5355\u590d\u8ff0\u5c31\u662f three.js \u4f1a\u5f53\u4f5c camera \u4f7f\u7528 MeshDepthMaterial \u4e3a base \u4fdd\u5b58\u6bcf\u4e00\u79cd light \u7684\u6a21\u62df\u51fa\u7684\u7ed3\u679c shadow map\uff0c\u7136\u540e\u5f53\u6210 texture \u6e32\u67d3\u51fa\u6765<\/p>\n<p>Only 3 types of lights supports shadows:<\/p>\n<ul>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/PointLight\">PointLight<\/a><\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/DirectionalLight\">DirectionalLight<\/a><\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/lights\/SpotLight\">SpotLight<\/a><\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">directionalLight<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">DirectionalLight<\/span><span class=\"p\">(<\/span><span class=\"mh\">0xffffff<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1.5<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">castShadow<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ to activate shadow\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ can be accessed directly\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ render size\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapSize<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1024<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapSize<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1024<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ add camera helper to adjust near and far\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">near<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">far<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">6<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">directionalLightCameraHelper<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">CameraHelper<\/span><span class=\"p\">(<\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">directionalLightCameraHelper<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">top<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">right<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">bottom<\/span> <span class=\"o\">=<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">left<\/span> <span class=\"o\">=<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ make shadow blur on edges\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">directionalLight<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">radius<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">10<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ change shadow map algorithm\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">enabled<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">PCFSoftShadowMap<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Shadow map optimisations<\/p>\n<ul>\n<li>render size\n<ul>\n<li>default is 512x512, we can improve it by assign bigger size like 1024x1024 (but cost more)<\/li>\n<\/ul>\n<\/li>\n<li>near and far\n<ul>\n<li>same as camera&rsquo;s near and far, can use <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/helpers\/CameraHelper\">CameraHelper<\/a> to adjust the values<\/li>\n<\/ul>\n<\/li>\n<li>amplitude\n<ul>\n<li>camera&rsquo;s amplitude<\/li>\n<li>The smaller the values, the more precise the shadow will be. But if it&rsquo;s too small, the shadows will just be cropped<\/li>\n<\/ul>\n<\/li>\n<li>blue with <code>radius<\/code> property<\/li>\n<li>Shadow map algorithm\n<ul>\n<li><strong>THREE.BasicShadowMap:<\/strong>\u00a0Very performant but lousy quality<\/li>\n<li><strong>THREE.PCFShadowMap:<\/strong>\u00a0Less performant but smoother edges (default)<\/li>\n<li><strong>THREE.PCFSoftShadowMap:<\/strong>\u00a0Less performant but even softer edges<\/li>\n<li><strong>THREE.VSMShadowMap:<\/strong>\u00a0Less performant, more constraints, can have unexpected results<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Baking shadows, exactly like baking light into textures. But it&rsquo;s static, if the object or the light moves, the shadow won&rsquo;t.\nAlternative is to use a more simple shadow under the sphere and slightly above the plane.\nIt&rsquo;s less realistic but more dynamic.<\/p>\n<h2 id=\"haunted-house\">Haunted House<\/h2>\n<p>\u5b8c\u5168\u8ddf\u7740\u4e00\u6b65\u4e00\u6b65\u505a\u7684 demo, <a href=\"https:\/\/github.com\/bambooom\/threejs-journey\/blob\/main\/src\/course\/chapter2-classic-techniques\/16-haunted-house.tsx\">code<\/a><\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/haunted-house-1.png\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/haunted-house-2.png\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"particles\">Particles<\/h2>\n<p>popular and can be used to achieve various effects such as stars, smoke, rain, dust, fire, and many other things.<\/p>\n<p>each particle is composed of a plane (two triangles) always facing the camera.<\/p>\n<p>need <code>BufferGeometry<\/code> and <code>PointsMaterial<\/code>, we need to create a <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/objects\/Points\">Points<\/a>.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Material\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">particlesMaterial<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">PointsMaterial<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">size<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.02<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">sizeAttenuation<\/span><span class=\"o\">:<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">});<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Points\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">particles<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Points<\/span><span class=\"p\">(<\/span><span class=\"nx\">particlesGeometry<\/span><span class=\"p\">,<\/span> <span class=\"nx\">particlesMaterial<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">particles<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>Custom geometry like space<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Geometry\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">particlesGeometry<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BufferGeometry<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">500<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">positions<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Float32Array<\/span><span class=\"p\">(<\/span><span class=\"nx\">count<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">3<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Multiply by 3 because each position is composed of 3 values (x, y, z)\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"k\">for<\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">3<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Multiply by 3 for same reason\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">positions<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">random<\/span><span class=\"p\">()<\/span> <span class=\"o\">-<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">10<\/span> <span class=\"c1\">\/\/ Math.random() - 0.5 to have a random value between -0.5 and +0.5\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">particlesGeometry<\/span><span class=\"p\">.<\/span><span class=\"nx\">setAttribute<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;position&#39;<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BufferAttribute<\/span><span class=\"p\">(<\/span><span class=\"nx\">positions<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">))<\/span> <span class=\"c1\">\/\/ Create the Three.js BufferAttribute and specify that each information is composed of 3 values\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ particlesMaterial.alphaTest = 0.001\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ particlesMaterial.depthTest = false\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">particlesMaterial<\/span><span class=\"p\">.<\/span><span class=\"nx\">depthWrite<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">particlesMaterial<\/span><span class=\"p\">.<\/span><span class=\"nx\">blending<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">AdditiveBlending<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">particlesMaterial<\/span><span class=\"p\">.<\/span><span class=\"nx\">vertexColors<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span>\n<\/span><\/span><\/code><\/pre><\/div><ul>\n<li>alphaTest\n<ul>\n<li>value between 0 and 1 that enables the WebGL to know when not to render the pixel according to that pixel&rsquo;s transparency<\/li>\n<\/ul>\n<\/li>\n<li>depthTest\n<ul>\n<li>WebGL tests if what&rsquo;s being drawn is closer than what&rsquo;s already drawn<\/li>\n<\/ul>\n<\/li>\n<li>depthWrite\n<ul>\n<li>The depth of what&rsquo;s being drawn is stored in what we call a depth buffer. Instead of not testing if the particle is closer than what&rsquo;s in this depth buffer, we can tell the WebGL not to write particles in that depth buffer<\/li>\n<\/ul>\n<\/li>\n<li>blending\n<ul>\n<li>tell the WebGL not only to draw the pixel, but also to add the color of that pixel to the color of the pixel already drawn. That will have a saturation effect that can look amazing.<\/li>\n<\/ul>\n<\/li>\n<li>apply different colors<\/li>\n<\/ul>\n<p>make a galaxy by particles, <a href=\"https:\/\/github.com\/bambooom\/threejs-journey\/blob\/main\/src\/course\/chapter2-classic-techniques\/18-galaxy-generator.tsx\">code<\/a><\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/galaxy.png\" alt=\"\"  \/>\n\n<\/p>\n<p><a href=\"https:\/\/github.com\/bambooom\/threejs-journey\/blob\/main\/src\/course\/chapter2-classic-techniques\/19-scroll-based-animation.tsx\">scroll based animation to make web page demo<\/a><\/p>\n]]>"},{"title":"Three.js Journey Notes 1 - Basics","link":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-1-basics\/","pubDate":"Wed, 26 Feb 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/threejs-journey-notes-1-basics\/","description":"<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u524d\u5e74\u4e70\u4e86\u4e00\u95e8\u8bfe\uff0c\u53bb\u5e74\u65ad\u65ad\u7eed\u7eed\u5b66\u4e86\u4e00\u4e24\u4e2a\u6708\uff0c\u6401\u7f6e\u4e865\u4e2a\u6708\uff0c\u4eca\u5e74\u7ee7\u7eed\u5b66\u3002\n\u5148\u590d\u4e60\u4e4b\u524d\u7684\u8bfe\u8bb0\u4e2a\u7b14\u8bb0\u3002<\/p>\n<p><em>\u6ca1\u6709\u8ffd\u6c42\u5199\u5f97\u5f88\u901a\u987a\uff0c\u4e2d\u82f1\u80e1\u4e71\u6df7\u5408ing<\/em><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"why-use-threejs\">why use Three.js<\/h2>\n<blockquote>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\">WebGL<\/a> (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.<\/p>\n<\/blockquote>\n<p>WebGL \u662f\u7528\u7684 GPU \u6765\u7ed8\u5236\u7684\uff0cGPU \u6709\u5f88\u591a parallel workers\uff0c\u6240\u4ee5\u5f88\u5feb\u3002\n\u600e\u4e48\u653e\u7f6e points \u6bcf\u4e2a pixel \u5982\u4f55\u753b\u90fd\u662f\u5728 shaders \u91cc\u5b9a\u4e49\u7684\u3002(shader \u662f\u4e2a\u633a\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u4e4b\u540e\u518d\u597d\u597d\u4e86\u89e3)<\/p>","content":"<![CDATA[<p>\u8bfe\u7a0b\u94fe\u63a5\uff1a<a href=\"https:\/\/threejs-journey.com\/\">three.js journey<\/a><\/p>\n<p>\u524d\u5e74\u4e70\u4e86\u4e00\u95e8\u8bfe\uff0c\u53bb\u5e74\u65ad\u65ad\u7eed\u7eed\u5b66\u4e86\u4e00\u4e24\u4e2a\u6708\uff0c\u6401\u7f6e\u4e865\u4e2a\u6708\uff0c\u4eca\u5e74\u7ee7\u7eed\u5b66\u3002\n\u5148\u590d\u4e60\u4e4b\u524d\u7684\u8bfe\u8bb0\u4e2a\u7b14\u8bb0\u3002<\/p>\n<p><em>\u6ca1\u6709\u8ffd\u6c42\u5199\u5f97\u5f88\u901a\u987a\uff0c\u4e2d\u82f1\u80e1\u4e71\u6df7\u5408ing<\/em><\/p>\n<p>\u5176\u4ed6\u51e0\u7bc7\uff1a<\/p>\n<ul>\n<li><a href=\"..\/threejs-journey-notes-2-classic-techniques\">Notes 2 - Classic Techniques<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-3-advanced-techniques-part1\">Notes 3 - Advanced Techniques Part1<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-4-advanced-techniques-part2\">Notes 4 - Advanced Techniques Part2<\/a><\/li>\n<li><a href=\"..\/threejs-journey-notes-5-advanced-techniques-part3\">Notes 5 - Advanced Techniques Part3<\/a><\/li>\n<\/ul>\n<h2 id=\"why-use-threejs\">why use Three.js<\/h2>\n<blockquote>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\">WebGL<\/a> (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.<\/p>\n<\/blockquote>\n<p>WebGL \u662f\u7528\u7684 GPU \u6765\u7ed8\u5236\u7684\uff0cGPU \u6709\u5f88\u591a parallel workers\uff0c\u6240\u4ee5\u5f88\u5feb\u3002\n\u600e\u4e48\u653e\u7f6e points \u6bcf\u4e2a pixel \u5982\u4f55\u753b\u90fd\u662f\u5728 shaders \u91cc\u5b9a\u4e49\u7684\u3002(shader \u662f\u4e2a\u633a\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u4e4b\u540e\u518d\u597d\u597d\u4e86\u89e3)<\/p>\n<p>\u4f46\u662f native WebGL too hard\uff0c\u624b\u5199 WebGL \u8fd8\u662f\u6bd4\u8f83\u75db\u82e6\u6bd4\u8f83\u9ebb\u70e6\u7684\u4e00\u4ef6\u4e8b\uff08\u8001\u5e08\u4e3e\u4f8b\uff0c\u753b\u4e00\u4e2a\u7b80\u5355\u7684\u4e09\u89d2\u5f62\u5c31\u9700\u8981\u5199 100 \u884c\u4ee3\u7801\uff09\uff0c\n\u6240\u4ee5 <a href=\"https:\/\/threejs.org\/\">three.js<\/a> \u5e94\u8fd0\u800c\u751f\u3002<\/p>\n<h2 id=\"4-basics-elements\">4 Basics elements<\/h2>\n<ul>\n<li>A scene that will contain objects, \u5bf9\u5e94 <code>THREE.Scene<\/code><\/li>\n<li>Some objects, can be many things like primitive geometrics, imported models, particles, lights, etc.\n<ul>\n<li>\u5e38\u7528\u7684 Mesh - combination of a geometry (the shape) and a material (how it looks)<\/li>\n<li>threejs \u6709\u4e00\u7cfb\u5217 Geometry class \u5bf9\u5e94\u5404\u79cd\u5f62\u72b6\uff0c\u53e6\u4e00\u7cfb\u5217 Materials \u5c31\u662f\u5bf9\u5e94\u6837\u5b50\u7b49<\/li>\n<\/ul>\n<\/li>\n<li><code>Camera<\/code>\n<ul>\n<li>camera \u4e0d\u53ef\u89c1\uff0c\u53ea\u662f\u4e00\u79cd\u7406\u8bba\u4e0a\u7684 point of view\u3002render \u7684\u65f6\u5019\u5c31\u662f\u4ece camera \u7684\u89c6\u89d2\u51fa\u53d1\u53bb\u505a<\/li>\n<li>\u4e5f\u53ef\u4ee5\u6709\u591a\u53f0camera\uff0c\u50cf\u662f\u62cd\u7535\u5f71\u4e00\u6837\uff0c\u5728 cameras \u4e2d\u95f4\u5207\u6362\u89c6\u89d2<\/li>\n<li>threejs \u4e5f\u6709\u51e0\u79cd\u4e0d\u540c\u7684 camera \u53ef\u4ee5\u9009\u62e9\uff0cbasic \u9009\u7528 <code>PerspectiveCamera<\/code><\/li>\n<li><em>field of view<\/em>: how large your vision angle is, unit in degrees and corresponds to the vertical vision angle<\/li>\n<\/ul>\n<\/li>\n<li><code>Renderer<\/code>\uff0c\u987e\u540d\u601d\u4e49\u5c31\u662f\u505a\u6e32\u67d3\u5de5\u4f5c\u7684\uff0c\u5b83\u4f1a\u5c06\u5f53\u4e0b\u7684 scene \u4ece camera \u7684\u89c6\u89d2\u51fa\u53d1\uff0c\u5c06\u7ed3\u679c\u753b\u5728\u4e00\u5f20\u753b\u5e03\u4e0a<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">import<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">as<\/span> <span class=\"nx\">THREE<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three&#39;<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">scene<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Scene<\/span><span class=\"p\">();<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Mesh\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">geometry<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BoxGeometry<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ cube: width, height, depth\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">MeshBasicMaterial<\/span><span class=\"p\">({<\/span> <span class=\"nx\">color<\/span><span class=\"o\">:<\/span> <span class=\"mh\">0xff0000<\/span> <span class=\"p\">});<\/span> <span class=\"c1\">\/\/ red, using hex\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">mesh<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Mesh<\/span><span class=\"p\">(<\/span><span class=\"nx\">geometry<\/span><span class=\"p\">,<\/span> <span class=\"nx\">material<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">mesh<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ need to add to scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">sizes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">width<\/span><span class=\"o\">:<\/span> <span class=\"mi\">800<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">height<\/span><span class=\"o\">:<\/span> <span class=\"mi\">600<\/span><span class=\"p\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">};<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Camera\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ 75 - field of view, 5\u7684\u89d2\u5ea6\u5728\u5b9e\u9645\u60c5\u51b5\u6765\u8bf4\u53ef\u80fd\u592a\u5927\u3002\u4f46\u5bf9\u521d\u5b66\u8005\u6765\u8bf4\uff0c\u6bd4\u8f83\u5408\u9002\uff0c\u4e0d\u4f1a\u8ddf\u4e22 objects\u3002\u591a\u6570 website\uff0c around 35\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ width \/ height - aspect ratio\uff0c\u753b\u5e03\u7684\u5bbd\u9ad8\u6bd4\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">camera<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">PerspectiveCamera<\/span><span class=\"p\">(<\/span><span class=\"mi\">75<\/span><span class=\"p\">,<\/span> <span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ camera.position.x = 1\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ camera.position.y = 1\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">z<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ by default, everything is at the center, so need to move camera backwards to be able to see objects\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">camera<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Canvas\uff0c&lt;canvas class=&#34;webgl&#34;&gt;&lt;\/canvas&gt;\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">canvas<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;canvas.webgl&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Renderer\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">renderer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">WebGLRenderer<\/span><span class=\"p\">({<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"nx\">canvas<\/span><span class=\"o\">:<\/span> <span class=\"nx\">canvas<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">});<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">setSize<\/span><span class=\"p\">(<\/span><span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">sizes<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"nx\">scene<\/span><span class=\"p\">,<\/span> <span class=\"nx\">camera<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ \u8fd9\u4e00\u6b65\u624d\u4f1a\u5728\u7f51\u9875\u4e0a\u770b\u5230\u6e32\u67d3\u7684\u6548\u679c\n<\/span><\/span><\/span><\/code><\/pre><\/div><h2 id=\"animations\">Animations<\/h2>\n<p>\u524d\u9762\u7684\u4f8b\u5b50\u91cc render \u53ea\u662f\u4e00\u4e2a\u9759\u6001\u7684\u7ed3\u679c\uff0c\u60f3\u8981\u8ba9 3D \u80fd\u52a8\u8d77\u6765\u6216\u8005\u53ef\u4ee5\u4ea4\u4e92\uff0c\u9700\u8981\u4f7f\u7528 <code>window.requestAnimationFrame<\/code> \u6301\u7eed\u8fdb\u884c render<\/p>\n<p>fps = frames per seconds<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kd\">let<\/span> <span class=\"nx\">time<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">tick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ Time\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"kr\">const<\/span> <span class=\"nx\">currentTime<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"kr\">const<\/span> <span class=\"nx\">deltaTime<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">currentTime<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">time<\/span> <span class=\"c1\">\/\/ around 16-17 milliseconds\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"nx\">time<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">currentTime<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"c1\">\/\/ update objects\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>  <span class=\"c1\">\/\/ \u7528 delta \u662f\u6765fix \u65f6\u95f4\uff0crotation \u901f\u5ea6\u5c31\u548c frame rate \u4e0d\u76f8\u5173\uff0c\u5728\u4efb\u4f55 frame rate \u90fd\u4fdd\u6301\u76f8\u540c\u901f\u5ea6\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"nx\">mesh<\/span><span class=\"p\">.<\/span><span class=\"nx\">rotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">+=<\/span> <span class=\"mf\">0.002<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">deltaTime<\/span> <span class=\"c1\">\/\/ rotate the object\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"c1\">\/\/ render part\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>\t<span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"nx\">scene<\/span><span class=\"p\">,<\/span> <span class=\"nx\">camera<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">requestAnimationFrame<\/span><span class=\"p\">(<\/span><span class=\"nx\">tick<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ will repeated being called\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">tick<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"camera\">Camera<\/h2>\n<ul>\n<li><code>THREE.Camera<\/code> is abstract class, not supposed to being used directly<\/li>\n<li><code>THREE.ArrayCamera<\/code> from multiple cameras on a specific areas of render<\/li>\n<li><code>THREE.StereoCamera<\/code> render through 2 cameras that mimic eyes to create a parallax effect, 3D VR like<\/li>\n<li><code>THREE.CubeCamera<\/code> do 6 renders, surroundings like environment map, reflection or shadow map<\/li>\n<li><code>THREE.OrthographicCamera<\/code> render the scene without perspective, RTS game, object size is always the same, no matter far or near\n<ul>\n<li>parameters: left, right, top, bottom; \u50cf\u662f\u8bbe\u7f6e\u4e00\u4e2a box square\uff0c\u65b9\u5f62\u524d\u8fdb\u8fd9\u6837<\/li>\n<li>cube looks flat<\/li>\n<\/ul>\n<\/li>\n<li><code>THREE.PerspectiveCamera<\/code> \u6700\u5e38\u7528\u7684\n<ul>\n<li>field of view\uff0c\u5b9e\u9645\u4e0a\u4eba\u7c7b\u7684\u89c6\u89c9\u89d2\u5ea6\u662f huge\uff0c\u4f46\u662f\u5728\u8fd9\u91cc\u4e0d\u80fd\u8bbe\u7f6e\u592a\u5927\u3002\u6bd4\u5982\u8bbe\u7f6e\u6210 140 degree \u7684\u8bdd\uff0cobjects \u4f1a\u770b\u4e0a\u53bb\u5f88\u5c0f\uff0c\u4ee5\u53ca distorted\uff08\u4e25\u91cd\u53d8\u5f62\uff09\u3002\u539f\u56e0\u662f\u6211\u4eec\u4e00\u822c\u5728\u7f51\u9875\u91cc\u662f render in a rectangle area\uff0c\u4f1a\u9700\u8981\u5c06 amplified render squeeze \u5230\u4e00\u4e2a\u65b9\u5f62\u91cc\u3002\u8001\u5e08\u63a8\u8350 45-75 fov<\/li>\n<li>aspect ratio\uff0cwidth\/height of render<\/li>\n<li>near \/ far: objects closer than near or further than far will not show up\uff0ccamera can see \u7684\u8ddd\u79bb\u533a\u95f4\n<ul>\n<li>\u5982\u679c far \u8bbe\u7f6e\u5c0f\u4e8e camera \u7684 distance\uff0cobjects \u5c31\u4f1a\u770b\u4e0d\u89c1\u6216\u8005\u90e8\u5206\u770b\u4e0d\u89c1<\/li>\n<li>\u4f46\u662f\u4e0d\u8981\u4f7f\u7528 extreme values like 0.0001 and 9999999 to prevent z-fighting\n<ul>\n<li><a href=\"https:\/\/twitter.com\/FreyaHolmer\/status\/799602767081848832\">https:\/\/twitter.com\/FreyaHolmer\/status\/799602767081848832<\/a><\/li>\n<li><a href=\"https:\/\/twitter.com\/Snapman_I_Am\/status\/800567120765616128\">https:\/\/twitter.com\/Snapman_I_Am\/status\/800567120765616128<\/a><\/li>\n<\/ul>\n<\/li>\n<li>0.1 \u53ef\u4ee5\uff0c\u5177\u4f53\u53d6\u51b3\u4e8eproject<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/camera-fov.png\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/camera-move.png\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"geometries\">Geometries<\/h2>\n<p>What:<\/p>\n<ul>\n<li>composed of <strong>vertices<\/strong> (point coordinates) and <strong>faces<\/strong> (triangles that join vertices to create surface)<\/li>\n<li>can be used for meshed and particles<\/li>\n<li>can store more data than positions<\/li>\n<\/ul>\n<p>All inherited from <code>BufferGeometry<\/code>.<\/p>\n<p>The\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/geometries\/BoxGeometry\">BoxGeometry<\/a>\u00a0has 6 parameters:<\/p>\n<ul>\n<li><code>width<\/code>: The size on the\u00a0<code>x<\/code>\u00a0axis<\/li>\n<li><code>height<\/code>: The size on the\u00a0<code>y<\/code>\u00a0axis<\/li>\n<li><code>depth<\/code>: The size on the\u00a0<code>z<\/code>\u00a0axis<\/li>\n<li><code>widthSegments<\/code>: How many subdivisions in the\u00a0<code>x<\/code>\u00a0axis<\/li>\n<li><code>heightSegments<\/code>: How many subdivisions in the\u00a0<code>y<\/code>\u00a0axis<\/li>\n<li><code>depthSegments<\/code>: How many subdivisions in the\u00a0<code>z<\/code>\u00a0axis<\/li>\n<\/ul>\n<p>segments \u5728\u9700\u8981\u7cbe\u7ec6\u5316\u6bcf\u4e2a\u70b9\u7684\u65f6\u5019\u4f1a\u7528\u5230\uff0c\u8bbe\u7f6e material \u7684\u65f6\u5019\u5e26\u4e0a <code>wireframe: true<\/code> \u5c31\u53ef\u4ee5\u770b\u5230 triangles segments.<\/p>\n<h3 id=\"how-to-create-your-own-buffer-geometry\">How to create your own buffer geometry<\/h3>\n<p>To add vertices to a\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/core\/BufferGeometry\">BufferGeometry<\/a>\u00a0you must start with a\u00a0<a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Float32Array\">Float32Array<\/a>.\n<a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Float32Array\">Float32Array<\/a>\u00a0are native JavaScript typed array. You can only store floats inside, and the length of that array is fixed.<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ Create an empty BufferGeometry\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">geometry<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BufferGeometry<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ init Float32Array\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">positionsArray<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Float32Array<\/span><span class=\"p\">([<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ First vertex\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Second vertex\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span>  <span class=\"c1\">\/\/ Third vertex\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"p\">])<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ convert Float32Array to BufferAttribute\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ 3 means how much values compose one vertex\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">positionsAttribute<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">BufferAttribute<\/span><span class=\"p\">(<\/span><span class=\"nx\">positionsArray<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"textures\">Textures<\/h2>\n<blockquote>\n<p>Textures, as you probably know, are images that will cover the surface of your geometries. Many types of textures can have different effects on the appearance of your geometry. It&rsquo;s not just about the color.<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/3dtextures.me\/2019\/04\/16\/door-wood-001\/\">door texture example<\/a><\/p>\n<h3 id=\"texture-types\">Texture types<\/h3>\n<p>mostly used types:<\/p>\n<ul>\n<li>color<\/li>\n<li>alpha\n<ul>\n<li>grayscale image<\/li>\n<li>white visible, black not visible<\/li>\n<\/ul>\n<\/li>\n<li>height (or Displacement) \u4f7f\u8868\u9762\u4e0d\u5e73\uff1f\n<ul>\n<li>grayscale image<\/li>\n<li>move the vertices to create some relief<\/li>\n<li>need enough subdivision<\/li>\n<\/ul>\n<\/li>\n<li>normal\n<ul>\n<li>add small details<\/li>\n<li>doesn&rsquo;t need subdivision<\/li>\n<li>the vertices won&rsquo;t move<\/li>\n<li>lure(\u8bf1\u9a97\u8bf1\u4f7f) the <em>light<\/em> about the face orientation<\/li>\n<li>better performances than adding a height texture with a lot if subdivision<\/li>\n<\/ul>\n<\/li>\n<li>ambient occlusion\n<ul>\n<li>grayscale image<\/li>\n<li>add fake shadows in the surface&rsquo;s crevices(\u88c2\u7f1d)<\/li>\n<li>\u4e0d\u4e00\u5b9a\u51c6\u786e\uff0c\u4f46\u662f\u80fd\u9020\u51fa contrast<\/li>\n<\/ul>\n<\/li>\n<li>metalness \u91d1\u5c5e\u8d28\u611f\n<ul>\n<li>grayscale<\/li>\n<li>white is metallic, black is not<\/li>\n<li>mostly for reflection<\/li>\n<\/ul>\n<\/li>\n<li>roughness \u7c97\u7cd9\u5ea6\n<ul>\n<li>grayscale<\/li>\n<li>in duo with the metalness<\/li>\n<li>white is rough<\/li>\n<li>black is smooth<\/li>\n<li>mostly for light dissipation(\u6d88\u6563)\n<ul>\n<li>\u4e3e\u4f8b\u6765\u8bf4\uff0c\u6bd4\u5982\u5730\u6bef\u975e\u5e38\u7c97\u7cd9\uff0c\u6240\u4ee5\u57fa\u672c\u770b\u4e0d\u5230\u5149\u7ebf\u53cd\u5c04\uff0c\u4f46\u6c34\u9762\u5c31\u5f88\u5149\u6ed1\uff0c\u80af\u5b9a\u9700\u8981\u6709\u5149\u7ebf\u53cd\u5c04\u6548\u679c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>PBR principle<\/strong> (especially the metalness and the roughness):<\/p>\n<ul>\n<li>physical based rendering<\/li>\n<li>follow real-life directions to get realistic results<\/li>\n<li>reading:\n<ul>\n<li><a href=\"https:\/\/marmoset.co\/posts\/basic-theory-of-physically-based-rendering\/\">Basic Theory of Physically-Based Rendering | Marmoset<\/a><\/li>\n<li><a href=\"https:\/\/marmoset.co\/posts\/physically-based-rendering-and-you-can-too\/\">Physically-Based Rendering, And You Can Too! | Marmoset<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"load-texture\">Load Texture<\/h3>\n<p>\u4e3b\u8981\u5c31\u662f\u4f7f\u7528 <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/loaders\/TextureLoader\">TextureLoader<\/a>\uff0c\u7136\u540e\u8bbe\u7f6e\u5728 material \u4e0a\u5373\u53ef\u770b\u5230\u6548\u679c\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">textureLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">TextureLoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">texture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;\/textures\/door\/color.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">texture<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">MeshBasicMaterial<\/span><span class=\"p\">(<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">map<\/span><span class=\"o\">:<\/span><span class=\"nx\">texture<\/span> <span class=\"p\">}<\/span> <span class=\"p\">);<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"uv-unwrapping\">UV unwrapping<\/h3>\n<blockquote>\n<p>texture is being stretched or squeezed in different ways to cover the geometry.<\/p>\n<\/blockquote>\n<blockquote>\n<p>That is called UV unwrapping. You can imagine that like unwrapping an origami or a candy wrap to make it flat. Each vertex will have a 2D coordinate on a flat (usually square) plane.<\/p>\n<\/blockquote>\n<p>\u4e5f\u5c31\u662f\u4e0d\u540c\u5f62\u72b6\u7684\u7269\u4f53\u5728\u4f7f\u7528 texture \u7684\u65f6\u5019\u90fd\u662f\u5148\u5c06\u5176 uv unwrapping \u6210\u4e00\u5f20\u5e73\u9762\uff0c\u518d\u53bb\u6309\u7167\u4e00\u5b9a\u7684\u89c4\u5219\u8fdb\u884c\u5e73\u94fa\u7b49\u3002\nunwrapping \u51fa\u6765\u7684\u5e73\u9762\u5c31\u4f1a\u6709\u5404\u4e2a\u70b9\u7684 uv 2D coordinates\uff08<code>geometry.attributes.uv<\/code>\uff09\u3002<\/p>\n<p>\u5982\u679c\u662f\u81ea\u5df1\u521b\u4f5c\u65b0\u7684 geometry\uff0c\u5c31\u4f1a\u9700\u8981\u81ea\u884c\u8bbe\u7f6e uv coordinates\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/threejs-journey\/uv-unwrapping.png\" alt=\"\"  \/>\n\n<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ repeat: 2D vector\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">repeat<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">repeat<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ texture not being set up to repeat itself by default. To change that, you have to update the wrapS and wrapT properties using the THREE.RepeatWrapping constant.\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrapS<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RepeatWrapping<\/span> <span class=\"c1\">\/\/ for x-axis\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrapT<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">RepeatWrapping<\/span> <span class=\"c1\">\/\/ for y-axis\n<\/span><\/span><\/span><\/code><\/pre><\/div><h3 id=\"filtering-and-mipmapping\">Filtering and Mipmapping<\/h3>\n<blockquote>\n<p>Mipmapping is a technique that consists of creating half a smaller version of a texture again and again until you get a 1x1 texture. All those texture variations are sent to the GPU, and the GPU will choose the most appropriate version of the texture.<\/p>\n<\/blockquote>\n<p>\u4e3b\u8981\u662f\u4e3a\u4e86\u5904\u7406\u6bdb\u8fb9\uff0cblurring<\/p>\n<blockquote>\n<p>Minification filter happens when the pixels of texture are smaller than the pixels of the render.<\/p>\n<\/blockquote>\n<p>\u5f53 texture \u592a\u5927\uff0c\u53ef\u4ee5\u8bbe\u7f6e <code>minFilter<\/code> \u4f7f\u7528\u4ee5\u4e0b\u67d0\u4e00\u4e2a\u503c\uff1a<\/p>\n<ul>\n<li><code>THREE.NearestFilter<\/code><\/li>\n<li><code>THREE.LinearFilter<\/code><\/li>\n<li><code>THREE.NearestMipmapNearestFilter<\/code><\/li>\n<li><code>THREE.NearestMipmapLinearFilter<\/code><\/li>\n<li><code>THREE.LinearMipmapNearestFilter<\/code><\/li>\n<li><code>THREE.LinearMipmapLinearFilter<\/code> (default)<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">minFilter<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">NearestFilter<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u5f53 texture \u592a\u5c0f\uff0c\u53ef\u4ee5\u8bbe\u7f6e <code>magFilter<\/code> \u4f7f\u7528\u4ee5\u4e0b\u67d0\u4e00\u4e2a\u503c\uff08magFilter \u53ea\u6709\u4e24\u4e2a\u53ef\u80fd\u503c\uff09\uff1a<\/p>\n<ul>\n<li><code>THREE.NearestFilter<\/code><\/li>\n<li><code>THREE.LinearFilter<\/code> (default)<\/li>\n<\/ul>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"nx\">colorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">magFilter<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">NearestFilter<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h3 id=\"format-and-optimisation\">format and optimisation<\/h3>\n<ul>\n<li><code>.jpg<\/code> lossy compression but usually lighter<\/li>\n<li><code>.png<\/code> lossless compression but usually heavier<\/li>\n<li>make texture image as small as possible, GPU need to store it, but it has limitation.<\/li>\n<li>texture resolution better must be a power of 2, 512x512, 1024x1024, 512x2048<\/li>\n<li>where to find textures:\n<ul>\n<li><a href=\"http:\/\/poliigon.com\/\">poliigon.com<\/a><\/li>\n<li><a href=\"http:\/\/3dtextures.me\/\">3dtextures.me<\/a><\/li>\n<li><a href=\"http:\/\/arroway-textures.ch\/\">arroway-textures.ch<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"material\">Material<\/h2>\n<blockquote>\n<p>Material are used to put a color on each visible pixel of the geometries.<\/p>\n<\/blockquote>\n<blockquote>\n<p>The algorithms that decide on the color of each pixel are written in programs called <strong>shaders<\/strong>. Writing shaders is one of the most challenging parts of WebGL and Three.js, but don&rsquo;t worry; Three.js has many built-in materials with pre-made shaders.<\/p>\n<\/blockquote>\n<h3 id=\"meshbasicmaterial\">MeshBasicMaterial<\/h3>\n<p><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/MeshBasicMaterial\">doc<\/a><\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Textures\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">textureLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">TextureLoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorColorTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/color.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorAlphaTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/alpha.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorAmbientOcclusionTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/ambientOcclusion.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorHeightTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/height.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorNormalTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/normal.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorMetalnessTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/metalness.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">doorRoughnessTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/door\/roughness.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">matcapTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/matcaps\/1.png&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">gradientTexture<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">textureLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/gradients\/3.jpg&#39;<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">doorColorTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">matcapTexture<\/span><span class=\"p\">.<\/span><span class=\"nx\">colorSpace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">SRGBColorSpace<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ MeshBasicMaterial\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">MeshBasicMaterial<\/span><span class=\"p\">({<\/span> <span class=\"nx\">map<\/span><span class=\"o\">:<\/span> <span class=\"nx\">doorColorTexture<\/span> <span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">Color<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;#ff0000&#39;<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6ematerial \u548c color \u4e0d\u51b2\u7a81\uff0c\u6548\u679c\u662f\u53e0\u52a0\u7684\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">wireframe<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">transparent<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">opacity<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ set opacity should also set transparent=true\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">alphaMap<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">doorAlphaTexture<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u53ef\u4ee5\u9690\u85cf\u4e00\u90e8\u5206\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nx\">material<\/span><span class=\"p\">.<\/span><span class=\"nx\">side<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">DoubleSide<\/span> <span class=\"c1\">\/\/ default won&#39;t be visible on the back side, avoid using DoubleSide whenever possible as it requires more resources\n<\/span><\/span><\/span><\/code><\/pre><\/div><p>\u5176\u4ed6\u51e0\u79cd\u5e38\u7528\u7684 Material \u8bfe\u7a0b\u91cc\u90fd\u6709\u4e0d\u5c11\u8be6\u7ec6\u4ecb\u7ecd<\/p>\n<ul>\n<li><a href=\"https:\/\/threejs.org\/docs\/#api\/en\/materials\/MeshNormalMaterial\">MeshNormalMaterial<\/a><\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/#api\/en\/materials\/MeshMatcapMaterial\">MeshMatcapMaterial<\/a>\n<ul>\n<li>appear illuminated, but it&rsquo;s just an illusion created by the texture, when no light in the scene<\/li>\n<li>but it will appear all the same regardless of camera orientation<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/MeshDepthMaterial\">MeshDepthMaterial<\/a>\n<ul>\n<li>simply color the geometry in white if it&rsquo;s close to the camera&rsquo;s <code>near<\/code> value and in black if it&rsquo;s close to the <code>far<\/code> value of the camera<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/MeshDepthMaterial\">MeshLambertMaterial<\/a>\n<ul>\n<li>this material requires light to be seen\uff0c\u6bd4\u5982\u6dfb\u52a0\u4e00\u4e2a\u6c1b\u56f4\u706f\uff0cAmbientLight<\/li>\n<li>\u52a0\u4e0a light \u540e\u4f1a\u663e\u5f97 realistic\uff0cillumination \u6548\u679c\u662f\u771f\u5b9e\u53ef\u4fe1\u7684\uff0c\u4e0d\u662ffake<\/li>\n<li>most performant material that uses lights<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/#api\/en\/materials\/MeshPhongMaterial\">MeshPhongMaterial<\/a>\n<ul>\n<li>similar to MeshLambertMaterial, less performant than MeshLambertMaterial<\/li>\n<li>can control the light reflection with <code>shininess<\/code> property, the higher the value, the shinier the surface.<\/li>\n<li>can also change the color of the reflection by <code>specular<\/code> property<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/#api\/en\/materials\/MeshToonMaterial\">MeshToonMaterial<\/a>\n<ul>\n<li>similar to the MeshLambertMaterial in terms of properties but with a cartoonish style<\/li>\n<\/ul>\n<\/li>\n<li>*<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/materials\/MeshStandardMaterial\">MeshStandardMaterial<\/a>\n<ul>\n<li>use PBR, supports light but with a more realistic algorithm and better parameters like roughness and metalness.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/MeshPhysicalMaterial\">MeshPhysicalMaterial<\/a>\n<ul>\n<li>extension of the MeshStandardMaterial, providing more advanced physically-based rendering properties<\/li>\n<li><code>clearcoat<\/code>, simulate a thin layer of varnish on top of the actual material, \u4e0a\u5c42\u6709\u4e00\u5c42\u50cf\u73bb\u7483\u6548\u679c<\/li>\n<li><code>sheen<\/code>, highlight the material when seen from a narrow angle, \u7ed2\u6bdb\u6548\u679c<\/li>\n<li><code>iridescence<\/code>, an effect where we can see color artifacts like a fuel puddle, soap bubbles, or even LaserDiscs, \u5f69\u8679\u8272\u7684\u53cd\u5149\uff0c\u6bd4\u5982\u706f\u6ce1\u7684\u8868\u9762<\/li>\n<li><code>transmission<\/code>, enable light to go through the material\uff0c\u67d0\u4e9b\u900f\u660e\u7684\u6750\u6599\uff0c\u6bd4\u5982\u73bb\u7483\u5236\u54c1<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/PointsMaterial\">PointsMaterial<\/a> handle particles<\/li>\n<\/ul>\n<h3 id=\"environment-map\">Environment map<\/h3>\n<p>Environment map is like an image of what&rsquo;s surrounding the scene.\nexample picture is found from <a href=\"https:\/\/polyhaven.com\/\">Poly Haven<\/a><\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-js\" data-lang=\"js\"><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ add environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"kr\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RGBELoader<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">from<\/span> <span class=\"s1\">&#39;three\/examples\/jsm\/loaders\/RGBELoader.js&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\">\/**\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> * Environment map\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cm\"> *\/<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"kr\">const<\/span> <span class=\"nx\">rgbeLoader<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">RGBELoader<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nx\">rgbeLoader<\/span><span class=\"p\">.<\/span><span class=\"nx\">load<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;.\/textures\/environmentMap\/2k.hdr&#39;<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environmentMap<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">environmentMap<\/span><span class=\"p\">.<\/span><span class=\"nx\">mapping<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nx\">EquirectangularReflectionMapping<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t\t<span class=\"c1\">\/\/ apply the scene\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span>    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">background<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nx\">environment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">environmentMap<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><\/code><\/pre><\/div>]]>"},{"title":"Now","link":"https:\/\/zhuzi.dev\/now\/","pubDate":"Tue, 14 Jan 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/now\/","description":"<ul>\n<li>\u88c1\u5458\u5931\u4e1a8\u4e2a\u6708\uff0c\u9760\u70b9\u517c\u804c\u96f6\u5de5\u6536\u5165\u8fc7\u6d3b\uff0c\u6253\u7b97\u8fc7\u5b8c\u5e74\u5f00\u59cb\u63fe\u4efd\u6b63\u5f0f\u5de5\n<ul>\n<li>\u5927\u9f84\u83dc\u9e21\u6c42\u5404\u4f4d\u795e\u4ed9\u4e0a\u5e1d\u4fdd\u4f51\uff0c\u4e0d\u8981\u592a\u4e3a\u96be\u6211\uff0c\u7ed9\u53e3\u996d\u5403<\/li>\n<\/ul>\n<\/li>\n<li>\u867d\u7136\u7a77\u4f46\u4e0d\u4f1a\u653e\u5f03\u770b live\n<ul>\n<li><del>Monkey Majik<\/del> \u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/li>\n<li>Cody Lee<\/li>\n<li>I don\u2019t like Mondays.<\/li>\n<\/ul>\n<\/li>\n<li>\u6700\u8fd1\u4e00\u4e2a\u6708\u5f00\u59cb\u559c\u6b22\u4e0a\u51fa\u95e8\u901b\u516c\u56ed\u6216\u8005\u5f92\u6b65\uff0c\u53ef\u80fd\u56e0\u4e3a\u642c\u5230\u4e86\u90ca\u533a\uff0c\u6709\u5f88\u591a\u516c\u56ed\u53ef\u4ee5\u53bb\u3002\u722c\u5c71\u4e5f\u5c1d\u8bd5\u8fc7\uff0c\u4e0d\u8fc7\u4e0d\u592a\u5229\u7d22\uff0c\u4e3b\u8981\u662f\u4e0b\u5c71\u611f\u89c9\u5bf9\u819d\u76d6\u786e\u5b9e\u4e0d\u592a\u597d\u3002\u53ef\u80fd\u591a\u7ec3\u7ec3\u5c31\u597d\u4e86\u5427\u3002\n<ul>\n<li>\u5f00\u59cb\u559c\u6b22\u5f92\u6b65\u662f\u4e0d\u662f\u6bcf\u4e2a\u4e2d\u5e74\u4eba\u5fc5\u7ecf\u4e4b\u8def\ud83e\udd23<\/li>\n<li>\u4e5f\u4e3b\u8981\u662f\u56e0\u4e3a\u6211\u6ca1\u4e8b\u505a\u7684\u8bdd\u5b9e\u5728\u4e0d\u4f1a\u51fa\u95e8\uff0c\u51fa\u95e8\u901b\u516c\u56ed\u6563\u6b65\u611f\u89c9\u5f88\u8f7b\u677e\u5f88\u81ea\u5728\uff0c\u662f\u6211\u80fd\u51fa\u95e8\u7684\u7406\u7531<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"2025-goal\">2025 Goal<\/h3>\n<h4 id=\"focus\">Focus<\/h4>\n<ul>\n<li>\u8fc7\u5b8c\u5e74\u627e\u4efd fulltime \u5de5<\/li>\n<\/ul>\n<h4 id=\"habit\">Habit<\/h4>\n<ul>\n<li>\u575a\u6301\u8bfb\u4e66\u4e60\u60ef\uff0c\u6bcf\u592910-30\u5206\u949f\u5c31\u597d\uff0c\n<ul>\n<li>\u6709\u597d\u591a\u4e66\u4ee5\u524d\u4e70\u7684\uff0c\u653e\u5f97\u5feb\u53d1\u9ec4\u4e86\u90fd\u6ca1\u770b\uff0c\u7ee7\u7eed\u6e05\u626b\u7eb8\u8d28\u4e66\u5e93\u5b58<\/li>\n<li>\u770b\u8fc7\u89c9\u5f97\u6ca1\u5fc5\u8981\u7559\u7740\u7684\u53ef\u4ee5\u6350\u53bb\u9644\u8fd1\u7684\u56fe\u4e66\u9986\uff0c\u6350\u4e86\u4e66\u8fd8\u53ef\u4ee5\u6362\u522b\u7684\u4e66\u56de\u6765<\/li>\n<\/ul>\n<\/li>\n<li>\u575a\u6301\u8fd0\u52a8\u4e60\u60ef\n<ul>\n<li>2024 \u5df2\u7ecf\u51cf\u4e0b 10 \u65a4\uff0c\u4eca\u5e74\u5982\u679c\u53ef\u4ee5\u60f3\u7ee7\u7eed\u51cf 5-10 \u65a4\uff0c\u4ee5\u53ca\u9700\u8981\u589e\u808c\u5851\u5f62<\/li>\n<\/ul>\n<\/li>\n<li>\u60f3\u6bcf\u4e2a\u6708\u90fd\u53bb\u516c\u56ed\u6563\u6b65\/\u5f92\u6b65 2-3 \u6b21\uff0c\u590f\u5929\u592a\u70ed\u5c31\u4e00\u4e2a\u6708 1 \u6b21\u5c31\u597d\ud83d\ude02<\/li>\n<li>\u575a\u6301\u8bb0\u8d26\uff0c\u73b0\u5728\u662f\u5728\u7528 iCost<\/li>\n<li>\u591a\u505a\u996d\uff0c\u5c11\u53eb\u5916\u5356<\/li>\n<li>\u89c4\u5212\u597d\u505a\u5bb6\u52a1\u5468\u671f<\/li>\n<\/ul>\n<h4 id=\"learn\">Learn<\/h4>\n<blockquote>\n<p>\u90fd\u662f 2024 \u6ca1\u5b66\uff08\u5b8c\uff09\u7684\u4e1c\u897f \ud83e\udd26\ud83c\udffb\u200d\u2640\ufe0f<\/p>","content":"<![CDATA[<ul>\n<li>\u88c1\u5458\u5931\u4e1a8\u4e2a\u6708\uff0c\u9760\u70b9\u517c\u804c\u96f6\u5de5\u6536\u5165\u8fc7\u6d3b\uff0c\u6253\u7b97\u8fc7\u5b8c\u5e74\u5f00\u59cb\u63fe\u4efd\u6b63\u5f0f\u5de5\n<ul>\n<li>\u5927\u9f84\u83dc\u9e21\u6c42\u5404\u4f4d\u795e\u4ed9\u4e0a\u5e1d\u4fdd\u4f51\uff0c\u4e0d\u8981\u592a\u4e3a\u96be\u6211\uff0c\u7ed9\u53e3\u996d\u5403<\/li>\n<\/ul>\n<\/li>\n<li>\u867d\u7136\u7a77\u4f46\u4e0d\u4f1a\u653e\u5f03\u770b live\n<ul>\n<li><del>Monkey Majik<\/del> \u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/li>\n<li>Cody Lee<\/li>\n<li>I don\u2019t like Mondays.<\/li>\n<\/ul>\n<\/li>\n<li>\u6700\u8fd1\u4e00\u4e2a\u6708\u5f00\u59cb\u559c\u6b22\u4e0a\u51fa\u95e8\u901b\u516c\u56ed\u6216\u8005\u5f92\u6b65\uff0c\u53ef\u80fd\u56e0\u4e3a\u642c\u5230\u4e86\u90ca\u533a\uff0c\u6709\u5f88\u591a\u516c\u56ed\u53ef\u4ee5\u53bb\u3002\u722c\u5c71\u4e5f\u5c1d\u8bd5\u8fc7\uff0c\u4e0d\u8fc7\u4e0d\u592a\u5229\u7d22\uff0c\u4e3b\u8981\u662f\u4e0b\u5c71\u611f\u89c9\u5bf9\u819d\u76d6\u786e\u5b9e\u4e0d\u592a\u597d\u3002\u53ef\u80fd\u591a\u7ec3\u7ec3\u5c31\u597d\u4e86\u5427\u3002\n<ul>\n<li>\u5f00\u59cb\u559c\u6b22\u5f92\u6b65\u662f\u4e0d\u662f\u6bcf\u4e2a\u4e2d\u5e74\u4eba\u5fc5\u7ecf\u4e4b\u8def\ud83e\udd23<\/li>\n<li>\u4e5f\u4e3b\u8981\u662f\u56e0\u4e3a\u6211\u6ca1\u4e8b\u505a\u7684\u8bdd\u5b9e\u5728\u4e0d\u4f1a\u51fa\u95e8\uff0c\u51fa\u95e8\u901b\u516c\u56ed\u6563\u6b65\u611f\u89c9\u5f88\u8f7b\u677e\u5f88\u81ea\u5728\uff0c\u662f\u6211\u80fd\u51fa\u95e8\u7684\u7406\u7531<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"2025-goal\">2025 Goal<\/h3>\n<h4 id=\"focus\">Focus<\/h4>\n<ul>\n<li>\u8fc7\u5b8c\u5e74\u627e\u4efd fulltime \u5de5<\/li>\n<\/ul>\n<h4 id=\"habit\">Habit<\/h4>\n<ul>\n<li>\u575a\u6301\u8bfb\u4e66\u4e60\u60ef\uff0c\u6bcf\u592910-30\u5206\u949f\u5c31\u597d\uff0c\n<ul>\n<li>\u6709\u597d\u591a\u4e66\u4ee5\u524d\u4e70\u7684\uff0c\u653e\u5f97\u5feb\u53d1\u9ec4\u4e86\u90fd\u6ca1\u770b\uff0c\u7ee7\u7eed\u6e05\u626b\u7eb8\u8d28\u4e66\u5e93\u5b58<\/li>\n<li>\u770b\u8fc7\u89c9\u5f97\u6ca1\u5fc5\u8981\u7559\u7740\u7684\u53ef\u4ee5\u6350\u53bb\u9644\u8fd1\u7684\u56fe\u4e66\u9986\uff0c\u6350\u4e86\u4e66\u8fd8\u53ef\u4ee5\u6362\u522b\u7684\u4e66\u56de\u6765<\/li>\n<\/ul>\n<\/li>\n<li>\u575a\u6301\u8fd0\u52a8\u4e60\u60ef\n<ul>\n<li>2024 \u5df2\u7ecf\u51cf\u4e0b 10 \u65a4\uff0c\u4eca\u5e74\u5982\u679c\u53ef\u4ee5\u60f3\u7ee7\u7eed\u51cf 5-10 \u65a4\uff0c\u4ee5\u53ca\u9700\u8981\u589e\u808c\u5851\u5f62<\/li>\n<\/ul>\n<\/li>\n<li>\u60f3\u6bcf\u4e2a\u6708\u90fd\u53bb\u516c\u56ed\u6563\u6b65\/\u5f92\u6b65 2-3 \u6b21\uff0c\u590f\u5929\u592a\u70ed\u5c31\u4e00\u4e2a\u6708 1 \u6b21\u5c31\u597d\ud83d\ude02<\/li>\n<li>\u575a\u6301\u8bb0\u8d26\uff0c\u73b0\u5728\u662f\u5728\u7528 iCost<\/li>\n<li>\u591a\u505a\u996d\uff0c\u5c11\u53eb\u5916\u5356<\/li>\n<li>\u89c4\u5212\u597d\u505a\u5bb6\u52a1\u5468\u671f<\/li>\n<\/ul>\n<h4 id=\"learn\">Learn<\/h4>\n<blockquote>\n<p>\u90fd\u662f 2024 \u6ca1\u5b66\uff08\u5b8c\uff09\u7684\u4e1c\u897f \ud83e\udd26\ud83c\udffb\u200d\u2640\ufe0f<\/p>\n<\/blockquote>\n<ul>\n<li>\u3010\u6682\u505c\u4e86\uff0c\u5c3d\u5feb\u91cd\u542f\u3011\u53bb\u5e74\u4e70\u7684 Three.js Journey \u7684\u8bfe\u7a0b 18\/67<\/li>\n<li>\u60f3\u5b66 SwiftUI\uff0c\u5c1d\u8bd5 iOS \u5f00\u53d1\n<ul>\n<li><a href=\"https:\/\/www.hackingwithswift.com\/100\/swiftui\">https:\/\/www.hackingwithswift.com\/100\/swiftui<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/tutorials\/swiftui\">https:\/\/developer.apple.com\/tutorials\/swiftui<\/a><\/li>\n<li><a href=\"https:\/\/cs193p.sites.stanford.edu\/2023\">https:\/\/cs193p.sites.stanford.edu\/2023<\/a><\/li>\n<\/ul>\n<\/li>\n<li>\u4e5f\u6709\u70b9\u8003\u8651<a href=\"https:\/\/www.udemy.com\/course\/go-the-complete-developers-guide\/\">\u5165\u95e8\u4e2a Golang<\/a><\/li>\n<\/ul>\n<h4 id=\"entertainment\">Entertainment<\/h4>\n<ul>\n<li>\u6bcf\u4e2a\u6708\u82b1\u70b9\u94b1\u5728\u7f8e\u4e3d\u5e9f\u7269\u5c0f\u5783\u573e\u4e0a\uff0c\u4f46\u9700\u8981\u8bbe\u7f6e\u4e2a\u9884\u7b97\uff0c\u4e0d\u80fd\u592a\u5938\u5f20<\/li>\n<li>\u6709\u94b1\u7684\u8bdd\uff0c\u4eca\u5e74\u60f3\u53bb\u6b27\u6d32\u65c5\u6e38\u4e00\u6b21\uff0c\u897f\u73ed\u7259\ud83c\uddea\ud83c\uddf8\ud83e\udd58\u6216\u8005\u610f\u5927\u5229\ud83c\uddee\ud83c\uddf9\ud83c\udf5d<\/li>\n<li>\u6216\u8005\u5e0c\u671b\u80fd\u529e\u65e5\u672c\u4e09\u5e74\u7b7e\u8bc1<\/li>\n<\/ul>\n<p>TBC<\/p>\n]]>"},{"title":"<open-heart>\u2764\ufe0f<\/open-heart>","link":"https:\/\/zhuzi.dev\/posts\/2025-01-12-open-heart\/","pubDate":"Sun, 12 Jan 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2025-01-12-open-heart\/","description":"<p>\u4e4b\u524d\u5728\u4e00\u4e2a<a href=\"https:\/\/www.benji.dog\/articles\/interactions-or-reactions\/\">\u5916\u56fd\u5f00\u53d1\u8005 benji \u7684\u535a\u5ba2<\/a>\u91cc\u53d1\u73b0\u6587\u7ae0\u672b\u6709\u4e2a\u2764\ufe0f\uff0c\u968f\u624b\u70b9\u4e86\u4e0b\u5c31 Like \u4e0a\u4e86\uff0c\u611f\u89c9\u5f88\u7b80\u6d01\u5f88\u53ef\u7231\uff0c\u9042\u6253\u5f00 devtools \u770b\u4e86\u4e0b\uff0c\n\u53d1\u73b0\u4e86\u8fd9\u4e2a <code>&lt;open-heart&gt;<\/code> \u5143\u7d20\uff0c\u5177\u4f53\u641c\u7d22\u4e86\u4e00\u4e0b\u4e4b\u540e\uff0c\u5c31\u60f3\u7740\u7ed9\u81ea\u5df1\u535a\u5ba2\u4e5f\u5b89\u4e0a\u4e86\u3002\n\u8bb0\u5f55\u4e00\u4e0b\u5927\u6982\u8fc7\u7a0b\uff0c\u7ed9\u6709\u60f3\u8981\u7ed9\u81ea\u5df1\u535a\u5ba2\u6216\u8005\u5176\u4ed6\u4efb\u4f55\u5730\u65b9\u7528\u4e0a\u73a9\u73a9\u7684\u4eba\u53c2\u8003\u3002<\/p>","content":"<![CDATA[<p>\u4e4b\u524d\u5728\u4e00\u4e2a<a href=\"https:\/\/www.benji.dog\/articles\/interactions-or-reactions\/\">\u5916\u56fd\u5f00\u53d1\u8005 benji \u7684\u535a\u5ba2<\/a>\u91cc\u53d1\u73b0\u6587\u7ae0\u672b\u6709\u4e2a\u2764\ufe0f\uff0c\u968f\u624b\u70b9\u4e86\u4e0b\u5c31 Like \u4e0a\u4e86\uff0c\u611f\u89c9\u5f88\u7b80\u6d01\u5f88\u53ef\u7231\uff0c\u9042\u6253\u5f00 devtools \u770b\u4e86\u4e0b\uff0c\n\u53d1\u73b0\u4e86\u8fd9\u4e2a <code>&lt;open-heart&gt;<\/code> \u5143\u7d20\uff0c\u5177\u4f53\u641c\u7d22\u4e86\u4e00\u4e0b\u4e4b\u540e\uff0c\u5c31\u60f3\u7740\u7ed9\u81ea\u5df1\u535a\u5ba2\u4e5f\u5b89\u4e0a\u4e86\u3002\n\u8bb0\u5f55\u4e00\u4e0b\u5927\u6982\u8fc7\u7a0b\uff0c\u7ed9\u6709\u60f3\u8981\u7ed9\u81ea\u5df1\u535a\u5ba2\u6216\u8005\u5176\u4ed6\u4efb\u4f55\u5730\u65b9\u7528\u4e0a\u73a9\u73a9\u7684\u4eba\u53c2\u8003\u3002<\/p>\n<p>\u57fa\u672c\u4e0a\u9700\u8981\u7684\u4e1c\u897f\u662f\uff1a<\/p>\n<ul>\n<li>cloudflare worker \u63d0\u4f9b\u4e00\u4e2a API \u6765\u5904\u7406\u7528\u6237\u7684 reaction<\/li>\n<li>cloudflare worker KV\uff0c\u4e00\u4e2a\u7b80\u5355\u7684 key-value storage\uff0c\u7528\u6765\u5b58\u50a8 reaction \u6570\u636e<\/li>\n<li>\u5728\u535a\u5ba2\u6a21\u7248\u91cc\u6dfb\u52a0 <code>&lt;open-heart&gt;<\/code> \u7ec4\u4ef6\u8fdb\u884c\u6e32\u67d3\u5373\u53ef<\/li>\n<\/ul>\n<h2 id=\"\u521b\u5efa-cloudflare-worker\">\u521b\u5efa cloudflare worker<\/h2>\n<p><a href=\"https:\/\/developers.cloudflare.com\/workers\/get-started\/guide\/\">\u53c2\u8003CF Workers \u6587\u6863<\/a>\uff0c\u76f4\u63a5\u7528 CLI \u6700\u65b9\u4fbf\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-sh\" data-lang=\"sh\"><span class=\"line\"><span class=\"cl\">pnpm create cloudflare@latest &lt;worker-name&gt;\n<\/span><\/span><\/code><\/pre><\/div><p>\u5176\u4e2d\u4f1a\u6709\u8ba9\u4f60\u9009\u62e9\u6a21\u677f\uff0c\u53ea\u9700\u8981\u6700\u7b80\u5355\u7684 Hello World example \u5c31\u884c\uff0c\u8bed\u8a00\u7684\u8bdd\u6309\u81ea\u5df1\u559c\u597d\u9009\uff0c\u6211\u662f\u7528 TypeScript\u3002<\/p>\n<p>\u8fd9\u6837\u672c\u5730\u7684 worker project \u5c31\u521b\u5efa\u597d\u4e86\u3002\ncd \u5230\u8fd9\u4e2a\u76ee\u5f55\u540e\uff0c\u7528 <code>npm run dev<\/code> \u5c31\u53ef\u4ee5\u7528 <a href=\"https:\/\/developers.cloudflare.com\/workers\/wrangler\/\">wrangler\uff08Cloudflare \u5f00\u53d1 CLI \u5de5\u5177\uff09<\/a> \u542f\u52a8\u4e00\u4e2a\u672c\u5730\u7684 worker \u4e86\uff0c\u7136\u540e\u5728\u6d4f\u89c8\u5668\u91cc\u9762\u8bbf\u95ee <code>http:\/\/localhost:8787\/<\/code> \u5c31\u53ef\u4ee5\u770b\u5230 Hello World!\u3002<\/p>\n<p>\u5982\u679c\u4e0d\u60f3\u81ea\u5df1\u521b\u5efa\u7ef4\u62a4 worker\uff0c\u4e5f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a Public API\uff0c<a href=\"https:\/\/github.com\/dddddddddzzzz\/api-oh\">https:\/\/api.oh.dddddddddzzzz.org\/<\/a>\uff0c\u4f46\u6570\u636e\u5c31\u4e5f\u4e0d\u662f\u5728\u81ea\u5df1\u7684\u624b\u91cc\u4e86\u3002<\/p>\n<h2 id=\"\u521b\u5efa-kv\">\u521b\u5efa KV<\/h2>\n<p><a href=\"https:\/\/developers.cloudflare.com\/kv\/get-started\/#2-create-a-kv-namespace\">\u53c2\u8003 CF Workers KV \u6587\u6863<\/a>\uff0c<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-sh\" data-lang=\"sh\"><span class=\"line\"><span class=\"cl\">npx wrangler kv namespace create &lt;BINDING_NAME&gt;\n<\/span><\/span><\/code><\/pre><\/div><p>\u76f4\u63a5\u5728\u524d\u9762\u521b\u5efa\u7684 worker \u9879\u76ee\u76ee\u5f55\u4e0b\u521b\u5efa\u3002<\/p>\n<p>\u4e0a\u9762\u7684\u547d\u4ee4\u4f1a\u7c7b\u4f3c\u6709\u4e0b\u9762\u8fd9\u4e2a\u63d0\u793a\uff1a<\/p>\n<pre tabindex=\"0\"><code>\ud83c\udf00 Creating namespace with title &#34;open-heart-worker-example-emoji-kv-example&#34;\n\u2728 Success!\nAdd the following to your configuration file in your kv_namespaces array:\n[[kv_namespaces]]\nbinding = &#34;emoji_kv_example&#34;\nid = &#34;cb6c56beba9f4e679aa34f0f21e0af31&#34;\n<\/code><\/pre><p>\u5728 worker \u9879\u76ee\u91cc\u4f1a\u6709\u4e2a <code>wrangler.toml<\/code> \u7684\u914d\u7f6e\u6587\u4ef6\uff0ckv_namespaces \u7684\u914d\u7f6e\u5728\u8fd9\u4e2a\u6587\u4ef6\u91cc\u80fd\u627e\u5230\u4f8b\u5b50\u3002\n\u8d34\u4e0a\u8fd9\u4e2a binding name \u548c id \u7684\u914d\u7f6e\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<h2 id=\"\u4fee\u6539-worker-\u811a\u672c\">\u4fee\u6539 worker \u811a\u672c<\/h2>\n<p>worker \u600e\u4e48\u5904\u7406\u6570\u636e\u63d0\u4f9b API \u7684\u4ee3\u7801\u53ef\u4ee5\u76f4\u63a5\u53c2\u8003 <a href=\"https:\/\/github.com\/dddddddddzzzz\/api-oh\/blob\/main\/src\/worker.js\">OpenHeart Protocol \u7684 Public API \u4ee3\u7801<\/a>\uff0c\u6284\u5230\u81ea\u5df1\u7684 worker \u9879\u76ee\u91cc\u7684 <code>src\/index.ts<\/code> \u6587\u4ef6\u91cc\uff0c\u6539\u4e00\u4e0b kv namespace \u7684\u547d\u540d\u5373\u53ef\u3002<\/p>\n<p>\u5177\u4f53\u6765\u8bf4\uff0c\u8fd9\u4e2a worker \u9700\u8981\u5904\u7406\u4e24\u4e2a\u8bf7\u6c42\uff1a<\/p>\n<ul>\n<li><code>GET \/&lt;domain&gt;\/&lt;uid&gt;<\/code>\uff1a\u83b7\u53d6\u67d0\u4e2a domain \u4e0b\u67d0\u4e2a uid \u7684 reaction \u6570\u636e\uff0c\u4e00\u822c\u4f1a\u662f\u8fd9\u6837\u7684 JSON\uff0c<code>{&quot;\u2764\ufe0f&quot;: 14,&quot;\ud83e\udec0&quot;: 12,&quot;\ud83e\udd68&quot;: 22}<\/code><\/li>\n<li><code>POST \/&lt;domain&gt;\/&lt;uid&gt;<\/code>\uff1a\u7528\u6237\u70b9\u51fb\u67d0\u4e2a emoji \u7684\u8bdd\uff0c\u5c31\u662f\u7528\u8fd9\u4e2a\u6765 send\uff0c\u5e76\u8bb0\u5f55\u6570\u636e<\/li>\n<\/ul>\n<p>\u8fd9\u4e2a\u662f\u4f8b\u5b50\u91cc\u7684\u5904\u7406\u65b9\u5f0f\uff0c\u4e5f\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u9700\u8981\u6539\u3002<\/p>\n<p>\u6539\u597d\u540e\uff0c\u672c\u5730\u542f\u52a8 worker <code>npm run dev<\/code>\uff0c\u5c31\u53ef\u4ee5\u7b80\u5355\u7528 curl \u6765\u6d4b\u8bd5\u4e00\u4e0b\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-sh\" data-lang=\"sh\"><span class=\"line\"><span class=\"cl\">$ curl -d <span class=\"s1\">&#39;\ud83d\ude3b&#39;<\/span> -X POST <span class=\"s1\">&#39;http:\/\/localhost:8787\/example.com\/uid&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"># \u6309\u8303\u4f8b\u7684\u811a\u672c\uff0c\u6b64\u5904\u4f1a\u6709\u4e2a recorded \u4fe1\u606f\u8fd4\u56de<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">$ curl <span class=\"s1\">&#39;http:\/\/localhost:8787\/example.com\/uid&#39;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">$ <span class=\"o\">{<\/span><span class=\"s2\">&#34;\ud83d\ude3b&#34;<\/span>: 1<span class=\"o\">}<\/span> <span class=\"c1\"># \u8fd9\u6837\u5c31\u83b7\u53d6\u4e86 emoji count<\/span>\n<\/span><\/span><\/code><\/pre><\/div><h2 id=\"\u53d1\u5e03-worker\">\u53d1\u5e03 worker<\/h2>\n<p>\u4e0a\u9762\u7684\u6b65\u9aa4\u5b8c\u6210\u540e\uff0c\u53ef\u4ee5\u7528 <code>npm run deploy<\/code> \u5c06 worker \u53d1\u5e03\u5230 Cloudflare \u4e0a\uff0c\n\u7136\u540e\u5728\u6d4f\u89c8\u5668\u91cc\u9762\u8bbf\u95ee\u547d\u4ee4\u884c\u4e0a\u63d0\u793a\u7684 worker URL \u5c31\u53ef\u4ee5\u770b\u5230\u6587\u5b57\u63d0\u793a\u4e86\u3002<\/p>\n<h2 id=\"\u6dfb\u52a0\u5230\u535a\u5ba2\u6a21\u7248\">\u6dfb\u52a0\u5230\u535a\u5ba2\u6a21\u7248<\/h2>\n<p>\u505a\u597d\u4e86 worker \u7684\u51c6\u5907\uff0c\u63a5\u4e0b\u6765\u53ea\u8981\u53c2\u8003<a href=\"https:\/\/github.com\/dddddddddzzzz\/open-heart-element\">\u7ec4\u4ef6\u6587\u6863\u91cc\u7684\u4f8b\u5b50<\/a>\uff0c\u5728\u535a\u5ba2\u6a21\u7248\u91cc\u52a0\u4e0a <code>&lt;open-heart&gt;<\/code> \u7ec4\u4ef6\u5c31\u53ef\u4ee5\u4e86\u3002\n\u4ee5\u6211\u73b0\u5728\u7528\u7684 hugo \u4e3a\u4f8b\uff0c\u6211\u5728 partials \u6587\u4ef6\u5939\u91cc\u52a0\u4e86\u4e2a <a href=\"https:\/\/github.com\/bambooom\/bambooom.github.io\/blob\/master\/themes\/PaperMod\/layouts\/partials\/reaction.html\"><code>reaction.html<\/code><\/a>\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-html\" data-lang=\"html\"><span class=\"line\"><span class=\"cl\"><span class=\"c\">&lt;!-- emoji \u4e5f\u53ef\u4ee5\u8bbe\u7f6e\u6210\u522b\u7684\uff0c\u4e5f\u53ef\u4ee5\u8bbe\u7f6e\u4e0d\u6b62\u4e00\u4e2a --&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">open-heart<\/span> <span class=\"na\">href<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;https:\/\/&lt;your-worker.url&gt;\/&lt;domain&gt;\/{{ .Permalink }}&#34;<\/span> <span class=\"na\">emoji<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;\u2764\ufe0f&#34;<\/span><span class=\"p\">&gt;<\/span>\u2764\ufe0f<span class=\"p\">&lt;\/<\/span><span class=\"nt\">open-heart<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c\">&lt;!-- load web component --&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">script<\/span> <span class=\"na\">src<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;https:\/\/unpkg.com\/open-heart-element&#34;<\/span> <span class=\"na\">type<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;module&#34;<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">script<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c\">&lt;!-- when the webcomponent loads, fetch the current counts for that page --&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">script<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nx\">whenDefined<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;open-heart&#39;<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kr\">const<\/span> <span class=\"nx\">oh<\/span> <span class=\"k\">of<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;open-heart&#39;<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nx\">oh<\/span><span class=\"p\">.<\/span><span class=\"nx\">getCount<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\">\/\/ refresh component after click\n<\/span><\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"c1\"><\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"s1\">&#39;open-heart&#39;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\t<span class=\"nx\">e<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">getCount<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">getCount<\/span><span class=\"p\">()<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">})<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;\/<\/span><span class=\"nt\">script<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u8bbe\u7f6e\u597d\u4e86\u4e4b\u540e\uff0c\u5c06\u8fd9\u4e2a partial \u653e\u5230\u4f60\u60f3\u8981\u7684\u5730\u65b9\u3002\u6bd4\u5982\u6211\u653e\u5230 <a href=\"https:\/\/github.com\/bambooom\/bambooom.github.io\/blob\/master\/themes\/PaperMod\/layouts\/_default\/single.html#L56\"><code>layouts\/_default\/single.html<\/code><\/a> \u91cc\u4e86\uff0c\u5728 prev\/next navigation \u524d\u9762\u7684\u5730\u65b9\u3002<\/p>\n<p>\u6700\u540e\u7ed9 <code>&lt;open-heart&gt;<\/code> \u52a0\u4e0a\u559c\u6b22\u7684\u6837\u5f0f\u5c31\u53ef\u4ee5\u4e86\u3002\u53ef\u4ee5\u501f\u7528 benji \u63d0\u4f9b\u7684 basic styling\uff1a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-css\" data-lang=\"css\"><span class=\"line\"><span class=\"cl\"><span class=\"nt\">open-heart<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">border<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"kt\">px<\/span> <span class=\"kc\">solid<\/span> <span class=\"mh\">#aaa<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"mf\">.4<\/span><span class=\"kt\">em<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">padding<\/span><span class=\"p\">:<\/span> <span class=\"mf\">.4<\/span><span class=\"kt\">em<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nt\">open-heart<\/span><span class=\"p\">:<\/span><span class=\"nd\">not<\/span><span class=\"o\">([<\/span><span class=\"nt\">disabled<\/span><span class=\"o\">])<\/span><span class=\"p\">:<\/span><span class=\"nd\">hover<\/span><span class=\"o\">,<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nt\">open-heart<\/span><span class=\"p\">:<\/span><span class=\"nd\">not<\/span><span class=\"o\">([<\/span><span class=\"nt\">disabled<\/span><span class=\"o\">])<\/span><span class=\"p\">:<\/span><span class=\"nd\">focus<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"mh\">#fff<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"kc\">pointer<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nt\">open-heart<\/span><span class=\"o\">[<\/span><span class=\"nt\">disabled<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"kc\">not-allowed<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"nt\">open-heart<\/span><span class=\"o\">[<\/span><span class=\"nt\">count<\/span><span class=\"o\">]<\/span><span class=\"p\">:<\/span><span class=\"nd\">not<\/span><span class=\"o\">([<\/span><span class=\"nt\">count<\/span><span class=\"o\">=<\/span><span class=\"s2\">&#34;0&#34;<\/span><span class=\"o\">])<\/span><span class=\"p\">::<\/span><span class=\"nd\">after<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">attr<\/span><span class=\"p\">(<\/span><span class=\"n\">count<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u6216\u8005\u4f7f\u7528\u7ec4\u4ef6\u6587\u6863\u91cc\u63d0\u4f9b\u7684\u4e00\u4e9b <a href=\"https:\/\/github.com\/dddddddddzzzz\/open-heart-element\/blob\/main\/demo.css\">demo \u6837\u5f0f<\/a>(<a href=\"https:\/\/element.openheart.fyi\/\">\u9884\u89c8<\/a>)\u3002<\/p>\n<h2 id=\"references\">References<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.benji.dog\/articles\/interactions-or-reactions\/\">Interactions or Reactions | benji<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dddddddddzzzz\/OpenHeart\">The Open Heart protocol.<\/a>\n<ul>\n<li><a href=\"https:\/\/openheart.fyi\/\">https:\/\/openheart.fyi\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/github.com\/dddddddddzzzz\/api-oh\">Public API for the OpenHeart protocol.<\/a>\n<ul>\n<li><a href=\"https:\/\/api.oh.dddddddddzzzz.org\/\">https:\/\/api.oh.dddddddddzzzz.org\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/github.com\/dddddddddzzzz\/open-heart-element\"><code>&lt;open-heart&gt;<\/code> component<\/a>\n<ul>\n<li>demo: <a href=\"https:\/\/element.openheart.fyi\/\">https:\/\/element.openheart.fyi\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/developers.cloudflare.com\/workers\/get-started\/guide\/\">Get started - CLI \u00b7 Cloudflare Workers docs<\/a><\/li>\n<li><a href=\"https:\/\/developers.cloudflare.com\/kv\/get-started\/\">Get started \u00b7 Cloudflare Workers KV<\/a><\/li>\n<\/ul>\n<p>\u53ef\u4ee5\u70b9\u2b07\ufe0f\u8fd9\u4e2a\u8bd5\u8bd5\u54e6\uff5e\ud83e\udd70<\/p>\n<p>\u2b07\ufe0f\n\u2b07\ufe0f\n\u2b07\ufe0f<\/p>\n<p>\ud83d\udc47\n\ud83d\udc47\n\ud83d\udc47<\/p>\n]]>"},{"title":"NeoDB shortcode \u66f4\u65b0","link":"https:\/\/zhuzi.dev\/posts\/2025-01-08-neodb-shortcode\/","pubDate":"Wed, 08 Jan 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2025-01-08-neodb-shortcode\/","description":"<p>\u7a81\u7136\u7684\uff0c\u66f4\u65b0\u4e86\u4e00\u4e0b\u672c\u5730\u7684 hugo\uff0c\u4ece 0.12x \u4e00\u4e0b\u5b50\u66f4\u65b0\u5230\u4e86 0.140\u3002\n\u7136\u540e\u672c\u5730\u542f\u52a8\u535a\u5ba2 <code>hugo server<\/code> \u51fa\u73b0\u4e86\u4e00\u5806\u62a5\u9519\u3002<\/p>\n<p>Don&rsquo;t Panic\u2757\ufe0f<\/p>\n<p>\u6309\u7167\u62a5\u9519\u4e00\u6761\u4e00\u6761\u89e3\u51b3\u4e00\u4e0b\u5c31\u597d\u5566\u3002\u4e3b\u8981\u5c31\u662f\u4e00\u4e9b function deprecated\uff0c\u4e00\u822c\u4f1a\u63d0\u793a\u7528\u4ec0\u4e48\u66ff\u4ee3\u3002\n\u7136\u540e\u53d1\u73b0\u6700\u5927\u9700\u8981\u6539\u52a8\u7684\u662f NeoDB shortcode\u3002<\/p>","content":"<![CDATA[<p>\u7a81\u7136\u7684\uff0c\u66f4\u65b0\u4e86\u4e00\u4e0b\u672c\u5730\u7684 hugo\uff0c\u4ece 0.12x \u4e00\u4e0b\u5b50\u66f4\u65b0\u5230\u4e86 0.140\u3002\n\u7136\u540e\u672c\u5730\u542f\u52a8\u535a\u5ba2 <code>hugo server<\/code> \u51fa\u73b0\u4e86\u4e00\u5806\u62a5\u9519\u3002<\/p>\n<p>Don&rsquo;t Panic\u2757\ufe0f<\/p>\n<p>\u6309\u7167\u62a5\u9519\u4e00\u6761\u4e00\u6761\u89e3\u51b3\u4e00\u4e0b\u5c31\u597d\u5566\u3002\u4e3b\u8981\u5c31\u662f\u4e00\u4e9b function deprecated\uff0c\u4e00\u822c\u4f1a\u63d0\u793a\u7528\u4ec0\u4e48\u66ff\u4ee3\u3002\n\u7136\u540e\u53d1\u73b0\u6700\u5927\u9700\u8981\u6539\u52a8\u7684\u662f NeoDB shortcode\u3002<\/p>\n<p>\u539f\u6765\u5e7f\u4e3a\u6d41\u4f20\u7684\u7248\u672c\u662f\u8fd9\u4e2a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-html\" data-lang=\"html\"><span class=\"line\"><span class=\"cl\">{{ $dbUrl := .Get 0 }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $dbApiUrl := &#34;https:\/\/neodb.social\/api\/&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $dbType := &#34;&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ if ( findRE `^.*neodb\\.social\\\/.*` $dbUrl ) }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbType = replaceRE `.*neodb.social\\\/(.*\\\/.*)` &#34;$1&#34; $dbUrl }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ else }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbType = $dbUrl }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbApiUrl = &#34;https:\/\/neodb.social\/api\/catalog\/fetch?url=&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ end }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $dbFetch := getJSON $dbApiUrl $dbType }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">...\u540e\u9762\u7701\u7565\n<\/span><\/span><\/code><\/pre><\/div><p>\u5176\u4e2d\u5f88\u91cd\u8981\u7684\u7528\u6765\u83b7\u53d6\u6570\u636e\u7684 <a href=\"https:\/\/gohugo.io\/functions\/data\/getjson\/\"><code>getJSON<\/code> Deprecated in v0.123.0<\/a>\uff0c\u4e0d\u80fd\u7528\u4e86\u3002\u6309\u7167\u6587\u6863\u91cc\u5199\u7684\u9700\u8981\u7528 <code>resources.GetRemote<\/code>\u3002<\/p>\n<p>\u6309\u7167\u6587\u6863\u91cc\u7684\u4f8b\u5b50\uff0c\u6211\u6539\u6210\u4e86\u8fd9\u4e2a\uff0c\u4eb2\u6d4b\u53ef\u7528\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-html\" data-lang=\"html\"><span class=\"line\"><span class=\"cl\">{{ $dbUrl := .Get 0 }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $dbApiUrl := &#34;https:\/\/neodb.social\/api\/&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $dbType := &#34;&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ if ( findRE `^.*neodb\\.social\\\/.*` $dbUrl ) }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbType = replaceRE `.*neodb.social\\\/(.*\\\/.*)` &#34;$1&#34; $dbUrl }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ else }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbType = $dbUrl }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ $dbApiUrl = &#34;https:\/\/neodb.social\/api\/catalog\/fetch?url=&#34; }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ end }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $url := printf &#34;%s%s&#34; $dbApiUrl $dbType }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ $data := dict }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ with resources.GetRemote $url }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ with .Err }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        {{ errorf &#34;%s&#34; . }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ else }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        {{ $data = . | transform.Unmarshal }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        {{ if $data }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            {{ $itemRating := 0 }}{{ with $data.rating }}{{ $itemRating = . }}{{ end }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card&#34;<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-subject&#34;<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-post&#34;<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">loading<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;lazy&#34;<\/span> <span class=\"na\">decoding<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;async&#34;<\/span> <span class=\"na\">referrerpolicy<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;no-referrer&#34;<\/span> <span class=\"na\">src<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;{{ $data.cover_image_url }}&#34;<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-content&#34;<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-title&#34;<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">href<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;{{ $dbUrl }}&#34;<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;cute&#34;<\/span> <span class=\"na\">target<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;_blank&#34;<\/span> <span class=\"na\">rel<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;noreferrer&#34;<\/span><span class=\"p\">&gt;<\/span>{{ $data.title }}<span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;rating&#34;<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;allstardark&#34;<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;allstarlight&#34;<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;width: {{ mul 10 $itemRating }}%&#34;<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;rating_nums&#34;<\/span><span class=\"p\">&gt;<\/span>{{ $itemRating }}<span class=\"p\">&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-abstract&#34;<\/span><span class=\"p\">&gt;<\/span>{{ $data.brief }}<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;db-card-cate&#34;<\/span><span class=\"p\">&gt;<\/span>{{ $data.category }}<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">                <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        {{ end }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ end }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ else }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;text-align: center;&#34;<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">small<\/span><span class=\"p\">&gt;<\/span>\u8fdc\u7a0b\u83b7\u53d6\u5185\u5bb9\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5 API \u6709\u6548\u6027\u3002<span class=\"p\">&lt;\/<\/span><span class=\"nt\">small<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    {{ errorf &#34;Unable to get remote resource %q&#34; $url }}\n<\/span><\/span><span class=\"line\"><span class=\"cl\">{{ end }}\n<\/span><\/span><\/code><\/pre><\/div><p>\u6548\u679c\u548c\u4e4b\u524d\u4e00\u6837<\/p>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/item\/tv\/2024\/12\/10\/a8c3222c-654f-4dc9-bfc5-f7e69c392b7e.jpg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/tv\/season\/5XNZfs5lya1GSt5zdRjhzx\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u767e\u5e74\u5b64\u72ec<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 87%\"><\/span><\/span><span class=\"rating_nums\">8.7<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u9b54\u5e7b\u73b0\u5b9e\u4e3b\u4e49\u4ee3\u8868\u4e4b\u4f5c\u3001\u7ecf\u5178\u5c0f\u8bf4\u300a\u767e\u5e74\u5b64\u72ec\u300b\u5c06\u62cd\u6210\u5267\uff01\nNetflix\u62ff\u4e0b\u4e86\u9a6c\u5c14\u514b\u65af\u8fd9\u5957\u5c0f\u8bf4\u7684\u6539\u7f16\u6743\uff0c\u5c06\u628a\u5b83\u62cd\u6210\u4e00\u90e8\u897f\u73ed\u7259\u8bed\u5267\u96c6\u3002\u8fd9\u4e5f\u5c06\u662f\u8be5\u5c0f\u8bf4\u8bde\u751f50\u591a\u5e74\u9996\u6b21\u5f71\u89c6\u5316\uff0c\u9a6c\u5c14\u514b\u65af\u7684\u5bb6\u65cf\u7b2c\u4e00\u6b21\u7ed9\u51fa\u4e86\u6539\u7f16\u6743\u3002\u4ece\u5185\u5bb9\u548c\u8868\u73b0\u770b\u5176\u6539\u7f16\u96be\u5ea6\u4e5f\u4e0d\u8a00\u800c\u55bb\u3002\n\u300a\u767e\u5e74\u5b64\u72ec\u300b\u901a\u8fc7\u4e00\u4e2a\u5bb6\u65cf\u3001\u4e00\u4e2a\u5c0f\u9547\u7684\u56de\u5fc6\uff0c\u5c55\u73b0\u4e86\u4e00\u90e8\u62c9\u4e01\u7f8e\u6d32\u7684\u767e\u5e74\u753b\u5377\uff0c\u73b0\u5b9e\u4e0e\u865a\u5e7b\u3001\u795e\u8bdd\u7b49\u7ed3\u5408\u3002\u4f5c\u8005\u52a0\u897f\u4e9a\u00b7\u9a6c\u5c14\u514b\u65af\u57281982\u5e74\u83b7\u5f97\u8bfa\u8d1d\u5c14\u6587\u5b66\u5956\u3002<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">tv<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n]]>"},{"title":"2024 \u603b\u7ed3","link":"https:\/\/zhuzi.dev\/posts\/2025-01-02-2024-summary\/","pubDate":"Thu, 02 Jan 2025 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2025-01-02-2024-summary\/","description":"<blockquote>\n<p>\u8fd9\u6b21\u6ca1\u4ec0\u4e48\u4e3b\u9898\uff0c\u60f3\u5230\u4ec0\u4e48\u5199\u4ec0\u4e48\u3002<\/p>\n<\/blockquote>\n<p>2024\u5e74\u53ea\u4e0a\u4e864\u4e2a\u6708\u73ed\uff0c\u7136\u540e\u7ecf\u5386\u4e86\u7b2c\u4e8c\u6b21\u88c1\u5458\uff0c\u6709\u79cd\u679c\u4e0d\u5176\u7136\u7684\u611f\u89c9\uff0c\u5c0f\u5916\u5305\u4e5f\u6ca1\u5f97\u505a\u4e86\ud83d\ude05\n\u53cd\u6b63\u8fc7\u4e86\u5f88\u4e45\u4e86\uff0c\u76f4\u63a5\u8bf4\u4e86\uff0c\u505a\u5916\u5305\u7684\u516c\u53f8\u5c31\u662f\u5b57\u8282\uff0c\u6211\u5728\u98de\u4e66\u7684\u4e00\u4e2a\u5c0f\u90e8\u95e8\u6253\u6742\u3002<\/p>","content":"<![CDATA[<blockquote>\n<p>\u8fd9\u6b21\u6ca1\u4ec0\u4e48\u4e3b\u9898\uff0c\u60f3\u5230\u4ec0\u4e48\u5199\u4ec0\u4e48\u3002<\/p>\n<\/blockquote>\n<p>2024\u5e74\u53ea\u4e0a\u4e864\u4e2a\u6708\u73ed\uff0c\u7136\u540e\u7ecf\u5386\u4e86\u7b2c\u4e8c\u6b21\u88c1\u5458\uff0c\u6709\u79cd\u679c\u4e0d\u5176\u7136\u7684\u611f\u89c9\uff0c\u5c0f\u5916\u5305\u4e5f\u6ca1\u5f97\u505a\u4e86\ud83d\ude05\n\u53cd\u6b63\u8fc7\u4e86\u5f88\u4e45\u4e86\uff0c\u76f4\u63a5\u8bf4\u4e86\uff0c\u505a\u5916\u5305\u7684\u516c\u53f8\u5c31\u662f\u5b57\u8282\uff0c\u6211\u5728\u98de\u4e66\u7684\u4e00\u4e2a\u5c0f\u90e8\u95e8\u6253\u6742\u3002<\/p>\n<p>\u5e74\u521d\u7684\u65f6\u5019\uff0c\u56e0\u4e3a\u6ca1\u4ec0\u4e48\u5e74\u5047\uff0c\u6211\u8fd8\u4e0d\u662f\u5f88\u60f3\u6d6a\u8d39\uff08\u73b0\u5728\u89c9\u5f97\u5f88\u53ef\u7b11\uff09\uff0c\u662f\u62d6\u5230\u4e86\u9664\u5915\u524d\u4e00\u5929\u624d\u8bf7\u4e86\u534a\u5929\u5047\u56de\u6b66\u6c49\u3002\n\u5f53\u65f6\u5b57\u8282\u7ed9\u6240\u6709\u81ea\u5df1\u7684\u5458\u5de5\u9664\u5915\u653e\u5047\uff0c\u4e0d\u5360\u7528\u5e74\u5047\u5929\u6570\uff0c\u7136\u800c\u4e0d\u5305\u62ec\u5916\u5305\uff0c\u6240\u4ee5\u9664\u5915\u5f53\u5929\u662f\u76f4\u63a5\u6d88\u8017\u6211\u81ea\u5df1\u7684\u5e74\u5047\u5355\u72ec\u8bf7\u4e00\u5929\u3002<\/p>\n<p>\u8fd8\u8bb0\u5f97\u8981\u653e\u5047\u90a3\u5468\uff0c\u6574\u5c42\u697c\u7684\u4eba\u8d8a\u6765\u8d8a\u5c11\uff0c\u6700\u540e\u4e00\u5c42\u7684\u534a\u4fa7\u57fa\u672c\u53ea\u5269\u6211\u4e00\u4e2a\u4eba\u5728\u65e0\u804a\u7684\u6478\u9c7cwwwww<\/p>\n<p>\u8fc7\u5b8c\u5e74\u56de\u6765\u540e\uff0c\u90e8\u95e8\u91cc\u8fd8\u5165\u804c\u4e86\u4e24\u4e2a\u65b0\u5458\u5de5\uff0c\u597d\u50cf\u662f\u4ece\u5176\u4ed6\u90e8\u95e8\u8f6c\u8fc7\u6765\u7684\u3002\n\u4f46\u624d\u8fc7\u4e86\u4e00\u4e2a\u6708\uff0c\u7a81\u5982\u5176\u6765\u7684\u98de\u4e66\u5927\u88c1\u5458\uff0c\u6211\u6240\u5728\u7684\u90e8\u95e8\uff0c\u76f4\u63a5\u628a\u6df1\u5733\u7684\u6b63\u5f0f\u5458\u5de5\u5168\u90e8\u88c1\u4e86\uff0c\u4e00\u4e2a\u4e0d\u5269\uff0c\n\u4e00\u5f00\u59cb\u5bf9\u5916\u5305\u600e\u4e48\u5904\u7406\u8fd8\u6ca1\u6709\u51b3\u7b56\uff0c\u62db\u6211\u8fdb\u6765\u7684leader\u5bf9\u6211\u8bf4\uff0c\u4e0d\u4e00\u5b9a\u4f1a\u88c1\uff0c\u6bd5\u7adf\u8fd8\u662f\u6709\u5f88\u591a\u5de5\u4f5c\u8981\u505a\u7684\u3002\n\u4f46\u6211\u89c9\u5f97\u4e0d\u53ef\u80fd\u6b63\u5f0f\u804c\u5de5\u5168\u8d70\u4e86\uff0c\u53ea\u7559\u5916\u5305\uff0c\u6bd5\u7adfleader \u81ea\u5df1\u4e5f\u5e38\u9a7b\u5317\u4eac\u800c\u4e0d\u662f\u6df1\u5733\u3002\u6211\u65e9\u5c31\u89c9\u5f97\u5916\u5305\u4e5f\u4f1a\u4e00\u8d77\u88c1\u5458\u7684\u3002\n\u867d\u7136\u665a\u4e86\u4e24\u5468\uff0c\u5916\u5305\u6b63\u5f0f\u901a\u77e5\u9000\u573a\u3002\u6211\u8ddf\u5916\u5305\u516c\u53f8\u8981\u5230\u4e86\u534a\u4e2a\u6708\u5de5\u8d44\u505a\u8d54\u507f\u3002\n\u5c31\u8fde\u5916\u5305\u516c\u53f8\u62db\u4eba\u7684\u5546\u52a1\u90fd\u6362\u4e86\u4e24\u6b21\uff0c\u5176\u4e2d\u4e00\u4e2a\u8fd8\u7279\u522b\u4e0d\u4f1a\u505a\u4e8b\u4e0d\u4f1a\u8bf4\u8bdd\u7684\u8ba9\u4eba\u538c\u70e6\u60f3\u9a82\u4e0d\u8d1f\u8d23\u4efb\u3002\n\u6211\u7684\u8d54\u507f\u662f\u79bb\u804c\u63a5\u8fd1\u4e00\u4e2a\u6708\u624d\u7ed9\u5230\u4f4d\u3002<\/p>\n<p>\u5f85\u5728\u5b57\u8282\u7684\u5012\u6570\u7b2c\u4e8c\u5929\uff0c\u9762\u8bd5\u4e86\u6296\u97f3\u4e0b\u9762\u67d0\u4e2a\u5c0f\u90e8\u95e8\u7684\u5916\u5305\uff0c\u4f5c\u4e3a\u4e00\u4e2a\u975e\u5e38\u4e0d\u64c5\u957f\u9762\u8bd5\u7684\u83dc\u9e21\uff0c\u5f53\u573a\u5c31\u77e5\u9053\u6ca1\u620f\u4e86\uff5e\n\u4e4b\u524d\u7684leader \u8fd8\u633a\u597d\u4eba\u7684\uff0c\u8fd8\u60f3\u5c1d\u8bd5\u628a\u6211\u5185\u63a8\u5230\u5176\u4ed6\u90e8\u95e8\u3002\n\u540e\u6765leader \u7684\u4e00\u4e2a\u719f\u4eba\u8fd8\u627e\u8fc7\u6211\u60f3\u5e2e\u6211\u5185\u63a8\u5176\u4ed6\u90e8\u95e8\u7684\u6b63\u5f0f\u5458\u5de5\uff0c\u4f46\u56e0\u4e3a\u6211\u7684\u5de5\u4f5c\u5e74\u9650\u5f88\u957f\u4e86\uff0c\u5916\u5305\u7ed9\u6211\u7684\u8bc4\u7ea7\u636e\u8bf4\u662f\u6700\u9ad8\u7684\uff08\u6211\u4e5f\u4e0d\u77e5\u9053\u5230\u5e95\u662f\u4ec0\u4e48\u8bc4\u7ea7\uff0c\u4e5f\u4e0d\u61c2\u4eec\u5927\u5382\u7684\u804c\u7ea7\uff09\uff0c\n\u6b63\u5f0f\u804c\u5de5\u53ea\u80fd\u63a8\u8350\u518d\u5f80\u4e0a\u7684leader \u7ea7\u522b\uff0c\u4f46\u6211\u4ece\u6765\u6ca1\u5e26\u8fc7\u56e2\u961f\uff0c\u6211\u4e5f\u4e0d\u592a\u60f3\u505a\uff0c\u6211\u771f\u89c9\u5f97\u6211\u81ea\u5df1\u4ee3\u7801\u8fd8\u6ca1\u5199\u6e05\u695a\uff0c\u6709\u4ec0\u4e48\u8d44\u683c\u5e26\u5176\u4ed6\u4eba\uff1f\n\u6240\u4ee5\u5927\u6982\u7b80\u5386\u5173\u90fd\u6ca1\u8fc7\uff0c\u540e\u9762\u518d\u65e0\u6d88\u606f\u3002<\/p>\n<p>\u7136\u540e5\u6708\u5f00\u59cb\u6446\u70c2\u5566\u3002\u5269\u4f598\u4e2a\u6708\u4e5f\u4ece\u6ca1\u8ba4\u771f\u627e\u8fc7\u5de5\u4f5c\u3002\u4e0a\u4e2a\u6708\u670b\u53cb\u8bf4\u5e2e\u5fd9\u5185\u63a8\u4e86\u4e00\u4e2a\u521b\u4e1a\u516c\u53f8\uff0c\u6ca1\u6709\u4ec0\u4e48\u4e0b\u6587\u3002\n\u524d\u4e24\u5468\u53e6\u4e00\u4e2a\u524d\u540c\u4e8b\u5e2e\u5fd9\u5185\u63a8\u4e86\u4ed6\u73b0\u5728\u7684\u516c\u53f8\uff0c\u4e5f\u4e00\u6837\u6ca1\u6709\u4e0b\u6587\u3002<\/p>\n<p>\u4e0d\u8fc7\u4e0d\u662f\u5b8c\u5168\u6ca1\u6709\u6536\u5165\u3002<\/p>\n<p>3\u6708-10\u6708\uff08\u524d\u540c\u4e8b\u73b0\u5728\u5355\u7eaf\u662f\uff09\u670b\u53cb\u7ee7\u7eed\u627e\u6211\u5e2e\u5fd9\u505a\u70b9\u5c0f\u517c\u804c\uff0c\u90fd\u662f\u4e34\u65f6\u7684\u5c0f\u6d3b\uff0c\u6309\u5c0f\u65f6\u7b97\uff0c\u5de5\u4f5c\u91cf\u975e\u5e38\u4e0d\u5b9a\uff0c11\u6708\u5f00\u59cb\u5c31\u6682\u65f6\u6ca1\u6d3b\u4e86\u3002<\/p>\n<p>10\u6708\u5f00\u59cb\u5230\u73b0\u5728\uff0c\u53e6\u5916\u6709\u5927\u5b66\u5b66\u59d0\u8bf4\u8ba9\u6211\u53bb\u5979\u5728\u7684\u516c\u53f8\u505a\u70b9\u517c\u804c\uff0c\u6309\u5929\u7b97\uff0c\u8fdc\u7a0b\u5de5\u4f5c\uff0c\u6211\u81ea\u5df1\u5b89\u6392\u5de5\u4f5c\u65f6\u95f4\u5c31\u597d\uff0c\u9879\u76ee\u4e5f\u6682\u65f6\u8fd8\u6ca1\u5230\u8d76\u65f6\u95f4\u7684\u9636\u6bb5\uff0c\u6240\u4ee5\u6682\u65f6\u6ca1\u592a\u5927\u538b\u529b\u3002\n\u4e00\u5f00\u59cb\u8fd8\u60f3\u8fc7\u8fd9\u4e2a\u517c\u804c\u8981\u4e0d\u8981\u5c3d\u91cf\u505a\u957f\u671f\u4e00\u70b9\uff0c\u4f46\u662f\u540e\u9762\u771f\u6b63\u5f00\u59cb\u4f53\u9a8c\u8fc7\u4e86\u4e4b\u540e\uff0c\u53c8\u89c9\u5f97\u6211\u4e0d\u4e00\u5b9a\u80fd\u575a\u6301\u3002\u56e0\u4e3a\u4ed6\u4eec\u516c\u53f8\u662f\u5f88\u4f20\u7edf\u7684\u9999\u6e2fIT\u516c\u53f8\uff0c\u5b8c\u5168win\u73af\u5883\uff0c\u4e0d\u5f97\u4e0d\u542f\u7528\u4e0d\u5e38\u7528\u7684\u65e7win\u672c\uff0c\u6682\u65f6\u6ca1\u7528\u60ef\uff0c\u6240\u4ee5\u4f53\u9a8c\u5f88\u4e0d\u597d\u3002\u7248\u672c\u7ba1\u7406\u662fsvn\uff0c\u4e0d\u662fgit\uff0c\u7136\u540e\u65e5\u5e38\u7528\u7684\u5404\u79cdcommand\u4e0d\u77e5\u9053\u600e\u4e48\u5199\uff0c\u8fd8\u5f97\u4e0d\u505c\u67e5\u3002\n\u540e\u9762\u653e\u5f03\u76f4\u63a5\u7528\u56fe\u5f62\u754c\u9762\u7684\u5de5\u5177\u4e86\ud83d\ude02\n\u7136\u540e\u9879\u76ee\u662f java spring \u6846\u67b6\uff0c\u6211\u5b8c\u5168\u6ca1\u5199\u8fc7 java\uff0c\u5e78\u597d\u5f88\u5bb9\u6613\u770b\u61c2\uff0c\u73b0\u5728\u9760 AI \u548c\u4e1c\u6284\u897f\u6284\u5730\u5728\u5199\u3002\n\u524d\u7aef\u9875\u9762\u8fd8\u662f vanilla js \u548c jquery \u7684\u65f6\u4ee3\ud83d\ude02\n\u9875\u9762\u9700\u6c42\u5176\u5b9e\u5f88\u7b80\u5355\uff0c\u4f46\u662f\u4e1a\u52a1\u903b\u8f91\u7a0d\u5fae\u590d\u6742\u70b9\uff0c\u9700\u8981\u5148\u7406\u89e3\u4e00\u4e0b\u3002<\/p>\n<p>\u5927\u6982\u7b97\u4e86\u4e0b\uff0c\u5927\u534a\u5e74\u4e0b\u6765\u96f6\u5de5\u517c\u804c\u5927\u6982\u53ea\u8d5a\u4e863w\ud83d\ude02\n\u6240\u4ee5\u4eca\u5e74\u6700\u5927\u7684\u76ee\u6807\u5c31\u662f\u91cd\u65b0\u627e\u4e00\u4efd\u5168\u804c\u5de5\u4f5c\u5427\u3002\u60f3\u60f3\u9762\u8bd5\u5c31\u53ea\u60f3\u75db\u82e6\u9762\u5177\u5e26\u4e0a\ud83d\ude16 \u4f46\u662f\u8fd9\u4e16\u9053\uff0c\u6000\u7591\u6211\u8fd9\u79cd\u6c34\u5e73\u8fd8\u80fd\u4e0d\u80fd\u6709\u9762\u8bd5\u4e86\u90fd\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8<\/p>\n<p>5\u6708\u5f00\u59cb\u6211\u642c\u5230\u4e86\u81ea\u5df1\u90ca\u533a\u7684\u65b0\u623f\uff0c\u96f6\u96f6\u788e\u788e\u82b1\u4e86\u4e00\u4e2a\u6708\u65f6\u95f4\u505a\u6536\u7eb3\u6574\u7406\uff0c\u4e66\u67dc\u6574\u7406\u3001\u624b\u529e\u6536\u7eb3\u6574\u7406\u3001\u8863\u67dc\u6536\u7eb3\u6574\u7406\u3002\n\u611f\u89c9\u505a\u6e05\u695a\u6536\u7eb3\u4e4b\u540e\uff0c\u4eba\u4f1apeace\u5f88\u591a\uff0c\u4f60\u77e5\u9053\u81ea\u5df1\u5728\u610f\u7684\u4e1c\u897f\u3001\u9700\u8981\u7684\u4e1c\u897f\u5927\u6982\u5728\u54ea\u91cc\u3002<\/p>\n<p>6\u6708\u5f00\u59cb\u7ec8\u4e8e\u91cd\u65b0\u5199\u624b\u5e10\u4e86\uff0c\u5e76\u4e14\u5f00\u59cb\u5c1d\u8bd5\u6062\u590d\u505a\u8fd0\u52a8\u4e60\u60ef\u3002\u524d5\u4e2a\u6708\u5f00\u5929\u7a97\u4e0d\u53ef\u8865\u4e86\uff0c\u5c31\u968f\u98ce\u4e86\u3002\n5\u30016\u6708\u4e5f\u89e3\u51b3\u6389\u4e86\u5f88\u591a adulting \u7684\u4e8b\u3002\u5176\u5b9e\u5e76\u4e0d\u96be\uff0c\u4e5f\u4e0d\u82b1\u5f88\u591a\u65f6\u95f4\uff0c\u4f46\u4e0d\u77e5\u9053\u4e3a\u4f55\u5c31\u4f1a\u4e00\u76f4\u4e0d\u60f3\u505a\u62d6\u7740\u3002<\/p>\n<p>7\u6708\u4e0b\u65ec\u5f00\u59cb\u8ba4\u771f\u51cf\u80a5\uff0c\u8fd9\u662f\u7b2c\u4e8c\u6b21\u8ba4\u771f\u51cf\u80a5\uff0c\u4e0a\u4e00\u6b21\u5df2\u7ecf\u662f\u5dee\u4e0d\u591a\u4e5d\u3001\u5341\u5e74\u524d\u4e86\uff0c\u5f53\u65f6\u7b97\u662f\u75db\u4e0b\u51b3\u5fc3\u624d\u7ec8\u4e8e\u82b1\u5927\u534a\u5e74\u65f6\u95f4\u51cf\u4e0b\u6765\u4e86\u5341\u51e0\u65a4\u3002\n\u4e4b\u540e\u4e00\u76f4\u7b97\u6709\u597d\u597d\u7ef4\u6301\u7740\u3002\u524d\u5e74\u7684\u7b2c\u4e00\u6b21\u88c1\u5458\u7ed9\u6211\u7684\u6253\u51fb\u592a\u5927\uff0c\u7136\u540e\u81ea\u66b4\u81ea\u5f03\uff0c\u5403\u4e86\u5f88\u591a\u5f88\u591a\u5783\u573e\u5916\u5356\uff0c\u4e5f\u5b8c\u5168\u4e0d\u8fd0\u52a8\uff0c\u800c\u4e14\u62d2\u7edd\u79f0\u91cd\uff0c\u5c31\u5f53\u4e0d\u77e5\u9053\u3002\n\u5f53\u7136\uff0c\u4e0d\u7528\u79f0\u91cd\u4e5f\u77e5\u9053\u8863\u670d\u88e4\u5b50\u7a7f\u7740\u53d8\u7d27\u4e86\uff0c\u4f53\u91cd\u80af\u5b9a\u6da8\u4e86\u5f88\u591a\u5457\u3002\u7136\u540e\u7ec8\u4e8e\u5230\u4e86\u90a3\u4e2a\u6ee1\u76c8\u7684\u4e34\u754c\u70b9\uff0c\u5fcd\u4e0d\u4e86\u81ea\u5df1\uff0c\u5c31\u91cd\u65b0\u5f00\u59cb\u8ba4\u771f\u51cf\u80a5\u4e86\u3002\n\u8fd9\u6b21\u82b13\u4e2a\u591a\u6708\u51cf\u4e8610\u65a4\u5de6\u53f3\u5427\u3002<\/p>\n<p>\u7136\u540e11\u6708\u53bb\u65e5\u672c\u73a9\u4e8610\u5929\uff0c\u56de\u6765\u4e4b\u540e\u6682\u65f6\u6446\u70c2\u4e86\u4e24\u5468\uff0c12\u6708\u6062\u590d\u4e86\u4e24\u5468\u5f88\u7b80\u5355\u7684\u8fd0\u52a8\uff0c\u5929\u51b7\u4e86\u5b9e\u5728\u4e0d\u60f3\u52a8\uff0c\u6253\u7b97\u4eca\u5e74\u518d\u7ee7\u7eed\u505a\u70b9\u80fd\u7ef4\u6301\u4f53\u91cd\u6216\u8005\u518d\u51cf\u91cd\u589e\u808c\u4e00\u4e0b\uff0c\u4fdd\u6301\u5065\u5eb7\u5c31\u597d\u7684\u8fd0\u52a8\u5427\u3002<\/p>\n<p>11\u6708\u53bb\u65e5\u672c\u73a9\u5f97\u5f88\u5f00\u5fc3\uff0c\u53bb\u770b\u4e86\u6f14\u5531\u4f1a\uff0c\u770b\u5230\u96ea\u666f\u2744\ufe0f\uff0c\u770b\u5230\u67ab\u53f6\ud83c\udf41\uff0c\u540e\u534a\u8fd8\u5b9e\u73b0\u4e86\u4e00\u4e2a\u4eba\u65c5\u6e38\uff0c\u5929\u5929\u66b4\u8d70\uff0c\u4f46\u662f\u662f\u8fd15\u5e74\u6765\u6700\u6700\u6700\u5f00\u5fc3\u7684\u4e00\u6bb5\u65f6\u95f4\u3002\n\uff08\u8be6\u60c5\u8bda\u9080\u770b\u770b\u6211\u7684\u5f00\u5fc3\u6d41\u6c34\u8d26\ud83d\ude06 <a href=\"https:\/\/zhuzi.dev\/posts\/2024-11-20-travel-sapporo-1\/\">\u4e00<\/a> <a href=\"https:\/\/zhuzi.dev\/posts\/2024-11-21-travel-sapporo-2\/\">\u4e8c<\/a> <a href=\"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-1\/\">\u4e09<\/a> <a href=\"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-2\/\">\u56db<\/a> <a href=\"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-3\/\">\u4e94<\/a>\uff09<\/p>\n<p>\u53e6\u5916\uff0c\u4eca\u5e74\u53bb\u770b\u4e86\u5f88\u591a\u6b21livehouse\u548c\u51e0\u6b21\u6f14\u5531\u4f1a\uff0c\u6309\u6211\u4e2a\u4eba\u7684\u559c\u597d\u8bc4\u4e86\u4e0b\uff1a<\/p>\n<table>\n  <thead>\n      <tr>\n          <th>Artist<\/th>\n          <th>\u4e2a\u4eba\u559c\u597d<\/th>\n      <\/tr>\n  <\/thead>\n  <tbody>\n      <tr>\n          <td>I don&rsquo;t like Mondays.<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u60b6\u9905MOONBAND<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u6625\u91ce<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u821e\u53f0\u5267\u300a\u66b4\u98ce\u96e8\u8ba1\u5212\u300b<\/td>\n          <td>\u3010\u5dee\u8bc4\u3011<\/td>\n      <\/tr>\n      <tr>\n          <td>Paris Match<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f \u3010\u60ca\u559c\u3011<\/td>\n      <\/tr>\n      <tr>\n          <td>\u4f0a\u4e1c\u6b4c\u8bcd\u592a\u90ce<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u7f8a\u6587\u5b66<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>Chinese Football<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u4e94\u6761\u4eba<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>Burnout Syndromes<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u9ed1\u5ddd\u6c99\u826f<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>Tizzy Bac<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>re:plus<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u5b87\u591a\u7530\u5149<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>Carsick Cars<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>\u30df\u30c4\u30e1<\/td>\n          <td>\u2b50\ufe0f\uff08\u5de1\u6f14\u5b8c\u6ca1\u51e0\u5929\u5c31\u5ba3\u5e03\u6d3b\u52a8\u4f11\u6b62\u4e86\uff0c\u96be\u602a\u8868\u6f14\u90a3\u4e48\u6b7b\u6c14\u6c89\u6c89<\/td>\n      <\/tr>\n      <tr>\n          <td>mol-74<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f<\/td>\n      <\/tr>\n      <tr>\n          <td>Snow Man \u672d\u5e4c\u86cb<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u3010\u96be\u5f97\u5750\u5230\u4e86arena\uff0c\u4f46\u5b8c\u5168\u6ca1\u6ee1\u8db3\ud83d\ude02<\/td>\n      <\/tr>\n      <tr>\n          <td>my little airport<\/td>\n          <td>\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u2b50\ufe0f\u3010\u5c3e\u573a\uff0c\u5b8c\u7f8e<\/td>\n      <\/tr>\n  <\/tbody>\n<\/table>\n<p>\u8fd9\u4e48\u770b\u4e0b\u6765\uff0c\u6700\u559c\u6b22\u7684\u662f\u4e94\u6761\u4eba\u548cmla\u3002\u4e94\u6761\u4eba\u5b9e\u9645\u4e0a\u770b\u4e86\u4e24\u6b21\uff0c\u5e74\u521d\u5728\u9999\u6e2f\u7684\u4f53\u80b2\u9986\uff0c\u662f\u5750\u5728\u540e\u9762\u7684\u770b\u53f0\u4e0a\u7684\uff0c\u5355\u7eaf\u542c\u6b4c\u53bb\u7684\uff0c\u6ca1\u6709\u5f88\u5f3a\u7684\u4f53\u9a8c\u611f\u3002\n\u7b2c\u4e8c\u6b21\u5728\u6df1\u5733\u7684B10 livehouse\uff0c\u524d\u4e94\u6392\u5185\uff0c\u4f53\u9a8c\u592a\u597d\u4e86\u592a\u723d\u4e86\u3002\n\u4ec1\u79d1\u4e2d\u95f4\u6709\u8bf4\u53ef\u80fd\u5728B10 \u662f\u6700\u540e\u4e00\u6b21\u4e86\uff0c\u56e0\u4e3aB10 \u7684\u8001\u677f\u8ba9\u4ed6\u4eec\u522b\u6765\u4e86\uff0c\u4eba\u592a\u591a\u4e86\uff0c\u8fd9\u4e2a\u573a\u5b50\u5b9e\u5728\u88c5\u4e0d\u4e0b\u4e86\ud83d\ude02\n\u4f46\u662flivehouse \u524d\u6392\u7684\u4f53\u9a8c\u771f\u7684\u592a\u597d\u4e86\u592a\u5f00\u5fc3\u4e86\u3002<\/p>\n<p>\u800cmla\uff0c\u5176\u5b9e\u88ab\u9a82\u60e8\u4e86\uff0c\u56e0\u4e3a\u8fd9\u6b21\u7684\u573a\u5730\u662f\u5ba4\u5916\u573a\uff0c\u4e00\u5171\u5f003\u573a\uff0c\u524d\u4e24\u573a\u90fd\u4e0b\u96e8\uff0c\u7279\u522b\u662f\u7b2c\u4e8c\u573a\uff0c\u975e\u5e38\u5927\u7684\u96e8\uff0c\u800c\u4e14\u573a\u5730\u8fd8\u4e0d\u63d0\u4f9b\u96e8\u8863\uff0c\u4e0d\u8ba9\u5728\u573a\u5185\u6491\u4f1e\uff0c\u56e0\u4e3a\u4f1a\u6321\u5230\u540e\u9762\u7684\u4eba\u3002\u603b\u4e4b\u573a\u5730\u7684\u5e94\u5bf9\u975e\u5e38\u5dee\u3002\n\u6211\u4e70\u7684\u662f\u5c3e\u573a\uff0c\u5c3e\u573a\u7ec8\u4e8e\u63d0\u4f9b\u96e8\u8863\u4e86\uff0c\u800c\u4e14\u9664\u4e86\u5f00\u59cb\u524d\u98d8\u4e86\u4e00\u9635\u5c0f\u96e8\uff0c\u4e4b\u540e\u7b97\u662f\u548c\u6f14\u5531\u4f1a\u7684\u540d\u5b57\u201c\u4eca\u665a\u53ef\u80fd\u597d\u5927\u98ce\u201d\u5bf9\u4e0a\u4e86\uff0c\u5f88\u8212\u670d\u7684\u591c\u665a\u3002\n\u56e0\u4e3a\u6ca1\u6709\u4e8b\u5f88\u65e9\u5c31\u53bb\u6392\u961f\u4e86\uff0c\u662f\u5728\u7b2c\u4e8c\u6392\u770b\uff0c\u4e5f\u5f88\u5f00\u5fc3\u3002\n\u867d\u7136\u518d\u4e5f\u6ca1\u6709\u5341\u51e0\u5e74\u524dlivehouse \u90a3\u4e48\u723d\u4e86\uff0c\u867d\u7136\u4eca\u5e74\u88ab\u4eba\u9a82\u5df2\u7ecf\u4e0d\u662f\u6253\u5de5\u4eba\u8fd9\u8fb9\u4e86\uff0c\u867d\u7136nicole \u8fde\u540d\u5b57\u90fd\u6539\u6210\u4e86selene\uff08\u6211\u90fd\u4e0d\u77e5\u9053\u662f\u4ec0\u4e48\u65f6\u5019\u6539\u7684\u548c\u4e3a\u4ec0\u4e48\u6539\ud83d\ude02 \u6211\u8fd8\u662f\u4e60\u60ef\u53ebnicole\uff09\uff0c\n\u4f46\u4e5f\u65ad\u65ad\u7eed\u7eed\u770b\u4e86\u5341\u51e0\u5e74\u4e86\uff08\u4eca\u5e74\u662f\u6211\u770b\u7684\u7b2c8\u6b21\uff0c<a href=\"https:\/\/zhuzi.dev\/posts\/2017-12-27-mla\/\">\u524d\u51e0\u6b21\u7684\u8bb0\u5f55<\/a>\uff09\uff0c\u821e\u53f0\u98ce\u683c\u4ece\u6ca1\u6709\u53d8\u8fc7\uff0c\u559c\u6b22\u7684\u6b4c\u4f9d\u7136\u559c\u6b22\u3002\n\u4e5f\u5e0c\u671b\u559c\u6b22\u7684\u4e1c\u897f\u80fd\u6c38\u8fdc\u4e0d\u53d8\u3002\n\u4f46\u662f\u5982\u679c\u53d8\u4e86\uff0c\u4e5f\u662f\u65e0\u53ef\u5948\u4f55\u7684\uff5e<\/p>\n<p>\u4eca\u5e74\u4e5f\u4f1a\u7ee7\u7eed\u627e\u673a\u4f1a\u770b\u5404\u79cd\u6f14\u51fa\u3002<\/p>\n<p>12\u6708\u5929\u6c14\u964d\u6e29\u4e0b\u6765\u540e\uff0c\u5f00\u59cb\u5bf9\u516c\u56ed\u6563\u6b65\u3001\u5f92\u6b65\u611f\u5174\u8da3\u3002\u53ef\u80fd\u662f\u4e0d\u60f3\u5728\u5bb6\u505a\u6709\u6c27\u4e4b\u540e\uff0c\u5b81\u613f\u51fa\u95e8\u8d70\u8def\u5f53\u4f5c\u8fd0\u52a8\u3002\n\u4e0a\u5468\u8fd8\u53bb\u722c\u4e86\u6b21\u5c71\uff0c\u4f46\u662f\u4f4e\u8c37\u4e86\u96be\u5ea6\uff0c\u9ad8\u4f30\u4e86\u81ea\u5df1\uff0c\u4e0b\u5c71\u628a\u5c0f\u817f\u641e\u5f97\u7279\u522b\u9178\u75bc\uff0c\u7f13\u4e86\u597d\u51e0\u5929\u624d\u6062\u590d\u3002<\/p>\n<p>\u4eca\u5e74\u770b\u8fc7\u7684\u4e1c\u897f\u91cc\u503c\u5f97\u63a8\u8350\u7684\u6ca1\u591a\u5c11\uff0c\u597d\u591a\u90fd\u6ca1\u770b\u6216\u8005\u770b\u4e86\u4e00\u70b9\u770b\u4e0d\u4e0b\u53bb\uff0c\u53ea\u662f\u8bb0\u5f55\u4e00\u4e0b\u6211\u8fd8\u7b97\u559c\u6b22\u7684\u5427\uff1a<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/movie.douban.com\/subject\/35801594\/\">\u8ff7\u5bab\u996d<\/a>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/item\/doubanmovie\/2024\/07\/16\/9d5b54b1-ef55-45c9-b340-cd2370e545eb.jpg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/tv\/season\/5r6zBcSaLY8Z08Zwc6gqMV\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u8ff7\u5bab\u996d<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 86%\"><\/span><\/span><span class=\"rating_nums\">8.6<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u8fdb\u5165\u300a\u8ff7\u5bab\u996d\u300b\u5f31\u8089\u5f3a\u98df\u7684\u4e16\u754c\uff0c\u4e0d\u60f3\u88ab\u5403\uff0c\u5c31\u8981\u52c7\u6562\u5f00\u5403\u3002\n\u5730\u4e0b\u57ce\u6df1\u5904\uff0c\u83b1\u6b27\u65af\u7684\u59b9\u59b9\u60e8\u906d\u708e\u9f99\u541e\u566c\uff0c\u83b1\u6b27\u65af\u81ea\u5df1\u4e5f\u5dee\u70b9\u6ca1\u547d\uff0c\u597d\u4e0d\u5bb9\u6613\u624d\u9003\u51fa\u751f\u5929\u3002\n\u73b0\u5728\uff0c\u4ed6\u51b3\u5b9a\u8981\u91cd\u8fd4\u5730\u7262\uff0c\u4f46\u4ed6\u7684\u94b1\u548c\u7cae\u98df\u5374\u90fd\u8fd8\u7559\u5728\u5730\u4e0b\u57ce\u6df1\u5904\u3002\u773c\u770b\u59b9\u59b9\u56f0\u5728\u9f99\u809a\u91cc\uff0c\u968f\u65f6\u90fd\u53ef\u80fd\u88ab\u6d88\u5316\u6b86\u5c3d\uff0c\u83b1\u6b27\u65af\u51b3\u5b9a\u8fb9\u8d70\u8fb9\u730e\u98df\uff01\u65e0\u8bba\u662f\u53f2\u83b1\u59c6\u3001\u86c7\u602a\u3001\u5b9d\u7bb1\u602a\uff0c\u751a\u81f3\u6076\u9f99\uff0c\u6765\u4e00\u4e2a\u5403\u4e00\u4e2a\uff0c\u6765\u4e24\u4e2a\u5403\u4e00\u53cc\uff01\n\u5192\u9669\u8005\uff0c\u524d\u8fdb\u5427\uff01\u52c7\u95ef\u5730\u7262\u6df1\u5904\uff0c\u5403\u5149\u6240\u6709\u6321\u8def\u7684\u9b54\u7269\u3002<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">tv<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n\u6211\u89c9\u5f97\u6bd4\u540c\u65f6\u4e5f\u5f88\u706b\u7684\u8299\u8389\u83b2\u597d\u770b\u592a\u591a\uff0c\u597d\u597d\u5403\u996d\uff0c\u597d\u597d\u751f\u6d3b\u3002<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/movie.douban.com\/subject\/36902276\/\">\u56e3\u5730\u306e\u3075\u305f\u308a<\/a>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/item\/tv\/2024\/11\/27\/e73d284c-0c87-4ee0-a9c2-44d4d36e5c45.jpeg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/tv\/season\/4h8uV5POiMkGrdRZRIpJtV\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u4f4f\u5b85\u533a\u7684\u4e24\u4eba<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 89%\"><\/span><\/span><span class=\"rating_nums\">8.9<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u672c\u5267\u6539\u7f16\u81ea\u540c\u540d\u5c0f\u8bf4\uff0c\u8bb2\u8ff0\u4e86\u66fe\u88ab\u79f0\u4e3a\u795e\u7ae5\u7684\u4f18\u7b49\u751f\u592a\u7530\u91ce\u679d\uff08\u5c0f\u6cc9\u4eca\u65e5\u5b50 \u9970\uff09\u662f\u517c\u804c\u5927\u5b66\u8bb2\u5e08\uff0c\u770b\u8d77\u6765\u7c97\u679d\u5927\u53f6\uff0c\u5b9e\u9645\u4e0a\u8ba4\u771f\u4e25\u8083\uff0c\u79bb\u8fc7\u4e00\u6b21\u5a5a\uff1b\u6a31\u4e95\u590f\u5b50\uff08\u5c0f\u6797\u806a\u7f8e \u9970\uff09\u662f\u63d2\u753b\u5bb6\uff0c\u7136\u800c\u6700\u8fd1\u521a\u5931\u4e1a\uff0c\u9760\u5728\u8df3\u86a4\u5e02\u573a\u4e0a\u4e0b\u8f7d\u5e94\u7528\u7a0b\u5e8f\u8c0b\u751f\uff0c\u505a\u4e8b\u4e00\u4e1d\u4e0d\u82df\uff0c\u64c5\u957f\u70f9\u996a\uff0c\u5355\u8eab\u300250\u591a\u5c81\u3001\u5728\u4f4f\u5b85\u533a\u51fa\u751f\u3001\u4f4f\u5728\u8001\u5bb6\u3001\u5355\u8eab\uff0c\u8fd9\u6837\u7684\u4e24\u4f4d\u53d1\u5c0f\uff0c\u5373\u4f7f\u5fc3\u6709\u4e0d\u5b81\u4e5f\u76f8\u5b89\u65e0\u4e8b\uff0c\u6e29\u6696\u5e7d\u9ed8\u7684\u53cb\u60c5\u65e5\u5e38\u6545\u4e8b\u3002<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">tv<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n2024\u6700\u6cbb\u6108\u7684\u65e5\u5267\u3002<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/movie.douban.com\/subject\/36154853\/\">\u597d\u4e1c\u897f<\/a>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/item\/doubanmovie\/2024\/12\/05\/19c42b7d-d172-4959-be40-3dd69006131f.jpg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/movie\/6bovigoEInD0KcTADT6eQT\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u597d\u4e1c\u897f<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 85%\"><\/span><\/span><span class=\"rating_nums\">8.5<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u7231\u901e\u5f3a\u7684\u5355\u4eb2\u5988\u5988\u738b\u94c1\u6885\uff08\u5b8b\u4f73 \u9970\uff09\u5e26\u5c0f\u5b69\u738b\u8309\u8389\uff08\u66fe\u6155\u6885 \u9970\uff09\u642c\u5230\u65b0\u5bb6\uff0c\u7ed3\u8bc6\u4e86\u6240\u8c13\u6e05\u9192\u604b\u7231\u8111\u7684\u90bb\u5c45\u5c0f\u53f6\uff08\u949f\u695a\u66e6 \u9970\uff09\u3002\u4e24\u4f4d\u6027\u683c\u8fe5\u5f02\u7684\u5973\u6027\uff0c\u4e00\u4e2a\u575a\u5f3a\uff0c\u4e00\u4e2a\u67d4\u8f6f\uff0c\u4e00\u4e2a\u64c5\u957f\u7ed9\u4eba\u5f53\u5988\uff0c\u4e00\u4e2a\u64c5\u957f\u968f\u65f6\u6492\u8c0e\u3002\u9762\u5bf9\u65e7\u521b\u4f24\u548c\u65b0\u6311\u6218\uff0c\u5979\u4eec\u5f7c\u6b64\u6e29\u6696\u4e92\u76f8\u6170\u85c9\u3002\n\u800c\u56f4\u7ed5\u738b\u94c1\u6885\u7684\u4e24\u4e2a\u7537\u4eba\uff0c\u524d\u592b\uff08\u8d75\u53c8\u5ef7 \u9970\uff09\u4e0d\u65f6\u201c\u6dfb\u4e71\u201d\uff0c\u5973\u513f\u7684\u9f13\u624b\u8001\u5e08\uff08\u7ae0\u5b87 \u9970\uff09\u4f3c\u4e4e\u5145\u6ee1\u65b0\u7684\u53ef\u80fd\u3002\u4f5c\u4e3a\u5df2\u7ecf\u89c9\u9192\u7684\u5973\u4eba\u4eec\u548c\u5b66\u4e60\u8fc7\u6027\u522b\u8bae\u9898\u7684\u7537\u4eba\u4eec\uff0c\u4f1a\u9047\u5230\u4ec0\u4e48\u65b0\u95ee\u9898\uff1f\u4f1a\u5982\u4f55\u770b\u5f85\u81ea\u5df1\u548c\u4e16\u754c\uff1f<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">movie<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n2024\u5728\u7535\u5f71\u9662\u91cc\u770b\u7684\u6700\u559c\u6b22\u7684\u7247\u513f<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/book.douban.com\/subject\/35517022\/\">\u9e7f\u5ddd\u6709\u8bb8\u591a\u7caa<\/a>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/item\/book\/2024\/08\/14\/cc8868a4-8e87-4fa4-899f-dd80419a5d0d.jpg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/book\/648W0B7JJs2S2Ew32lZbnE\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u9e7f\u5ddd\u6709\u8bb8\u591a\u7caa<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 89%\"><\/span><\/span><span class=\"rating_nums\">8.9<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u674e\u6ca7\u4e1c\u5c01\u7b14\u4e4b\u4f5c\n\u76f4\u9762\u9519\u7efc\u590d\u6742\u7684\u751f\u6d3b\u672c\u8eab\uff0c\u63a2\u7d22\u771f\u6b63\u4ef7\u503c\u7684\u53ef\u80fd\u6027\n\u4ece\u300a\u70e7\u7eb8\u300b\u5230\u300a\u71c3\u70e7\u300b\uff0c\u6c38\u6052\u7684\u5ba1\u89c6\u4e0e\u8ffd\u95ee\n\u672c\u4e66\u662f\u97e9\u56fd\u5bfc\u6f14\u674e\u6ca7\u4e1c\u4e8e1992\u5e74\u51fa\u7248\u7684\u4e2d\u77ed\u7bc7\u5c0f\u8bf4\u96c6\uff0c\u501f\u6b64\u4ed6\u83b7\u5f97\u4e86\u300a\u97e9\u56fd\u65e5\u62a5\u300b\u521b\u4f5c\u6587\u5b66\u5956\uff0c\u5e76\u5728\u7b2c\u4e8c\u5e74\u53d7\u5bfc\u6f14\u6734\u5149\u6d19\u4e4b\u9080\u8fdb\u5165\u7535\u5f71\u754c\uff0c\u968f\u540e\u4ed6\u4fbf\u8f6c\u578b\u5e76\u9010\u6e10\u6210\u4e3a\u5177\u6709\u56fd\u9645\u5f71\u54cd\u529b\u7684\u7535\u5f71 \u5927\u5e08\u3002\n\u8fd9\u90e8\u5c0f\u8bf4\u96c6\u5c55\u73b0\u4e86\u4e00\u6279\u88f9\u631f\u5728\u590d\u6742\u591a\u53d8\u7684\u5386\u53f2\u6d6a\u6f6e\u4e2d\u7684\u5e95\u5c42\u4eba\u7269\u5f62\u8c61\uff0c\u4ed6\u4eec\u8270\u8f9b\u5730\u5728\u751f\u6d3b\u4e2d\u8ffd\u6c42\u771f\u6b63\u7684\u4ef7\u503c\uff0c\u4e0e\u73b0\u5b9e\u4e2d\u7684\u75db\u82e6\u8fdb\u884c\u6297\u4e89\uff0c\u540c\u65f6\u5bfb\u627e\u4e2a\u4eba\u751f\u6d3b\u7684\u610f\u4e49\u3002\u4f5c\u8005\u901a\u8fc7\u8fd9\u4e9b\u4eba\u7269\u7684\u906d\u9047\u5ba1\u89c6\u97e9\u56fd\u73b0\u5b9e\uff0c\u4f46\u5e76\u975e\u6b62\u6b65\u4e8e\u8bb2\u8ff0\u5386\u53f2\u4e8b\u4ef6\u6216\u6545\u4e8b\u672c\u8eab\uff0c\u800c\u662f\u7740\u91cd\u523b\u753b\u4e86\u4eba\u7269\u5728\u6b64\u8fc7\u7a0b\u4e2d\u53d1\u751f\u7684\u8f6c\u53d8\uff0c\u4ed6\u4eec\u9010\u6e10\u5f00\u59cb\u5bf9\u751f\u6d3b\u4e2d\u7684\u771f\u6b63\u4ef7\u503c\u548c\u81ea\u5df1\u7684\u8eab\u4efd\u8ba4\u540c\u63d0\u51fa\u7591\u95ee\u5e76\u8fdb\u884c\u63a2\u7d22\u3002<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">book<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n\u8bfb\u4e66\u4e60\u60ef\u6ca1\u6709\u5b8c\u5168\u590d\u5065\u6210\u529f\uff0c\u6700\u8fd1\u4e00\u4e2a\u591a\u6708\u90fd\u6ca1\u770b\u4e66\ud83d\ude2c\uff0c\u51e0\u4e2a\u6708\u524d\u770b\u8fc7\u7684\u51e0\u672c\u4e66\u91cc\u6700\u559c\u6b22\u8fd9\u672c\u77ed\u7bc7\u5c0f\u8bf4\u96c6\u3002\n\u5c24\u5176\u559c\u6b22\u540c\u540d\u7684\u90a3\u7bc7\uff0c\u770b\u7684\u65f6\u5019\u89c9\u5f97\u753b\u9762\u611f\u592a\u5f3a\u4e86\uff0c\u7ed3\u5c3e\u63cf\u5199\u4e3b\u89d2\u5728\u7caa\u5806\u91cc\u5927\u54ed\u7684\u573a\u666f\uff0c\u6211\u5f88\u5947\u5999\u7684\u4e5f\u8ddf\u7740\u54ed\u4e86\u51fa\u6765\ud83d\ude02<\/p>\n<\/li>\n<li>\n<p>\u8fd8\u91cd\u65b0\u8865\u5b8c\u4e86\u300a\u30ae\u30f4\u30f3\u300b\u6f2b\u753b\u52a8\u753b\u5267\u573a\u7248\uff0c\u7279\u522b\u559c\u6b22\u52a8\u753b\u7684\u914d\u4e50\u548c\u58f0\u4f18\u7684\u6f14\u7ece\uff0c\u771f\u7684\u5b8c\u7f8e\u5951\u5408band\u4e3b\u9898\uff0c\u82b1\u91cd\u91d1\u4e70\u4e86ost\u5408\u96c6<\/p>\n<\/li>\n<li>\n<p>\u300a\u30c1\u3002\u2015\u5730\u7403\u306e\u904b\u52d5\u306b\u3064\u3044\u3066\u2015\u300b\uff0c\u5f88\u7075\u5f88\u6709\u97f5\u5473\u3002\u4eca\u5e74\u518d\u8865\u8865\u8fd9\u4e2a\u4f5c\u8005\u7684\u5176\u4ed6\u6f2b\u753b\u597d\u4e86\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u6700\u540e\uff0c\u603b\u7684\u6765\u8bf4\uff0c2024 \u8fc7\u5f97\u5f88\u5f00\u5fc3\u4e86\uff0c\u6709\u52aa\u529b\u6784\u5efa\u5e76\u4fdd\u6301\u4e00\u4e2aroutine\uff0c\u624d\u4f1a\u5bf9\u751f\u6d3b\u6709\u4e00\u5b9a\u7684\u63a7\u5236\u611f\u3002\n\u770b\u5404\u79cd\u6f14\u51fa\uff0c\u5076\u5c14\u8ffd\u661f\uff0c\u8fd8\u6709\u4e70\u70b9\u53ef\u7231\u800c\u65e0\u7528\u7684\u7f8e\u4e3d\u5e9f\u7269\uff0c\u624d\u80fd\u5bf9\u751f\u6d3b\u62b1\u6709\u4e00\u4e1d\u671f\u5f85\u5427\u3002<\/p>\n]]>"},{"title":"\u65f6\u96945\u5e74\u7684\u9713\u8679\u65c5\u884c\uff08\u4e09\uff09\u798f\u5188+\u718a\u672c","link":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-1\/","pubDate":"Sat, 23 Nov 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-1\/","description":"<h2 id=\"1112-\u5230\u8fbe\u798f\u5188\">11.12 \u5230\u8fbe\u798f\u5188<\/h2>\n<p>\u5728\u673a\u573a\u770b\u5230\u8fd9\u4e2a\u624d\u53d1\u73b0 pokemon go \u4f9d\u7136\u5728\u9713\u8679\u5982\u706b\u5982\u837c\u554a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2041.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u798f\u5188\u673a\u573a\u8ddd\u79bb\u5e02\u533a\u7279\u522b\u8fd1\u3002\u5750\u5730\u94c12\u7ad9\u5c31\u80fd\u5230\u535a\u591a\u7ad9\uff0c\u6211\u662f\u518d\u591a\u5750\u4e24\u7ad9\u5c31\u80fd\u5230\u4f4f\u7684\u80f6\u56ca\u9152\u5e97\u3002<\/p>\n<p>\u8ba2\u7684\u80f6\u56ca\u9152\u5e97\u7684\u5927\u5802\u6709\u4e2a\u8fd9\u6837\u30aa\u30b7\u30e3\u30ec\u7684bar\uff0c\u88c5\u4fee\u5f88\u73b0\u4ee3\u98ce\uff0c\u611f\u89c9\u8fd8\u4e0d\u9519\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2064.jpeg\" alt=\"\"  \/>\n\n<\/p>","content":"<![CDATA[<h2 id=\"1112-\u5230\u8fbe\u798f\u5188\">11.12 \u5230\u8fbe\u798f\u5188<\/h2>\n<p>\u5728\u673a\u573a\u770b\u5230\u8fd9\u4e2a\u624d\u53d1\u73b0 pokemon go \u4f9d\u7136\u5728\u9713\u8679\u5982\u706b\u5982\u837c\u554a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2041.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u798f\u5188\u673a\u573a\u8ddd\u79bb\u5e02\u533a\u7279\u522b\u8fd1\u3002\u5750\u5730\u94c12\u7ad9\u5c31\u80fd\u5230\u535a\u591a\u7ad9\uff0c\u6211\u662f\u518d\u591a\u5750\u4e24\u7ad9\u5c31\u80fd\u5230\u4f4f\u7684\u80f6\u56ca\u9152\u5e97\u3002<\/p>\n<p>\u8ba2\u7684\u80f6\u56ca\u9152\u5e97\u7684\u5927\u5802\u6709\u4e2a\u8fd9\u6837\u30aa\u30b7\u30e3\u30ec\u7684bar\uff0c\u88c5\u4fee\u5f88\u73b0\u4ee3\u98ce\uff0c\u611f\u89c9\u8fd8\u4e0d\u9519\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2064.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u9886\u53d6-jr-pass\">\u9886\u53d6 JR pass<\/h3>\n<p>checkin \u653e\u4e0b\u884c\u674e\u4e4b\u540e\u4e5f\u5c317\u70b9\u4e0d\u5230\uff0c\u6211\u5c31\u53c8\u51fa\u95e8\u53bb\u535a\u591a\u7ad9\u505a\u5fc5\u987b\u7684\u4e8b\uff0c\u53d6JR 3\u65e5pass\u3002<\/p>\n<p>\u4e5d\u5dde\u7684\u4e00\u5927\u7279\u8272\u662f\u6709\u5404\u79cd\u7279\u522b\u5217\u8f66\uff0c\u6240\u4ee5\u5982\u679c\u4e0d\u662f\u53ea\u5728\u798f\u5188\u6216\u8005\u53ea\u53bb\u67d0\u4e00\u4e2a\u5730\u65b9\uff0c\u8fd8\u86ee\u63a8\u8350\u4e70\u4e00\u4e2a pass \u7684\u3002\n\u6211\u4e70\u7684\u662f\u5317\u90e8\u4e5d\u5dde\u4e09\u65e5pass\uff0c\u5305\u62ec\u4e86\u535a\u591a\u5230\u718a\u672c\u7684\u65b0\u5e72\u7ebf\uff0c\u8fd8\u6709\u5317\u90e8\u4e5d\u5dde\u7684\u597d\u4e9b\u7279\u522b\u5217\u8f66\u90fd\u53ef\u4ee5\u5750\u3002<\/p>\n<p>\u4e0d\u8fc7\u540e\u6765\u6211\u624d\u7406\u89e3\uff0c\u6709\u5f88\u591a\u7279\u8272\u5217\u8f66\u7684\u73ed\u6b21\u5176\u5b9e\u662f\u5f88\u5c11\u7684\uff08\u4e5f\u4e0d\u662f\u6bcf\u5929\u90fd\u5f00\uff09\uff0c\u63d0\u4f9b\u7684\u5ea7\u4f4d\u6570\u662f\u5f88\u6709\u9650\u7684\uff08\u6709\u5f88\u591a\u53ea\u6709\u4e24\u8282\u8f66\u53a2\uff09\uff0c\u5927\u591a\u9700\u8981\u63d0\u524d\u9884\u7ea6\u6307\u5b9a\u5e2d\uff0c\u800c\u9884\u7ea6\u6307\u5b9a\u5e2d\u90fd\u662f\u8981\u52a0\u94b1\u7684\u3002\u3002\u3002\n\u4e5f\u5c31\u662f\u8bf4\u53ea\u4e70pass\u5176\u5b9e\u662f\u4e0d\u591f\u7684\uff0c\u6211\u6ca1\u6709\u7279\u522b\u7b97\u8fc7\u6211\u7684\u8ba1\u5212\u662f\u5426\u771f\u7684\u4e70pass \u5212\u7b97\uff0c\u53ea\u662f\u89c9\u5f97\u505a\u884c\u7a0b\u8ba1\u5212\u7684\u65f6\u5019\u4e0d\u7528\u592a\u7ea0\u7ed3\uff0c\u8fd8\u65b9\u4fbf\u4e34\u65f6\u8c03\u6574\u3002\n\u6700\u597d\u8fd8\u662f\u770b\u6e05\u695a\u5177\u4f53\u6bcf\u73ed\u60f3\u5750\u7684\u5217\u8f66\u7684\u5177\u4f53\u51fa\u53d1\u65f6\u95f4\u548c\u81ea\u5df1\u60f3\u8981\u7684\u5bf9\u4e0d\u5bf9\u5f97\u4e0a\uff0c\u518d\u51b3\u5b9a\u8981\u4e0d\u8981\u4e70\u8fd9\u4e2apass\u3002\n\u5982\u679c\u51b3\u5b9a\u4e70\u4e86\u4e4b\u540e\u540c\u65f6\u5c3d\u5feb\u518d\u8ffd\u52a0\u9700\u8981\u7684\u6307\u5b9a\u5e2d\uff0c\u5426\u5219\u4f60\u4f1a\u5750\u4e0d\u4e86\u60f3\u5750\u7684\u90a3\u8d9f\u8f66\u3002<\/p>\n<blockquote>\n<p>\u5468\u6e38\u5238\u8be6\u7ec6\uff1a <a href=\"https:\/\/www.jrkyushu.co.jp\/cn\/railpass\/railpass.html\">https:\/\/www.jrkyushu.co.jp\/cn\/railpass\/railpass.html<\/a><\/p>\n<\/blockquote>\n<p>\u5728\u535a\u591a\u7ad9\u627e\u5230\u9886\u53d6\u5468\u6e38\u5238\u7684\u67dc\u53f0\uff0c\u4f46\u662f\u6392\u961f\u6392\u4e86\u63a5\u8fd11\u4e2a\u534a\u5c0f\u65f6\u624d\u9886\u53d6\u5230 pass\ud83d\ude13\n\u4e0d\u7406\u89e3\u660e\u660e\u5f88\u591a\u5916\u56fd\u6e38\u5ba2\uff08\u97e9\u56fd\u4eba\u7279\u522b\u591a\uff0c\u5176\u6b21\u662f\u53f0\u6e7e\u4eba\u548c\u9999\u6e2f\u4eba\uff0c\u5927\u9646\u4eba\u53cd\u800c\u4e0d\u592a\u591a\uff09\uff0c\u9762\u5411\u5916\u56fd\u4eba\u7684\u5468\u6e38\u5238\u67dc\u53f0\u53ea\u67091\u4e2a\u52302\u4e2a\uff0c\u6548\u7387\u8d85\u7edd\u4f4e\u4e0b\u3002\n\u4f46\u5b83\u662f\u665a\u4e0a10\u70b9\u5173\u95e8\uff0c\u4e0d\u8981\u592a\u665a\u53bb\u5c31\u884c\u4e86\u3002<\/p>\n<p>\u9886\u53d6\u5b8cpass \u6574\u4e2a\u4eba\u90fd\u9965\u80a0\u8f98\u8f98\u4e86\uff0c\u5c31\u641c\u4e86\u535a\u591a\u7ad9\u7684\u597d\u5403\u7684\u3002<\/p>\n<h3 id=\"\u8336\u6ce1\u996d\">\u8336\u6ce1\u996d<\/h3>\n<p>\u9009\u7684\u662f\u4e00\u5bb6\u6d77\u9c9c\u8336\u6ce1\u996d\uff0c\u5f88\u597d\u5403\ud83d\ude0b \u800c\u4e14\u53c8\u662f\u4e0d\u7528\u6392\u961f\u7684\u65f6\u95f4\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2042.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53ef\u80fd\u6392\u961f\u641e\u7d2f\u4e86\uff0c\u5e97\u5458\u5176\u5b9e\u4e00\u5f00\u59cb\u6709\u8bf4\u4f46\u6211\u6ca1\u5b8c\u5168\u542c\u61c2\uff0c\u5979\u662f\u8bf4\u6728\u7897\u91cc\u7684\u662f\u539f\u5473\u7684\u6d77\u9c9c\u4e3c\uff0c\u53ef\u4ee5\u8200\u51fa\u6765\u4e00\u4e9b\u5230\u5c0f\u7897\u91cc\u518d\u52a0\u8336\u6c64\u53d8\u6210\u8336\u6ce1\u996d\uff0c\u8fd9\u6837\u5c31\u6709\u4e24\u79cd\u5403\u6cd5\u7684\u996d\u53ef\u4ee5\u4eab\u53d7\u4e86\u3002\n\u6211\u6ca1\u60f3\u592a\u591a\u76f4\u63a5\u628a\u8336\u6c64\u5168\u5012\u5230\u6728\u7897\u91cc\u4e86\uff0c\u6574\u7897\u90fd\u5403\u7684\u662f\u8336\u6ce1\u996d\u3002\u540e\u6765\u770b\u9694\u58c1\u684c\u7684\u59d0\u59d0\u624d\u53d1\u73b0\u6211\u597d\u50cf\u6709\u70b9\u5012\u9519\u7897\u4e86\u3002\n\u4e0d\u8fc7\u8fd9\u4e5f\u4e0d\u662f\u4ec0\u4e48\u7279\u522b\u6709\u6240\u8c13\u7684\u4e8b\uff0c\u8336\u6ce1\u996d\u597d\u5403\u5c31\u884c\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2044.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6ee1\u8db3\u5403\u5b8c\u51fa\u5230\u5916\u9762\u624d\u53d1\u73b0\u535a\u591a\u5c45\u7136\u90fd\u5df2\u7ecf\u6709\u5723\u8bdelight up\u4e86\uff0c\u672d\u5e4c\u600e\u4e48\u90fd\u8fd8\u6ca1\u6709\uff01\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2046.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2047.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2048.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2049.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"citywalk\">citywalk<\/h3>\n<p>\u7136\u540e\u5728\u798f\u5188\u7a0d\u5fae\u591c\u665a citywalk \u4e86\u4e00\u4e0b\uff0c\u611f\u89c9\u5f88\u60ec\u610f\uff0c\u662f\u4e2a\u5f88\u597d\u901b\u7684\u57ce\u5e02\uff0c\u800c\u4e14\u6709\u89c1\u5230\u597d\u591a\u597d\u591a\u4e0d\u540c\u79cd\u7c7b\u7684\u996d\u5e97\uff0c\u611f\u89c9\u6709\u5f88\u591a\u597d\u5403\u7684\u3002<\/p>\n<p>\u968f\u4fbf\u4e00\u4e2a\u68da\u5b50\u642d\u8d77\u6765\u4f3c\u7684\u997a\u5b50\u9986\uff0c\u4f46\u662f\u8fd9\u79cd\u900f\u660e\u96e8\u68da\u5f88\u50cf\u4ee5\u524d\u770b\u8fc7\u7684\u97e9\u5267\u91cc\u7684\u90a3\u79cd\uff0c\u4e3b\u89d2\u5728\u91cc\u9762\u559d\u70e7\u9152\u7684\u573a\u666f\uff0c\u4f46\u5374\u662f\u5356\u997a\u5b50\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u753b\u5f97\u633a\u6f02\u4eae\u7684\u59b9\u5b50\uff0c\u4f46\u5e94\u8be5\u662f\u81ea\u884c\u8f66\u5e7f\u544a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2053.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>well\uff0c\u5f88\u50cf\u90a3\u79cd\u201c\u5c71\u53e3\u7ec4\u201d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2054.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u597d\u50cf\u662f\u7b2c\u4e00\u6b21\u771f\u6b63\u89c1\u5230\u90a3\u79cd\u8def\u8fb9\u7684\u5173\u4e1c\u716e\u8f66\uff0c\u867d\u7136\u5b83\u597d\u50cf\u4e5f\u4e0d\u662f\u53ea\u5356\u5173\u4e1c\u716e\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2055.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u55ef \u8fd8\u89c1\u5230\u4e86\u6768\u56fd\u798fhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2056.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56de\u9152\u5e97\u7684\u9014\u4e2d\u7ecf\u8fc7\u5929\u795e\u4e2d\u592e\u516c\u56ed\uff08\u540e\u9762\u51e0\u4e4e\u6bcf\u5929\u90fd\u4f1a\u7ecf\u8fc7\u4e00\u4e0b\uff09\u3002\u53d1\u73b0\u5b83\u5df2\u7ecf\u5728\u505a\u5723\u8bde\u88c5\u9970\u4e86\uff0c\u800c\u4e14\u795e\u5947\u7684\u662f\u6709\u597d\u591a\u597d\u591a\u4e2a\u5723\u8bde\u8001\u4eba\uff0c\u7279\u522b\u597d\u7b11\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2058.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2059.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fc7\u6865\u7684\u65f6\u5019\u770b\u706f\u9970\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2061.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u4e00\u862d\u62c9\u9762\u672c\u793e\u5c31\u5728\u9152\u5e97\u5f88\u8fd1\uff0c\u636e\u8bf4\u662f24\u5c0f\u65f6\u8425\u4e1a\uff0c\u7136\u540e\u957f\u671f\u6709\u5f88\u591a\u4eba\u6765\u6392\u961f\u3002\u6211\u662f\u6ca1\u53bb\u5403\u5566\uff0c\u4e0d\u662f\u5f88\u61c2\u4e3a\u5565\u8981\u6392\u8fd9\u4e2a\u961f\uff0c\u5728\u9999\u6e2f\u5403\u8fc7\u4e86\u5c31\u7b97\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2062.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"1113-\u592a\u5bb0\u5e9c\u5929\u6e80\u5bae\u7ac8\u9580\u795e\u793e\u718a\u672c\">11.13 \u592a\u5bb0\u5e9c\u5929\u6e80\u5bae+\u7ac8\u9580\u795e\u793e+\u718a\u672c<\/h2>\n<h3 id=\"\u592a\u5bb0\u5e9c\u5929\u6e80\u5bae\">\u592a\u5bb0\u5e9c\u5929\u6e80\u5bae<\/h3>\n<blockquote>\n<p><a href=\"https:\/\/www.dazaifutenmangu.or.jp\/cn\">https:\/\/www.dazaifutenmangu.or.jp\/cn<\/a><\/p>\n<\/blockquote>\n<p>\u4e00\u5927\u65e9\u5c31\u8d77\u5e8a\uff0c7\u70b9\u5c31\u51fa\u95e8\u53bb\u5750\u5730\u94c1\u8f6c\u518d\u8f6c\u672c\u5730\u7684\u897f\u94c1\u53bb\u592a\u5bb0\u5e9c\u5929\u6ee1\u5bab\uff0c\u8fd9\u4e2a\u65b9\u5f0f\u4e0d\u592a\u76f4\u63a5\u9700\u8981\u8f6c\u8f66\uff0c\u5176\u5b9e\u662f\u6709\u5df4\u58eb\u4ece\u535a\u591a\u51fa\u53d1\u76f4\u8fbe\u592a\u5bb0\u5e9c\u7684\uff0c\u4f46\u662f\u6700\u65e9\u73ed\u5df4\u58eb\u7684\u51fa\u53d1\u65f6\u95f4\u6bd4\u6211\u60f3\u8c61\u7684\u665a\uff0c\n\u6211\u6015\u540e\u9762\u6d6a\u8d39\u65f6\u95f4\uff0c\u5c31\u5750\u4e86\u8fd9\u4e48\u65e9\u73ed\u7684\u7535\u8f66\u8fc7\u53bb\u592a\u5bb0\u5e9c\u3002\u5927\u698240-50\u5206\u949f\u5c31\u80fd\u5230\u8fbe\u3002<\/p>\n<p>\u65e9\u66687\u70b9\u7ecf\u8fc7\u8fd9\u6761\u6865\u7684\u666f\u8272\u4e5f\u4e0d\u9519\u5462\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53d1\u73b07\u70b9\u591a\u5750\u5730\u94c1\u548c\u7535\u8f66\u4f1a\u9047\u4e0a\u7279\u522b\u591aJK\/DK\uff0c\u539f\u6765\u8fd9\u624d\u662f\u4e0a\u5b66\u65f6\u95f4\u3002<\/p>\n<p>\u592a\u5bb0\u5e9c\u7684\u5370\u8c61\uff0c\u6885\u82b1\u548c\u7ea2\u8272\u680f\u6746\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%203.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%204.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u672c\u5730\u5df4\u58eb\u4e5f\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%206.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5230\u8fbe\u56e0\u4e3a8\u70b9\u90fd\u4e0d\u5230\uff0c\u6240\u4ee5\u53c2\u9053\u5e97\u5bb6\u4e5f\u5168\u90fd\u8fd8\u6ca1\u5f00\u95e8\uff0c\u9664\u4e86\u4e00\u5bb6\u661f\u5df4\u514bhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7a7f\u8fc7\u53c2\u9053\u9a6c\u4e0a\u5c31\u80fd\u5230\u592a\u5bb0\u5e9c\u5929\u6ee1\u5bab\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%209.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdb\u53bb\u9a6c\u4e0a\u5c31\u4f1a\u770b\u89c1\u5f88\u591a\u4eba\u4f1a\u62cd\u7684\u7ea2\u8272\u680f\u6746\u7684\u6865\uff0c\u6211\u6765\u7684\u771f\u7684\u662f\u592a\u65e9\u4e86\uff0c\u51e0\u4e4e\u5b8c\u5168\u6ca1\u6709\u6e38\u5ba2\uff0c\u6709\u51e0\u4e2a\u672c\u5730\u4eba\u6765\u6563\u6b65\u905b\u72d7www\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2011.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2012.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2018.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5356\u5fa1\u5b88\u548c\u5fa1\u6731\u5370\u7684\u7a97\u53e3\u5927\u90e8\u5206\u8fd8\u6ca1\u5f00\uff0c\u53e6\u4e00\u4fa7\u4ec5\u6709\u4e00\u4e2a\u5f00\u4e86\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2019.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e0d\u8bb0\u5f97\u8fd9\u7b97\u4ec0\u4e48\u6bbf\u4e86\uff0c\u5c31\u89c9\u5f97\u5c4b\u9876\u82b1\u56ed\u597d\u597d\u770b\uff0c\u5f88\u5409\u535c\u529bhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2022.jpeg\" alt=\"\"  \/>\n\n\n\u8fd8\u6709\u5b83\u7684\u6295\u94b1\u7684\u8fd9\u4e2a\u7bb1\u5b50\u505a\u5f97\u5f88\u7279\u522b\uff0c\u6d41\u7ebf\u578b\u554ahhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2023.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u867d\u7136\u597d\u8d35\uff08\u4e00\u4e2a1k\uff09\uff0c\u4f46\u8fd8\u662f\u4e70\u4e86\u4e24\u4e2a\u5fa1\u5b88\u3002\u3002\u3002\u3002\u6bd5\u7adf\u8fd8\u633a\u597d\u770b\u7684\ud83d\ude02\ud83d\ude02\ud83d\ude02 \uff08\u80cc\u666f\u91cc\u5deb\u5973\u624d\u521a\u521a\u5f00\u59cb\u6253\u626b\u5ead\u9662\uff09\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2026.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u597d\u50cf11\u6708\u662f\u4f1a\u529e\u8d4f\u83ca\u82b1\u5c55\u2b07\ufe0f \u4e0d\u8fc7\u6211\u4e0d\u786e\u5b9a\u8fd9\u662f\u4e0d\u662f\u5df2\u7ecf\u6446\u5b8c\u4e86\u7684\u5b8c\u6210\u4f53\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2027.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u771f\u7684\u534a\u4e2a\u5c0f\u65f6\u5c31\u5b8c\u6210\u4e86\u8fd9\u4e2a\u666f\u70b9\u3002<\/p>\n<p>\u7136\u540e\u51c6\u5907\u53bb\u7ac8\u9580\u795e\u793e\u8981\u53bb\u540e\u95e8\u7684711\u4fbf\u5229\u5e97\u95e8\u53e3\u7b49\u672c\u5730\u5df4\u58eb\uff0c\u672c\u5730\u5df4\u58eb\u975e\u5e38\u758f\u3002\n\u7ec8\u4e8e\u662f\u5148\u5230711\u4e70\u4e86\u996d\u56e2\u5f53\u65e9\u996d\uff0c\u7136\u540e\u770b\u4e00\u4f4d\u7f51\u53cb\u63a8\u8350\u4e70\u4e86\u8fd9\u4e2a\u674f\u4ec1\u8c46\u8150\u5e03\u4e01\u2b07\ufe0f \u6211\u89c9\u5f97\u662f\u8fd8\u633a\u4e0d\u9519\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2028.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"kamado-\u7ac8\u9580\u795e\u793e\">Kamado \u7ac8\u9580\u795e\u793e<\/h3>\n<blockquote>\n<p><a href=\"https:\/\/kamadojinja.or.jp\/\">https:\/\/kamadojinja.or.jp\/<\/a><\/p>\n<\/blockquote>\n<p>\u597d\u50cf\u662f\u7b49\u4e8620-30\u5206\u949f\u8f66\u624d\u6765\uff0c\u5176\u5b9e\u53ef\u80fd\u90fd\u8db3\u591f\u81ea\u5df1\u8d70\u8fc7\u53bb\u4e86\uff0c\u4f46\u7d2f\u4e86\u5c3d\u91cf\u4e0d\u60f3\u8d70\u4e86www<\/p>\n<p>\u7ac8\u9580\u795e\u793e\u4e5f\u662f\u4e2a\u5c0f\u795e\u793e\uff0c\u5355\u7eaf\u662f\u641c\u5230\u8bf4\u548c\u9b3c\u706d\u6709\u4e00\u4e22\u4e22\u5173\u8054\uff0c\u52a0\u4e0a\u636e\u8bf4\u4e5f\u662f\u4e2a\u8d4f\u67ab\u7684\u5730\u65b9\u5c31\u8dd1\u6765\u78b0\u78b0\u8fd0\u6c14\uff0c\u4e0d\u8fc7\u5f88\u660e\u663e\n\u5927\u90e8\u5206\u67ab\u53f6\u8fd8\u6ca1\u7ea2\u5462\u3002\n\u800c\u4e14\u672c\u6765\u6709\u8fd8\u633a\u597d\u770b\u7684\u67ab\u53f6\u5b63\u9650\u5b9a\u7684\u5fa1\u6731\u5370\uff0c\u4e5f\u662f\u8bf411\u670816\u53f7\u624d\u5f00\u59cb\uff0c\u6211\u8fd9\u6765\u7684\u65e9\u4e86\u4e09\u5929\ud83d\ude02\ud83d\ude02\uff08\u867d\u7136\u7406\u667a\u4e0a\u4e5f\u77e5\u9053\u8fd8\u662f\u4e2a\u65e0\u5375\u7528\u7684\u7eb8\u7247\u5b50\uff0c\u4f46\u8fd8\u662f\u6b32\u3057\u3044<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2029.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2033.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2034.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2039.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2040.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4eba\u5747\u89e6\u624b\u7684\u9713\u8679\u91d1\uff0c\u7ed8\u9a6c\u786e\u5b9e\u5f88\u591a\u9b3c\u706d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2041.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2042.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u4e5f\u6ca1\u591a\u5f85\uff0c\u53ea\u4e0d\u8fc7\u53c8\u7b49\u8f66\u7b49\u4e8620\u5206\u949f\u7684\u6837\u5b50\uff0c\u4f46\u4e5f\u5341\u70b9\u591a\u5c31\u56de\u5230\u592a\u5bb0\u5e9c\u7ad9\u4e86\u3002\n\u8fd9\u65f6\u5019\u7684\u53c2\u9053\u5546\u5e97\u8857\u5c31\u70ed\u95f9\u8d77\u6765\u4e86\uff0c\u7136\u540e\u53bb\u4e70\u4e86\u4e00\u4e2a\u8fd9\u8fb9\u7684\u7279\u4ea7\u6885\u30f6\u679d\u997c\uff0c\u770b\u5e97\u5bb6\u662f\u4e2a\u597d\u5927\u5e74\u7eaa\u7684\u5976\u5976\u5c31\u968f\u4fbf\u4e70\u7684\uff0c\n\u611f\u89c9\u6ca1\u6709\u5317\u6d77\u9053\u795e\u5bab\u7684\u5224\u5b98\u997c\u597d\u5403\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2045.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8865\u62cd\u4e00\u4e9b\u592a\u5bb0\u5e9c\u7ad9\u7684\u6837\u5b50\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2043.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u662f\u5750\u8fd9\u4e2a\u65c5\u6e38\u5df4\u58eb\u56de\u535a\u591a\u7684\uff0c\u5b83\u53eb\u65c5\u4eba\uff0c\u867d\u7136\u662f\u8bf4\u53eb\u89c2\u5149\u5df4\u58eb\uff0c\u4f46\u662f\u5176\u5b9e\u4e5f\u5c31\u662f\u4e00\u8f86\u6765\u56de\u4e8e\u535a\u591a-\u592a\u5bb0\u5e9c\u7684\u5df4\u58eb\uff0c\u4e0d\u9700\u8981\u9884\u7ea6\uff0c\u5f00\u8f66\u65f6\u95f4\u662f\u51c6\u7684\u3002\n\u5927\u698240\u5206\u949f\u5c31\u80fd\u5230\u8fbe\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2044.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u718a\u672c\u57ce\">\u718a\u672c\u57ce<\/h3>\n<p>\u5230\u4e86\u535a\u591a\u4e4b\u540e\u6211\u624d\u771f\u6b63\u5f00\u59cb\u7528\u6211\u7684 JR pass\uff0c\u662f\u5750\u65b0\u5e72\u7ebf\u53bb\u718a\u672c\u3002\n\u535a\u591a\u5230\u718a\u672c\u662f\u771f\u7684\u5feb\u554a\uff0c\u4e5f\u662f40\u5206\u949f\u5de6\u53f3\uff0c\u6700\u5f00\u59cb\u67e5\u7ebf\u8def\u7684\u65f6\u5019\u4e5f\u662f\u60ca\u5446\u4e86\uff0c\u800c\u4e14\u73ed\u6b21\u5f88\u591a\u4ece\u5f88\u65e9\u5230\u5f88\u665a\u90fd\u6709\u3002<\/p>\n<p>\u6240\u4ee5\u4ece\u592a\u5bb0\u5e9c10\u70b9\u591a\u51fa\u53d1\uff0c\u5750\u5df4\u58eb\u3001\u5230\u535a\u591a\u6362\u65b0\u5e72\u7ebf\uff0c2\u4e2a\u5c0f\u65f6\u540e\u6211\u5c31\u5230\u8fbe\u4e86\u718a\u672c\u3002\n\uff08\u770b\u5730\u56fe\u4f1a\u89c9\u5f97\u597d\u50cf\u7ed5\u8def\u4e86\uff0c\u4f46\u662f\u65b0\u5e72\u7ebf\u7684\u5feb\u901f\u628a\u5176\u4ed6\u7684\u9009\u9879\u90fd\u7ed9\u5426\u51b3\u4e86\uff0c\u5929\u4e0b\u6b66\u529f\u552f\u5feb\u4e0d\u7834\uff09\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2046.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4ece\u718a\u672c\u7ad9\u5750\u672c\u5730\u5df4\u58eb\u53bb\u718a\u672c\u57ce\uff0c\u800c\u4e14\u5e78\u8fd0\u7684\u662f\uff0c\u718a\u672c\u7684\u5df4\u58eb\u9a6c\u4e0a\u8981\u53d6\u6d88\u652f\u6301\u5168\u56fd\u6027\u7684IC\u5361\uff0c\u4e5f\u5c31\u662f\u5728\u5173\u4e1c\u4e00\u822c\u7528\u7684 Suica\u3001\u5728\u5173\u897f\u4e00\u822c\u7528\u7684 ICOCA\n\u5361\u4e4b\u7c7b\u7684\u5728\u8fd9\u8fb9\u90fd\u4e0d\u80fd\u7528\u4e86\uff0c\u4f46\u5b83\u4f1a\u652f\u6301\u4fe1\u7528\u5361\u611f\u5e94\u3002\n\u4e0d\u8fc7\u6211\u8fd8\u662f\u89c9\u5f97 IC\u5361\u633a\u597d\u7528\u7684\uff0c\u6211\u8fd9\u4e00\u8def\u5168\u90e8\u90fd\u662f\u5728\u7528\u4ee5\u524d\u4e70\u7684 Suica\u3002\n\u5e78\u597d\u5b83\u7684\u6700\u540e\u652f\u6301\u65e5\u671f\u662f\u523011\u670815\u65e5\uff0c\u6b63\u5de7\u88ab\u6211\u8d76\u4e0a\u8fd8\u80fd\u7528Suica\u3002<\/p>\n<p>\u53bb\u718a\u672c\u57ce\u662f\u5750\u5df4\u58eb\u5750\u5230\u300c\u5e02\u5f79\u6240\u300d\u518d\u6b65\u884c10\u5206\u949f\u8fc7\u53bb\u7684\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2047.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2049.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u8fb9\u7684\u57ce\u5f69\u82d1\u5c31\u76f8\u5f53\u4e8e\u8fd9\u4e2a\u666f\u70b9\u7684\u4f11\u606f\u5904\u548c\u58f3\u5e97\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2050.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u662f\u4ece\u57ce\u5f69\u82d1\u8fdb\u53bb\u518d\u5f80\u4e0a\u8fdb\u5165\u718a\u672c\u57ce\u56ed\u533a\u7684\uff0c\u6ca1\u6709\u62cd\u7167\uff0c\u4f46\u662f\u5370\u8c61\u91cc\u662f\u6709\u5357\u95e8\u548c\u5317\u95e8\u4e24\u6761\u8def\u53ef\u4ee5\u9009\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2051.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdc\u5904\u5c31\u5148\u6253\u4e2a\u5361\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5c31\u5728\u5927\u5929\u5b88\u9601\u5916\u7684\u65f6\u5019\u53c8\u6253\u4e86\u4e0b\u5361hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2058.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2059.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5927\u5929\u5b88\u9601\u7684\u5165\u53e3\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2063.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5b66\u4e60\u4e86\uff0c\u5230\u8fd9\u91cc\u6211\u624d\u77e5\u9053\u524d\u9762\u90a3\u4e2a\u94dc\u50cf\u662f\u52a0\u85e4\u6e05\u6b63\ud83d\ude02 \u800c\u4e14\u6700\u521d\u662f\u53eb\u9688\u672c\uff0c\u540e\u9762\u624d\u6539\u540d\u718a\u672c\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2064.jpeg\" alt=\"\"  \/>\n\n\n\u8fd9\u4e2a\u5185\u90e8\u597d\u51e0\u5c42\u697c\u5176\u5b9e\u5168\u90e8\u90fd\u662f\u5386\u53f2\u8d44\u6599\uff0c\u4ece\u6218\u56fd\u65f6\u4ee3\u5230\u73b0\u5f53\u4ee3\uff0c\u6700\u591a\u7eaa\u5f55\u6700\u8be6\u7ec6\u7684\u662f\u6218\u56fd\u65f6\u4ee3\uff0c\u5148\u5f00\u59cb\u8fd8\u60f3\u591a\u770b\u4e24\u773c\uff0c\u4f46\u662f\u5b9e\u5728\u5b57\u592a\u591a\u4e86\uff0c\u653e\u5f03\u4e86hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2065.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2066.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53d1\u73b0\u7684\u4e00\u4e2a\u6bd4\u8f83\u6709\u610f\u601d\u7684\u8c46\u77e5\u8bc6\u662f\u8fd9\u4e2a\u201c\u7a7a\u4e2d\u96ea\u9690\u201d\uff0c\u540d\u5b57\u8d77\u5f97\u597d\u8bd7\u610f\uff0c\u610f\u601d\u5176\u5b9e\u662f\u5395\u6240\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2078.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5927\u81f4\u8d70\u9a6c\u89c2\u82b1\u4e86\u5386\u53f2\u535a\u7269\u9986\uff0c\u53c8\u56de\u5230\u57ce\u5f69\u82d1\u627e\u70b9\u5403\u7684\uff0c\u56e0\u4e3a\u5e76\u6ca1\u6709\u5403\u4e2d\u996d\u3002<\/p>\n<p>\u672c\u6765\u4e0d\u77e5\u9053\u8fd9\u4e2a\u6a31\u4e4b\u5c0f\u8def\u997c\u662f\u5565\uff0c\u4f46\u662fsold out \u53c8\u8ba9\u6211\u89c9\u5f97\u5f88\u597d\u5947\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2085.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u5c31\u4e70\u4e86\u4e00\u4e2a\u8fd9\u4e2a\u6b66\u8005\u304c\u3048\u3057\uff0c\u6ca1\u770b\u61c2\u662f\u4e2a\u5565\uff0c\u5403\u8d77\u6765\u4e5f\u4e00\u822c\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2086.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd8\u4e70\u4e86\u4e00\u4e2a\u9a6c\u8089\u3081\u3093\u304b\u3064\uff0c\u8fd8\u884c\uff0c\u6709\u70b9\u6cb9\uff0c\u5355\u7eaf\u57ab\u57ab\u809a\u5b50\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2088.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u6c34\u524d\u5bfa\u6210\u8da3\u56ed\">\u6c34\u524d\u5bfa\u6210\u8da3\u56ed<\/h3>\n<p>\u718a\u672c\u57ce\u5927\u6982\u603b\u5171\u82b1\u4e862\u4e2a\u5c0f\u65f6\u5de6\u53f3\u5427\u3002\u7136\u540e\u53c8\u5750\u5df4\u58eb\u53bb\u4e86\u4e00\u4e2a\u56ed\u6797\uff0c\u53eb \u6c34\u524d\u5bfa\u6210\u8da3\u56ed\u3002<\/p>\n<p>\u8fd9\u4e2a\u56ed\u6797\u611f\u89c9\u5c31\u633a\u8427\u6761\u7684\u4e86\u3002<\/p>\n<p>\u8def\u4e0a\u770b\u5230\u4e00\u4e2a\u6709\u70b9\u795e\u5947\u7684\u5e78\u305b\u306e\u6a39\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2089.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5922\u53c2\u9053\uff0c\u4e0d\u77e5\u9053\u4e3a\u5565\u8fd9\u4e48\u8d77\uff0c\u8fd9\u6761\u5c0f\u8def\u57fa\u672c\u6ca1\u51e0\u5bb6\u5e97\u5f00\u95e8\uff0c\u603b\u7684\u6765\u8bf4\u597d\u50cf\u6ca1\u5565\u4eba\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2092.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u95e8\u7968\u662f300\u8fd8\u662f400yen\u6765\u7740\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2093.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u4e00\u8fdb\u95e8\u6709\u4e00\u7fa4JKDK\u5728\u90a3\u8fb9\u548c\u9e3d\u5b50\u73a9\uff0c\u6211\u8fd8\u4ee5\u4e3a\u5f88\u70ed\u95f9\uff0c\u5176\u5b9e\u53ea\u662f\u8fd9\u7fa4JKDK\u5728\u95f9\u817e\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2095.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56ed\u6797\u672c\u8eab\u7684\u8bdd\u5012\u662f\u4e5f\u7b97\u5408\u683c\u5427\uff08\u770b\u591a\u4e86\u5df2\u7ecf\u9ebb\u6728\uff09\u4e0d\u8fc7\u5927\u6982\u56e0\u4e3a\u8fd9\u4e2a\u65f6\u95f4\u67ab\u53f6\u6ca1\u7ea2\uff0c\u828d\u836f\u6ca1\u5f00\uff0c\u83ca\u82b1\u6ca1\u51c6\u5907\u597d\uff0c\u5bf9\u4e8e\u6211\u8fd9\u79cd\u6e38\u5ba2\u5c5e\u4e8e\u5b8c\u5168\u6ca1\u6709\u770b\u70b9\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%2099.jpeg\" alt=\"\"  \/>\n\n\n\u8fd9\u91cc\u5012\u662f\u9e2d\u5b50\u548c\u9ca4\u9c7c\u90fd\u6709\uff0c\u800c\u4e14\u611f\u89c9\u90fd\u517b\u5f97\u8fd8\u633a\u80a5\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20100.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5f97\u76ca\u4e8e\u8fd9\u5929\u9633\u5149\u5f88\u597d\uff08\u56e0\u4e3a\u4e2d\u5348\u5f88\u70ed\u554a\uff0c\u90fd24\u5ea6\u4e86\uff09\uff0c\u62cd\u7684\u7167\u7247\u770b\u4e0a\u53bb\u8fd8\u4e0d\u9519\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20101.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20102.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56ed\u6797\u91cc\u6240\u8c13\u7684\u4eff\u5236\u5bcc\u58eb\u5c71\ud83d\uddfb \ud83e\udd23\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20109.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u672c\u6765\u770b\u4e0d\u61c2\u8fd9\u4e9b\u7af9\u5b50\u600e\u4e48\u662f\u8fd9\u4e2a\u6837\u5b50\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20110.jpeg\" alt=\"\"  \/>\n\n\n\u539f\u6765\u662f\u6709\u591c\u95f4light up \u7528\u5230\u7684\uff0c\u751a\u81f3\u5165\u56ed\u6599\u89811800\uff0c\u597d\u8d35\u3002\u3002\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20112.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e0d\u5230\u4e00\u4e2a\u5c0f\u65f6\u5c31\u79bb\u5f00\u4e86\u6c34\u524d\u5bfa\u6210\u8da3\u56ed\u3002<\/p>\n<h3 id=\"\u718a\u672c\u718asquare\">\u718a\u672c\u718aSquare<\/h3>\n<p>\u672c\u6765\u5728\u6c34\u524d\u5bfa\u95e8\u53e3\u9644\u8fd1\u6709\u4e00\u5bb6\u770b\u4e0a\u53bb\u8bc4\u4ef7\u4e0d\u9519\u7684\u62c9\u9762\u5e97\uff0c\u53ef\u60dc\u4eba\u5bb6\u4e0b\u53482\u70b9\u534a\u52305\u70b9\u4f11\u606f\u3002\u3002\u3002<\/p>\n<p>\u7136\u540e\u5c31\u5750\u7535\u8f66\u53bb\u627e\u718a\u672c\u718aSquare\u4e86\u3002\u5728\u7535\u8f66\u4e0a\u7684\u65f6\u5019\u4e00\u76f4\u5728\u5077\u7aa5\u6211\u9694\u58c1\u7684JK\u5237tiktok\u8fd8\u662fins\uff0c\n\u5168\u90e8\u662fkpop\uff0c\u4e3b\u8981\u662f\u5973\u56e2\uff0cive\u3001\u87ba\u72ee\u7c89\u3001aespa\u3001new jeans\u90fd\u6709\u3002\uff08\u662f\u8bf4\u8fd9\u4e2a\u65f6\u95f4\u70b9\u6211\u53c8\u78b0\u4e0a\u4e86\u653e\u5b66\u9ad8\u5cf0\uff0c\u5230\u5904\u90fd\u662fJKDK\uff09<\/p>\n<p>\u56f4\u7740\u4e00\u4e2a\u5546\u573a\u515c\u4e86\u4e2a\u5708\u624d\u627e\u5230\u718a\u672c\u718aSquare\uff0c\u5176\u5b9e\u5b83\u53ea\u662f\u5546\u573a\u91cc\u7684\u4e00\u4e2a\u89d2\u843d\uff0c\u8ddf\u6211\u4e00\u8d77\u8fdb\u95e8\u7684\u662f\u53f0\u6e7e\u65c5\u6e38\u56e2\u7684\u7237\u5976\uff0c\n\u770b\u6765\u662f\u6709\u70b9\u843d\u5bde\u4e86\u554a\uff0c\u4e0d\u8fc7\u6bd5\u7adf\u8fd9\u4e2a\u30ad\u30e3\u30e9\u90fd\u5df2\u7ecf\u5341\u51e0\u5e74\u4e86\uff0c\u56fd\u6c11\u5ea6\u4e5f\u5df2\u7ecf\u8db3\u591f\u7ee7\u7eed\u5b58\u6d3b\u7740\u5427\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20114.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20119.jpeg\" alt=\"\"  \/>\n\n\nwiki \u91cc\u5199\u7684\u8425\u4e1a\u90e8\u957f\u7684\u529e\u516c\u684c\u5176\u5b9e\u65e9\u5c31\u5df2\u7ecf\u6ca1\u6709\u4e86\uff0c\u770b\u8d77\u6765\u5c31\u662f\u7f29\u5c0f\u4e86 Square \u7684\u9762\u79ef\uff0c\u51cf\u5c11\u79df\u91d1\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20118.jpeg\" alt=\"\"  \/>\n\n\n\u7136\u540e\u8fd8\u770b\u5230\u4e86\u5927\u962a\u4e07\u535a\u90a3\u4e2a\u62bd\u8c61\u7684\u5409\u7965\u7269\uff0c\u4f46\u662f\u770b\u5b9e\u7269\u73a9\u5076\uff0c\u610f\u5916\u89c9\u5f97\u6709\u70b9\u840c\uff0c\u4e4b\u524d\u8fd8\u6709\u8ddf\u4e09\u4e3d\u9e25\u7684\u8054\u540d\uff0c\u90a3\u4e2a\u771f\u7684\u633a\u840chhhhhh\uff08\u4e09\u4e3d\u9e25\u592a\u5389\u5bb3\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20120.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20121.jpeg\" alt=\"\"  \/>\n\n\n\u6709\u4e00\u4e2aVR\u5c0f\u6e38\u620f\u53ef\u4ee5\u53c2\u52a0\uff0c\u4f46\u6709\u70b9\u7f9e\u803b\u6ca1\u53bb\u73a9\uff0c\u7136\u540e\u6709\u4e2a\u62cd\u7167\u73af\u8282\u662f\u4f1a\u7ed9\u533a\u57df\u5185\u7684\u6bcf\u4e2a\u4eba\u5e26\u4e0a\u718a\u672c\u718a\u7684\u5934\u5957\u4e00\u6837\u7684\u6548\u679c\uff0c\u540e\u6765\u53d1\u73b0\u81ea\u5df1\u88ab\u62cd\u5230\u4e86\uff0c\u5c31\u8fd8\u662f\u7559\u5ff5\u4e86\u4e00\u4e0b\ud83d\ude02\ud83d\ude02\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20122.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e70\u4e86\u4e00\u70b9\u70b9\u5468\u8fb9\u652f\u6301\u5c31\u8d70\u4e86\uff0c\u5176\u5b9e\u8fd9\u65f6\u4e5f\u624d4\u70b9\u3002<\/p>\n<h3 id=\"\u718a\u672c\u62c9\u9762\u624b\u4fe1\">\u718a\u672c\u62c9\u9762+\u624b\u4fe1<\/h3>\n<p>\u8fd8\u662f\u5750\u7535\u8f66\u56de\u4e86\u718a\u672c\u7ad9\u3002\u5728\u65c1\u8fb9\u7684AMU Plaza\u5546\u573a\u91cc\u95f2\u901b\uff0c\u6253\u7b97\u5728\u8fd9\u91cc\u89c5\u98df\u3002<\/p>\n<p>\u718a\u672c\u6709\u4e9b one piece \u7684\u5408\u4f5c\u6e38\u73a9\u9879\u76ee\uff08\u6bd4\u5982\u96d5\u5851\u6253\u5361\u5565\u7684\uff09\uff0c\u56e0\u4e3a\u6211\u4e0d\u662fop\u7c89\uff0c\u6240\u4ee5\u5c31\u6ca1\u6709\u7279\u522b\u53bbcheck\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20124.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd8\u770b\u5230\u8fd9\u4e2a\uff0c\u662f\u6211\u53ea\u77e5\u9053\u540d\u5b57\u7684\u4e1c\u897f\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20125.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u5c31\u78b0\u5230\u4e86\u5728\u5c0f\u7ea2\u4e66\u4e0a\u770b\u4eba\u63a8\u8350\u8fc7\u7684\u62c9\u9762\u5e97\uff0c\u5929\u5916\u5929\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20126.jpeg\" alt=\"\"  \/>\n\n\n\u56e0\u4e3a\u8fd9\u4e2a\u65f6\u50195\u70b9\u90fd\u4e0d\u5230\uff0c\u5b8c\u5168\u6ca1\u6709\u4eba\u6392\u961f\uff0c\u6211\u76f4\u63a5\u5c31\u8fdb\u5e97\u5165\u5ea7\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20128.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6bd4\u8d77\u672d\u5e4c\u90a3\u5bb6miso\u62c9\u9762\uff0c\u6211\u6bd4\u8f83\u559c\u6b22\u718a\u672c\u7684\u8fd9\u4e2a\u3002\n\u53e6\u5916\u8fd9\u91cc\u7684\u63d2\u66f2\u662f\uff0c\u6211\u70b9\u4e86\u62c9\u9762\u540e\uff0c\u672c\u6765\u60f3\u8981\u52a0\u4e2a\u86cb\uff0c\u4f46\u662f\u8bf4\u6210\u4e86\u201c\u66ff\u7389\u201d\uff08\u304b\u3048\u305f\u307e\uff09\uff0c\u4f46\u5728\u62c9\u9762\u5e97\uff0c\u201c\u66ff\u7389\u201d\u662f\u6307\u4f60\u5403\u5b8c\u4e86\u9762\u4e4b\u540e\u518d\u7ed9\u4f60\u52a0\u4e00\u4efd\u9762\u3002\n\u63a5\u5f85\u6211\u7684\u5c0f\u54e5\u770b\u8d77\u6765\u5f88\u673a\u7075\uff0c\u53c8\u7528\u82f1\u6587\u95ee\u4e86\u6211\u4e00\u904d noodle or egg\uff0c\u6211\u60f3\u4e86\u4e24\u79d2\u624d\u53cd\u5e94\u8fc7\u6765\u81ea\u5df1\u8bf4\u9519\u4e86\uff0c\u7b11\u7740\u56de\u590d\u8bf4\u8981egg\u3002\n\u6211\u4e0d\u662f\u4e0d\u77e5\u9053\u201c\u66ff\u7389\u201d\u7684\u610f\u601d\uff0c\u53ea\u662f\u6211\u662f\u6b6a\u679c\u4ec1\u561b\uff0c\u4f9d\u7136\u4f1a\u72af\u7ecf\u5178\u9519\u8bef\ud83e\udd23<\/p>\n<p>\u786e\u8ba4\u8ba2\u5355\u540e\uff0c\u5c0f\u54e5\u624d\u5f00\u59cb\u505a\u62c9\u9762\uff0c\u6211\u5728\u5427\u53f0\u4e00\u76f4\u6084\u54aa\u54aa\u5728\u770b\u4ed6\uff0c\u56e0\u4e3a\u89c9\u5f97\u5c0f\u54e5\u6709\u70b9\u5e05\ud83d\ude0c\n\u548c\u5176\u4ed6\u51e0\u4f4d\u5e97\u5458\u5bf9\u6bd4\u611f\u89c9\uff0c\u8fd9\u4f4d\u5c0f\u54e5\u4f3c\u4e4e\u6709\u5316\u5986\uff0c\u6216\u8005\u81f3\u5c11\u6709\u4fee\u7709\u6bdb\uff0c\u7709\u6bdb\u5f88\u6574\u9f50\uff0c\u7ed9\u4eba\u4e00\u79cd\u6e05\u6d01\u611f\uff0c\u660e\u660e\u662f\u5728\u62c9\u9762\u5e97\u505a\u4e8b\uff0c\u4f46\u5f88\u6e05\u723d\u3002\n\u800c\u4e14\u4ed6\u4f4e\u5934\u5782\u76ee\u770b\u7740\u9505\u91cc\u7684\u9762\u7684\u65f6\u5019\uff0c\u6211\u6b63\u597d\u662f\u770b\u4ed6\u7684\u776b\u6bdb\u7684\u89c6\u89d2\uff0c\u5c31..\u633a\u597d\u770b\u7684\ud83d\ude0c<\/p>\n<p>\u5f88\u5fc3\u60c5\u6109\u60a6\u5730\u5403\u5b8c\u4e86\u62c9\u9762\u540e\u5c31\u5728\u718a\u672c\u7ad9\u968f\u4fbf\u901b\u4e86\u4e0b\uff0c\u6709\u770b\u5230\u718a\u672c\u7684ckw\u9650\u5b9a\uff0c\u4f46\u662f\u6709\u70b9\u4e11\u6ca1\u4e70\u5a03\uff0c\u4e70\u4e86\u4fe9\u94a5\u5319\u6263w\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20129.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20134.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u5b8c\u5168\u4e0d\u77e5\u9053\u8f9b\u5b50\u84ee\u6839\u5230\u5e95\u662f\u5565\uff0c\u6709\u591a\u8fa3\uff0c\u800c\u5728\u624b\u4fe1\u5e97\u91cc\u4e71\u627e\u5b9e\u7269\u662f\u4ec0\u4e48\u6837\u7684\uff0c\u5927\u81f4\u662f\u8fd9\u4e2a\u6837\u5b50\u2b07\ufe0f\n\u770b\u4e0a\u53bb\u4e0d\u50cf\u662f\u80fd\u73b0\u5403\u7684\uff0c\u5f88\u50cf\u662f\u90a3\u79cd\u4e0b\u9152\u83dc\u6216\u8005\u914d\u83dc\uff0c\u4e0d\u53ef\u80fd\u4e70\u8fd9\u4e48\u4e00\u6574\u6839\u56de\u53bb\uff0c\u4e4b\u540e\u4ee5\u540e\u518d\u8bf4\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20131.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u7b49\u65b0\u5e72\u7ebf\u56de\u535a\u591a\u7684\u65f6\u5019\uff0c\u665a\u971e\u989c\u8272\u304d\u308c\u3044\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20132.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u65b0\u5e72\u7ebf\u4e0a\u6beb\u65e0\u77e5\u89c9\u7684\u7761\u8fc7\u53bb\u4e86\uff0c\u5b9e\u5728\u662f\u975e\u5e38\u8212\u670d\uff0c\u6211\u597d\u50cf\u7279\u522b\u559c\u6b22\u5728\u4ea4\u901a\u5de5\u5177\u4e0a\u7761\u89c9\ud83d\ude02 \u5982\u679c\u6ca1\u6709\u7761\u9192\u4e0b\u8f66\uff0c\u65b0\u5e72\u7ebf\u4f3c\u4e4e\u4f1a\u76f4\u63a5\u5230\u65b0\u5927\u962a\ud83d\ude02<\/p>\n<h3 id=\"\u798f\u5188parco\">\u798f\u5188Parco<\/h3>\n<p>\u56de\u5230\u798f\u5188\u4e0d\u52307\u70b9\uff0c\u611f\u89c9\u592a\u65e9\u4e86\u8fd8\u4e0d\u60f3\u56de\u4f4f\u5bbf\uff0c\u5c31\u53bb\u4e86\u798f\u5188\u7684Parco\uff08\u6211\u771f\u662fParco\u5fe0\u5b9e\u5ba2\u6237\uff09\u3002<\/p>\n<p>\u7ecf\u8fc7\u5929\u795e\u5730\u4e0b\u8857\u7684\u65f6\u5019\u53d1\u73b0\u8fde\u8fd9\u91cc\u90fd\u6709light up\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20139.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728Parco\u91cc\u53d1\u73b0 Mofusand \u539f\u6765\u90fd\u6709\u4e13\u5356\u5e97\u7684\uff0c\u4f46\u662f\u6211\u53d1\u73b0\u4e00\u4e2a\u95ee\u9898\u662f\uff0c\u5b83\u7684\u6807\u4ef7\u597d\u9ad8\uff0c\u4f46\u662f\u60f3\u5230\u90fd\u662f made in China \u5c31\u4e70\u4e0d\u4e0b\u624b\uff0c\u800c\u4e14\u6bd4\u5982\u5a03\u5a03\u624b\u611f\u5f88\u4e0d\u884c\u3002\u3002\u3002\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20140.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7ecf\u8fc7\u53d1\u73b0\u6709\u63a8\u5b50\u7684\u5c55\uff0c\u7ed3\u679c\u662f15\u53f7\u624d\u5f00\u59cb\uff0c\u5c31\u60f3\u7740\u6709\u65f6\u95f4\u8fc7\u4e24\u5929\u518d\u8fc7\u6765\u4e00\u6b21\uff08\u662f\u7684\uff0c15\u53f7\u53bb\u4e86\uff09\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20142.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u8fdb\u5165\u4e86\u51e0\u767e\u5e74\u6ca1\u6709\u8fdb\u8fc7\u7684 Animate\uff0c\u9996\u5148\u8fd8\u662f\u53bbBL\u533a<\/p>\n<p>Given\u533a\uff0c\u771f\u597d\u770b\uff0c\u53ea\u662f\u6709\u70b9\u90c1\u95f7\uff0c\u6211\u4ee5\u524d\u6536\u7684\u662f\u53f0\u7248\uff0c\u73b0\u5728\u6709\u70b9\u4e0d\u77e5\u9053\u53bb\u54ea\u91cc\u4e70\u53f0\u7248\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20143.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20146.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20147.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u563f\u563f\uff0c\u9e23\u9e1f\u6765\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20144.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20145.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e2d\u534eBL\u533a\uff0c\u6211\u5bf9\u8089\u5305\uff08\u95ee\u4e86\u670b\u53cb\u624d\u77e5\u9053\uff0c\u662f\u300a\u4e8c\u54c8\u548c\u4ed6\u7684\u767d\u732b\u5e08\u5c0a\u300b\u7684\u4f5c\u8005\uff09\u7684\u8fd9\u672c\u5c0f\u8bf4\u6709\u70b9\u5174\u8da3\u4e86\uff0c\u56e0\u4e3a\u4e38\u6728\u6237\u8001\u5e08\u7adf\u7136\u4f1a\u8170\u5c01\u63a8\u8350\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20155.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20156.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u672c\u6765\u7684\u4efb\u52a1\u5c31\u662f\u8865\u5168\u9e23\u9e1f\u5355\u884c\u672c\uff0c\u6211\u7f3a\u7684\u662f7-9\uff0c\u4f46\u662f\u8fd9\u53ea\u67093\u672c\uff0c\u600e\u4e48\u4e5f\u627e\u4e0d\u5230\u522b\u7684\u60f3\u4e70\u7684\uff0c\u4e5f\u4e0d\u60f3\u884c\u674e\u592a\u91cd\uff0c\u56e0\u4e3a\u88c5\u7740\u5317\u6d77\u9053\u7684\u539a\u8863\u670d\u5df2\u7ecf\u5f88\u91cd\u5360\u4e86\u5f88\u591a\u4f53\u79ef\u4e86\u3002\n\u4e8e\u662f\u6ca1\u6709\u641e\u9000\u7a0e\u5c31\u4e70\u4e863\u672c\u6f2b\u753b\u5355\u884c\u8d70\u4e86\u3002<\/p>\n<p>\u4e0d\u4e70\u4ec0\u4e48\u4e5f\u559c\u6b22\u901b\u7684ckw land \ud83d\ude1a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20148.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20149.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20150.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20151.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u53c8\u4e00\u6b21\u7ecf\u8fc7\u5929\u795e\u4e2d\u592e\u516c\u56ed\">\u53c8\u4e00\u6b21\u7ecf\u8fc7\u5929\u795e\u4e2d\u592e\u516c\u56ed<\/h3>\n<p>\u6d88\u78e8\u4e86\u4e00\u4e9b\u65f6\u95f4\u540e\u624d\u5dee\u4e0d\u591a\u5f80\u56de\u8d70\u4e86\u3002\u518d\u6b21\u7ecf\u8fc7\u5929\u795e\u4e2d\u592e\u516c\u56ed\u7684\u65f6\u5019\uff0c\u6628\u5929\u8fd8\u5728\u642d\u5efa\u505a\u51c6\u5907\u7684\uff0c\u4eca\u5929\u5df2\u7ecf\u5f00\u59cbparty\u4e86\ud83d\ude06<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20152.jpeg\" alt=\"\"  \/>\n\n\n\u4e0d\u77e5\u9053\u4e3a\u4ec0\u4e48\u8fd9\u4e2a\u4e3b\u9898\uff0c\u603b\u4e4b\u5c31\u662f\u6709\u5f88\u591a\u4e2a\u5723\u8bde\u8001\u4eba\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20153.jpeg\" alt=\"\"  \/>\n\n\n\u6628\u5929\u770b\u89c1\u5de5\u4eba\u6b63\u5728\u642d\u7684\u6700\u5927\u7684\u5723\u8bde\u6811\u539f\u6765\u662f\u8fd9\u4e2a\u6837\u5b50\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20154.jpeg\" alt=\"\"  \/>\n\n\n\u6709\u4eba\u73b0\u573alive\uff0c\u5531\u5f97\u86ee\u597d\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20157.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u63a5\u8fd19\u70b9\u56de\u7684\u9152\u5e97\uff0c\u56e0\u4e3a\u62c9\u9762\u4e5f\u662f\u5dee\u4e0d\u591a4\u4e2a\u5c0f\u65f6\u524d\u5403\u7684\u4e86\uff0c\u53c8\u53bb\u4fbf\u5229\u5e97\u52a0\u4e86\u9910hhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1113-Fukuoka-Kumamoto%20-%20158.jpeg\" alt=\"\"  \/>\n\n<\/p>\n]]>"},{"title":"\u65f6\u96945\u5e74\u7684\u9713\u8679\u65c5\u884c\uff08\u4e94\uff09\u7531\u5e03\u9662+\u56de\u5230\u798f\u5188","link":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-3\/","pubDate":"Sat, 23 Nov 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-3\/","description":"<h2 id=\"1115-\u7531\u5e03\u9662\u7531\u5e03\u9662\u4e4b\u68ee\u5927\u6fe0\u516c\u56ed\">11.15 \u7531\u5e03\u9662+\u7531\u5e03\u9662\u4e4b\u68ee+\u5927\u6fe0\u516c\u56ed<\/h2>\n<h3 id=\"\u53bb\u7531\u5e03\u9662\">\u53bb\u7531\u5e03\u9662<\/h3>\n<p>\u6211\u552f\u4e00\u63d0\u524d\u4e70\u4e86\u6307\u5b9a\u5e2d\u7684\u662f\u4eca\u5929\u4e2d\u5348\u4ece\u7531\u5e03\u9662\u51fa\u53d1\u7684\u7531\u5e03\u9662\u4e4b\u68ee\u3002\n\u5176\u5b9e\u672c\u6765\u662f\u60f3\u4e70\u8fd9\u5929\u4e0b\u5348\u4ece\u522b\u5e9c\u51fa\u53d1\u7684\u7531\u5e03\u9662\u4e4b\u68ee\uff0c\u7ed3\u679c\u6ca1\u7968\u4e86\u3002\u3002\u3002\u53ea\u6709\u4ece\u7531\u5e03\u9662\u51fa\u53d1\u7684\u6709\u5ea7\u4f4d\u3002\n\u4f46\u662f\u6211\u5c31\u5f97\u81ea\u5df1\u627e\u65b9\u6cd5\u5148\u53bb\u5230\u7531\u5e03\u9662\u3002<\/p>","content":"<![CDATA[<h2 id=\"1115-\u7531\u5e03\u9662\u7531\u5e03\u9662\u4e4b\u68ee\u5927\u6fe0\u516c\u56ed\">11.15 \u7531\u5e03\u9662+\u7531\u5e03\u9662\u4e4b\u68ee+\u5927\u6fe0\u516c\u56ed<\/h2>\n<h3 id=\"\u53bb\u7531\u5e03\u9662\">\u53bb\u7531\u5e03\u9662<\/h3>\n<p>\u6211\u552f\u4e00\u63d0\u524d\u4e70\u4e86\u6307\u5b9a\u5e2d\u7684\u662f\u4eca\u5929\u4e2d\u5348\u4ece\u7531\u5e03\u9662\u51fa\u53d1\u7684\u7531\u5e03\u9662\u4e4b\u68ee\u3002\n\u5176\u5b9e\u672c\u6765\u662f\u60f3\u4e70\u8fd9\u5929\u4e0b\u5348\u4ece\u522b\u5e9c\u51fa\u53d1\u7684\u7531\u5e03\u9662\u4e4b\u68ee\uff0c\u7ed3\u679c\u6ca1\u7968\u4e86\u3002\u3002\u3002\u53ea\u6709\u4ece\u7531\u5e03\u9662\u51fa\u53d1\u7684\u6709\u5ea7\u4f4d\u3002\n\u4f46\u662f\u6211\u5c31\u5f97\u81ea\u5df1\u627e\u65b9\u6cd5\u5148\u53bb\u5230\u7531\u5e03\u9662\u3002<\/p>\n<p>\u5b9e\u9645\u4e0a\u4ece\u522b\u5e9c\u5230\u7531\u5e03\u9662\u6709\u5df4\u58eb\uff0c\u800c\u4e14\u65f6\u95f4\u4e0d\u957f\uff0c\u4f46\u662f\u8fd9\u9700\u8981\u6211\u53e6\u5916\u82b11000\u591a\uff0c\u6211\u60f3\u7740\u6211\u90fd\u7528JR pass\u4e86\uff0c\u5fc5\u987b\u518d\u591a\u7528\u7528\u5427\uff0c\u5426\u5219\u5b8c\u5168\u6ca1\u8d5a\u56de\u6765\u554a\u3002<\/p>\n<p>\u5c31\u67e5\u4e86\u5f88\u4e45\u600e\u4e48\u6837\u4ece\u522b\u5e9c\u53bb\u7531\u5e03\u9662\uff0c\u5168\u90e8\u90fd\u5229\u7528JR\uff0c\u6ca1\u60f3\u5230\u8fd9\u4e2a\u8fc7\u7a0b\u6bd4\u6211\u60f3\u7684\u9ebb\u70e6\u3002\n\u57fa\u672c\u4e0a\u5f97\u5148\u4ece\u522b\u5e9c\u53bb\u5927\u5206\uff0c\u518d\u8f6c\u8f66\u53bb\u7531\u5e03\u9662\uff0c\u5b8c\u5168\u662f\u7ed5\u8def\uff0c\u800c\u4e14\u73ed\u6b21\u4e5f\u6ca1\u6211\u4ee5\u4e3a\u7684\u90a3\u4e48\u591a\uff0c\u4efb\u4f55\u4e00\u73ed\u90fd\u4e0d\u80fd\u9519\u8fc7\u90a3\u79cd\u3002<\/p>\n<p>\u6240\u4ee5\u4e00\u65e9\u624d\u614c\u5f20\u7684\u79bb\u5f00\u522b\u5885\u53bb\u8d76\u8f66\u3002\n\u9996\u5148\u786e\u4fdd\u7b2c\u4e00\u7a0b\u987a\u5229\u5230\u8fbe\u5927\u5206\u7ad9\u3002<\/p>\n<p>\u8fd8\u633a\u559c\u6b22\u7684\u753b\u9762\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2016.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u84dd\u8272\u7684\u4e5f\u662f\u7279\u8272\u5217\u8f66\uff0c\u53ebsonic 883\uff0c\u6211\u5f53\u65f6\u6ca1\u6709\u7279\u522b\u67e5\u8fc7\u8fd9\u8f86\u8f66\uff0c\u4ee5\u4e3a\u7279\u6025\u8f66\u9700\u8981\u53e6\u5916\u52a0\u94b1\u624d\u80fd\u5750\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2017.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u5b9e\u8fd9\u4e2asonic \u662f\u5305\u62ec\u5728 JR pass \u91cc\u7684\uff0c\u5b83\u6709\u81ea\u7531\u5e2d\u53ef\u4ee5\u968f\u4fbf\u5750\u7684\u3002\n\u6ca1\u505a\u597d\u529f\u8bfe\u7684\u6211\u53bb\u5750\u4e86\u53e6\u4e00\u4e2alocal train\uff0c\u7ed3\u679c\u6162\u6162\u60a0\u60a0\u8fd8\u5f88\u591a\u4eba\u7684\uff0c\u6bd4\u9884\u8ba1\u63a8\u8fdf\u4e867\u5206\u949f\u5de6\u53f3\u5230\u8fbe\u5927\u5206\u3002<\/p>\n<p>\u8fd8\u597d\u4e2d\u95f4\u672c\u6765\u5c31\u9700\u8981\u7b4920\u5206\u949f\u5de6\u53f3\uff0c\u6211\u4e0d\u81f3\u4e8e\u8d76\u4e0d\u4e0a\u5927\u5206\u51fa\u53d1\u53bb\u7531\u5e03\u9662\u7684\u8f66\u3002<\/p>\n<p>\u4e0d\u8fc7\u5927\u5206\u51fa\u53d1\u53bb\u7531\u5e03\u9662\u7684\u8f66\u662f\u8fd9\u4e2a\u9ec4\u8272\u7684 yellow one-man\uff0c\u770b\u8d77\u6765\u975e\u5e38\u65e7\u5f0f\u4e86\uff0c\u4e5f\u8fd8\u633a\u4e0d\u9519\u7684\uff0c\u867d\u7136\u5b83\u4e5f\u5f88\u6162hhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2019.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2020.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2021.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u8f66\u4e0a\u65e0\u804a\u7ed9\u9053\u5177\u4eec\u62cd\u7167\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2022.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2025.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2027.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u7531\u5e03\u9662\u91d1\u9cde\u6e56\">\u7531\u5e03\u9662\u91d1\u9cde\u6e56<\/h3>\n<p>\u5927\u698210\u70b9\u591a\u624d\u5230\u7531\u5e03\u9662\uff0c\u5982\u679c\u662f\u5df4\u58eb\uff0c\u5927\u69821\u4e2a\u5c0f\u65f6\u5c31\u80fd\u5230\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2035.jpeg\" alt=\"\"  \/>\n\n\n\u65f6\u95f4\u8868\u8fd8\u662f\u7528\u8fd9\u79cd\u8bbe\u8ba1\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2036.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2085.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e00\u51fa\u7ad9\u4f1a\u6709\u79cd\u8fd9\u4e2a\u5c0f\u9547\u4e00\u6837\u671b\u5f97\u5230\u5934\u7684\u611f\u89c9\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2037.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u6ca1\u559d\u5496\u5561\uff0c\u5148\u4e70\u4e86\u676f\u62b9\u8336\u62ff\u94c1\uff08\u4e3a\u5565\u662f\u62b9\u8336\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2038.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6b63\u597d\u662f\u56e0\u4e3a\u7531\u5e03\u9662\u4e4b\u68ee\u662f\u4e2d\u534812\u70b9\u624d\u51fa\u53d1\uff0c\u5728\u7531\u5e03\u9662\u53ea\u6709\u4e00\u4e2a\u534a\u5c0f\u65f6\uff0c\u6211\u641c\u5730\u56fe\u662f\u8bf4\u6b65\u884c\u53bb\u91d1\u9cde\u6e56\u4e5f\u5c3120\u5206\u949f\uff0c\n\u6240\u4ee5\u60f3\u7740\u90a3\u5c31\u76f4\u63a5\u6765\u56de\u4e00\u4e0b\u91d1\u9cde\u6e56\u5c31\u57fa\u672c\u80fd\u5229\u7528\u4e0a\u8fd9\u4e2a1\u4e2a\u534a\u5c0f\u65f6\u4e86\u3002<\/p>\n<p>\u6b65\u884c\u53bb\u91d1\u9cde\u6e56\u7684\u8def\u4e0a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2040.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2042.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2045.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2048.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2050.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2051.jpeg\" alt=\"\"  \/>\n\n\n\u8fd9\u4e2a\u662d\u548c\u9986\u6211\u672c\u6765\u5f88\u6709\u5174\u8da3\u7684\uff0c\u4f46\u662f\u4f30\u6478\u7740\u65f6\u95f4\u53ef\u80fd\u4e0d\u592a\u591f\uff0c\u5c31\u8fd8\u662f\u653e\u5f03\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u9010\u6e10\u9760\u8fd1\u91d1\u9cde\u6e56\u4e86\uff0c\u662f\u6709\u4e00\u5c0f\u90e8\u5206\u67ab\u53f6\u53d8\u7ea2\u4e86\uff0c\u4f46\u8fd8\u4e0d\u591f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2056.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2058.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2060.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e5f\u4e0d\u7b97\u5b8c\u5168\u6251\u7a7a\u5c31\u4e0d\u9519\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2062.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2064.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u5c31\u662f\u91d1\u9cde\u6e56\u672c\u6e56\u4e86\uff0c\u5176\u5b9e\u6e56\u4e0d\u5927\u7684\uff0c\u4eba\u4e5f\u4e0d\u5c11\uff0c\u53ef\u80fd\u518d\u8fc7\u4e00\u5468\u6765\u4f1a\u5f88\u6f02\u4eae\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2066.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2070.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2069.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2076.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2079.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u80e1\u4e71\u62cd\u4e86\u70b9\u7167\u5c31\u5f80\u56de\u4e86\u3002\u9014\u4e2d\u786e\u5b9e\u7ecf\u8fc7\u4e86\u662d\u548c\u9986\uff0c\u770b\u8d77\u6765\u786e\u5b9e\u4e0d\u5c11\u597d\u73a9\u7684\uff0c\u4e0d\u591f\u65f6\u95f4\u60f9\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2081.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u968f\u4fbf\u4e70\u4e86\u4e2a\u5c0f\u829d\u58eb\u86cb\u7cd5\uff0c\u8fd8\u53ef\u4ee5\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2083.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8def\u4e0a\u8fd8\u770b\u5230\u8fd9\u5bb6\u53eb\u201c\u5fc3\u201d\u7684\u5e97\u597d\u50cf\u5f88\u7f51\u7ea2\uff0c\u597d\u957f\u7684\u961f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2084.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u7531\u5e03\u9662\u4e4b\u68ee\">\u7531\u5e03\u9662\u4e4b\u68ee<\/h3>\n<p>\u6700\u51fa\u540d\u7684\u4e5d\u5dde\u7279\u8272\u5217\u8f66\u5927\u6982\u5c31\u662f\u8fd9\u4e2a\u4e86\u3002\u5b83\u73b0\u5728\u662f\u67094\u8282\u8f66\u53a2\u3002\u5176\u5b9e\u5185\u90e8\u53ef\u73a9\u6027\u6bd4\u8d77\u963f\u82cf\u7537\u5b69\u8fd8\u5c11\u4e00\u4e9b\uff0c\u8010\u4e0d\u4f4f\u73b0\u5728\u540d\u6c14\u5927www<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2088.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2089.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2090.jpeg\" alt=\"\"  \/>\n\n\n\u6211\u7684\u5ea7\u4f4d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2091.jpeg\" alt=\"\"  \/>\n\n\n\u8f66\u53a2\u4e4b\u95f4\u7684\u9694\u95e8\u8fd8\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2092.jpeg\" alt=\"\"  \/>\n\n\n\u7eaa\u5ff5\u7ae0\u5f88\u597d\u770b\uff0c\u8bf4\u8d77\u6765\u6211\u6ca1\u5728\u963f\u82cf\u7537\u5b69\u4e0a\u770b\u5230\uff0c\u4e0d\u77e5\u9053\u662f\u6211\u9519\u8fc7\u4e86\uff0c\u8fd8\u662f\u81ea\u7531\u5e2d\u5c31\u662f\u6ca1\u5f00\u653e\u3002\u3002\u3002\ud83d\ude41\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2096.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2097.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6ca1\u4e70\u522b\u7684\u996d\uff0c\u5176\u5b9e\u672c\u6765\u4ee5\u4e3a\u7531\u5e03\u9662\u4f1a\u6709\u5356\u4fbf\u5f53\u7684\uff0c\u4e5f\u6ca1\u770b\u5230\uff0c\u5c31\u53ea\u80fd\u5728\u8f66\u4e0a\u4e70\u4e86\u4e2a\u6c34\u679csand\u5f53\u4e2d\u996d\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20101.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u4ed6\u5c31\u6ca1\u7279\u522b\u62cd\u4ec0\u4e48\uff0c\u7ee7\u7eed\u5728\u8f66\u4e0a\u770b\u98ce\u666f+\u7761\u89c9\u4e86\u3002<\/p>\n<h3 id=\"\u5927\u6fe0\u516c\u56ed\">\u5927\u6fe0\u516c\u56ed<\/h3>\n<p>2\u4e2a\u5c0f\u65f6\u540e\u5c31\u56de\u5230\u4e86\u535a\u591a\u3002<\/p>\n<p>\u5750\u5730\u94c1\u53bb\u4e86\u5927\u6fe0\u516c\u56ed\uff0c\u5176\u5b9e\u4e5f\u662f\u4e2a\u5f88\u5927\u7684\u5e02\u6c11\u516c\u56ed\uff0c\u633a\u60ec\u610f\u7684\uff0c\u8bf4\u8d77\u6765\u6211\u8fd9\u6b21\u65c5\u6e38\u53bb\u4e86\u597d\u591a\u597d\u591a\u516c\u56ed\u3002\n\u81ea\u4ece\u642c\u5230\u90ca\u533a\u4f4f\u4e86\u4e4b\u540e\uff0c\u5f00\u59cb\u559c\u6b22\u901b\u516c\u56ed\ud83d\ude02\ud83d\ude02\ud83d\ude02<\/p>\n<p>\u4e0d\u77e5\u9053\u5565\u65e5\u5b50\uff0c\u8fd8\u633a\u591a\u7a7f\u548c\u670d\u6765\u516c\u56ed\u62cd\u7167\u7684\u4eba\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20110.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20112.jpeg\" alt=\"\"  \/>\n\n\n\u633a\u53ef\u7231\u7684\u4e00\u5bf9\u304d\u3064\u306d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20111.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u8fb9\u516c\u56ed\u7684\u67ab\u53f6\u4e5f\u662f\u5927\u90e8\u5206\u6ca1\u7ea2\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20117.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5927\u6fe0\u516c\u56ed\u6709\u5927\u9762\u79ef\u7684\u6e56\uff0c\u6709\u5f88\u591a\u5f88\u591a\u9e2d\u5b50\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20119.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20123.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u65e5\u672c\u5ead\u9662\">\u65e5\u672c\u5ead\u9662<\/h4>\n<blockquote>\n<p><a href=\"https:\/\/www.ohoriteien.jp\/zh\/\">https:\/\/www.ohoriteien.jp\/zh\/<\/a><\/p>\n<\/blockquote>\n<p>\u516c\u56ed\u91cc\u6709\u4e2a\u65e5\u672c\u5ead\u9662\uff0c\u4e5f\u6ca1\u5565\u7279\u522b\uff0c\u5b8c\u5168\u662f\u6765\u90fd\u6765\u4e86\u5c31\u8fdb\u53bb\u8f6c\u4e86\u4e00\u5708\u3002<\/p>\n<p>\u8fdb\u95e8\u7684\u65f6\u5019\u6211\u65c1\u8fb9\u4e00\u8d77\u8fdb\u5165\u7684\u6709\u4e00\u5bf9\u7236\u6bcd\uff0c\u540e\u6765\u53d1\u73b0\u597d\u50cf\u662f\u4ed6\u4eec\u513f\u5b50\u8981\u7ed3\u5a5a\uff0c\u513f\u5b50\u548c\u51c6\u513f\u5ab3\u7a7f\u4e86\u5b8c\u6574\u5168\u5957\u548c\u670d\u5728\u62cd\u7167\u3002\n\u4e0d\u77e5\u9053\u8fd9\u7b97\u4e0d\u7b97\u5a5a\u7eb1\u7167\u91cc\u7684\u5176\u4e2d\u4e00\u4e2aset\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20125.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5ead\u9662\u672c\u8eab\u4e5f\u8fd8\u884c\uff0c\u56e0\u4e3a\u4e5f\u4e0d\u5927\uff0c\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20126.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20133.jpeg\" alt=\"\"  \/>\n\n\n\u55ef\uff0c\u4e5f\u6709\u5f88\u591a\u5de8\u80a5\u7684\u9ca4\u9c7c\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20129.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u63d0\u4f9b\u8336\u5ba4\u670d\u52a1\u7684\u5c0f\u9662\u5b50\u597d\u50cf\u66f4\u522b\u81f4\u4e00\u4e9b\uff0c\u4e0d\u8fc7\u67ab\u53f6\u4e5f\u6ca1\u7ea2\uff0c\u8fd8\u4e0d\u591f\u597d\u770b\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20134.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5077\u62cd\u4e86\u4e00\u4e0b\u7236\u6bcd\u548c\u65b0\u4eba\uff0c\u5355\u7eaf\u662f\u6ca1\u60f3\u5230\u8fd9\u79cd\u666f\u70b9\u4e0d\u662f\u53ea\u6709\u6e38\u5ba2\u4f1a\u6765hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20137.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u798f\u5188\u7f8e\u672f\u9986\">\u798f\u5188\u7f8e\u672f\u9986<\/h4>\n<blockquote>\n<p><a href=\"https:\/\/www.fukuoka-art-museum.jp\/\">https:\/\/www.fukuoka-art-museum.jp\/<\/a><\/p>\n<\/blockquote>\n<p>\u65e5\u672c\u5ead\u9662\u65c1\u8fb9\u5c31\u662f\u798f\u5188\u7f8e\u672f\u9986\uff0c\u5b83\u7684\u7ea2\u8272\u7816\u5899\u5f88\u6709\u7279\u70b9\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20121.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u91cc\u4e5f\u6709\u4e00\u4e2a\u8349\u95f4\u5f25\u751f\u7684\u5357\u74dc\u662f\u6211\u8fd9\u6b21\u67e5\u884c\u7a0b\u7b2c\u4e00\u6b21\u77e5\u9053\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20148.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20150.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20153.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7f8e\u672f\u9986\u91cc\u4e00\u4e2a\u6ca1\u592a\u660e\u767d\u4e00\u76f4\u5728\u8f6c\u7684\u88c5\u7f6e\uff0c\u4e00\u8fb9\u52fe\u52d2\u51fa\u8f66\u51f9\u69fd\uff0c\u4e00\u8fb9\u62b9\u5e73\u3002\u3002\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20155.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7f8e\u672f\u9986\u7684\u95e8\u7968\u662f200yen\uff0c\u4e00\u4e8c\u697c\u90fd\u6709\u70b9\u4e1c\u897f\u53ef\u770b\u3002\u4e8c\u697c\u7684\u540e\u73b0\u4ee3\u827a\u672f\u597d\u770b\u4e00\u70b9\uff08\u4e5f\u53ef\u80fd\u662f\u6211\u719f\u6089\u4e00\u4e9b\uff09\n\u53cd\u6b63\u8fd9\u4e2a\u95e8\u7968\u4e0d\u4f1a\u4e8f\u5427\u3002<\/p>\n<p>\u6709\u4e2a\u5c0f\u5385\u5c55\u51fa\u4e00\u4e9b\u65e5\u672c\u5f53\u4ee3\u5e74\u8f7b\u827a\u672f\u5bb6\u7684\u4f5c\u54c1\uff0c\u5176\u4e2d\u4e00\u4e2a\u597d\u50cf\u662f\u5728\u65e5\u672c\u51fa\u751f\u7684\u97e9\u56fd\u79fb\u6c11\u4e8c\u4ee3\u7684\u5e74\u8f7b\u827a\u672f\u5bb6\uff0c\u6211\u8fd8\u633a\u559c\u6b22\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20160.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20161.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u518d\u6b21\u798f\u5188parco\">\u518d\u6b21\u798f\u5188Parco<\/h3>\n<p>\u51fa\u7f8e\u672f\u9986\u57fa\u672c\u5dee\u4e0d\u591a\u5c31\u5feb5\u70b9\u4e86\uff0c\u4e5f\u5feb\u5929\u9ed1\u4e86\uff0c\u5c31\u5f00\u59cb\u5f80\u5929\u795e\u533a\u8d70\u8fc7\u53bb\u4e86\uff0c\u5355\u7eaf\u56e0\u4e3a\u611f\u89c9\u8fd9\u5929\u6ca1\u8d70\u592a\u591a\u8def\uff0c\u5c31\u6253\u7b97\u4e0d\u5750\u5730\u94c1\u76f4\u63a5\u817f\u8fc7\u53bb\u798f\u5188Parco\u3002\n\u5b9e\u9645\u8d70\u5230Parco\u811a\u771f\u7684\u5feb\u65ad\u4e86\uff0c\u4e5f\u8ddf\u8fd9\u4e24\u5929\u7a7f\u7684\u978b\u6ca1\u90a3\u4e48\u597d\u8d70\u8def\u6709\u5173\ud83d\ude02<\/p>\n<p>\u4e2d\u9014\u7ecf\u8fc7\u4e86Mandarake\uff0c\u5c31\u53c8\u8fdb\u53bb\u8f6c\u4e86\u4e00\u4e0b\uff0c\u53c8\u770b\u4e86\u4e00\u773c\u7eb8\u7247\u7684\u4ef7\u683c\uff0c\u4f46\u8fd8\u662f\u6ca1\u6562\u53bb\u95ee\u4e00\u4e0b\uff0c\u4e00\u5f20\u7eb8\u7247\u6536\u591a\u5c11\u94b1\u3002\uff08\u5341\u5206\u597d\u5947\u662f\u4ec0\u4e48\u7529\u5356\u4ef7\uff09\n\u7b49\u6211\u771f\u7684\u5b8c\u5168\u4e0d\u60f3\u7559\u7740\u7684\u65f6\u5019\uff0c\u5c31\u627e\u4e2a\u673a\u4f1a\u5356\u5230\u8fd9\u91cc\u597d\u4e86hhhhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20173.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5927\u69826\u70b9\u534a\u53c8\u56de\u5230\u4e86Parco\u3002<\/p>\n<p>\u5148\u662f\u649e\u5230\u4e86\u63a8\u5b50\u7684\u5408\u4f5ccafe\uff0c\u539f\u6765\u4e5f\u6ca1\u51e0\u4e2a\u4eba\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20177.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20178.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u91cd\u65b0\u627e\u5230Kiddy Land\uff0c\u770b\u5230\u4e8615\u53f7\u5f00\u59cb\u4e0a\u65b0\u7684 loveit \u548c\u4e09\u4e3d\u9e25\u7684\u5408\u4f5c\u6b3e\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20179.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20180.jpeg\" alt=\"\"  \/>\n\n\n\u6211\u53ea\u62bd\u4e86\u4e00\u4e2a\u65b9\u5f62\u5427\u5527\uff0c\u6bd4\u8f83\u60f3\u8981kuromi\uff0c\u4f46\u62bd\u4e86\u4e2a\u5168\u5458\uff0c\u4e5f\u4e0d\u5dee\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20183.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>ckw\u8fd9\u8fb9\u4e5f\u4e0a\u65b0\u4e86\u4e00\u4e9b\uff0c\u8fd9\u4e2a\u4e0d\u77e5\u9053\u53eb\u4ec0\u4e48\u6bdb\u7684\u7cfb\u7edf\u6211\u89c9\u5f97\u7279\u522b\u53ef\u7231\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20182.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u63a8\u5b50\u7279\u5c55\">\u63a8\u5b50\u7279\u5c55<\/h4>\n<p>\u5176\u5b9e\u4e5f\u6ca1\u5565\u4eba\uff0c1800\u5165\u573a\u5238\u662f\u771f\u7684\u597d\u8d35\ud83d\ude13\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20184.jpeg\" alt=\"\"  \/>\n\n\n\u4e70\u4e86\u7968\u4e4b\u540e\uff0c\u4f1a\u8ba9\u4f60\u9009\u62e9\u4e00\u4e2a\u97f3\u58f0guide\uff0c\u662f\u6709\u99ac\u304b\u306a\u8fd8\u662f\u9ed2\u5ddd\u3042\u304b\u306d\u3002\u8fd9\u4e2a\u65f6\u95f4\u70b9\uff0c\u6211\u5176\u5b9e\u8fd8\u6ca1\u6765\u5f97\u53ca\u8865\u7b2c\u4e8c\u5b63\uff0c\u53ea\u662f\u5927\u6982\u77e5\u9053\u662f\u6f14\u821e\u53f0\u5267\u7684\u5267\u60c5\u3002\n\u6211\u4e5f\u4e0d\u592a\u8bb0\u5f97\u6211\u7b2c\u4e00\u5b63\u7684\u65f6\u5019\u66f4\u559c\u6b22\u8c01\u6765\u7740\uff0c\u6a21\u7cca\u89c9\u5f97\u5e94\u8be5\u662f\u3042\u304b\u306d\u9171\u5427\uff0c\u5c31\u9009\u4e86\u3042\u304b\u306d\u9171\u3002\n\u5176\u5b9e\u9009\u54ea\u4e2a\u5973\u5b69\u5b50\u7684\u58f0\u97f3\u5bf9\u6211\u6765\u8bf4\u771f\u7684\u65e0\u6240\u8c13\uff0c\u6211\u6700\u559c\u6b22\u7684\u53ea\u662f\u30a2\u30af\u30a2\u7684\u58f0\u97f3\u3002\u6211\u4e5f\u6709\u70b9\u8ba8\u538c\u8fd9\u79cd\u65b9\u5f0f\u6709\u70b9\u50cf\u641e\u515a\u4e89\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20185.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20186.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20187.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20188.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20189.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20190.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20191.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20193.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20194.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20195.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u80fd\u62cd\u7167\u7684\u5927\u6982\u5c31\u4e0a\u9762\u8fd9\u4e9b\uff0c\u5176\u5b9e\u5185\u5bb9\u4e5f\u4e0d\u7b97\u5f88\u591a\u5427\u3002\u4f46\u662f\u6211\u542c\u97f3\u58f0guide\u542c\u5f97\u5df2\u7ecf\u975e\u5e38\u6ee1\u8db3\u3002\n\u5176\u5b9e\u6240\u8c13\u97f3\u58f0guide \u4e5f\u5c31\u662f\u626b\u63cf\u5230\u4e00\u4e2a\u7f51\u7ad9\u4e0a\u4e00\u6761\u4e00\u6761\u81ea\u5df1\u70b9\u5f00\u7684\u3002\n\u672c\u6765\u8fd8\u4ee5\u4e3a\u6211\u4fdd\u5b58\u8fd9\u4e2a\u7f51\u7ad9\u5c31\u80fd\u91cd\u590d\u542c\u4e86\uff0c\u4e0d\u8fc7\u521a\u521a\u91cd\u8bd5\u4e86\u4e00\u4e0b\uff0c\u539f\u6765\u662f\u6709\u65f6\u95f4\u9650\u5236\u7684\uff0c\u8fc7\u65f6\u5c31\u4e0d\u80fd\u518d\u542c\u4e86\uff0c\u561b\u561b\u561b\ud83d\ude02<\/p>\n<p>\u62bd\u4e86\u4fe9\u4e2aQ\u7248\u5c0f\u7acb\u724c\uff0c\u53ef\u60dc\u90fd\u4e0d\u662f\u30a2\u30af\u30a2\u3002\u4f46\u56e0\u4e3a\u672c\u6765\u5c31\u5f88\u53ef\u7231\uff0c\u5012\u4e5f\u7f62\u4e86<\/p>\n<h3 id=\"\u517c\u864e\u6cbe\u9762\">\u517c\u864e\u6cbe\u9762<\/h3>\n<p>\u7136\u540e7\u70b9\u534a\u4e86\uff0c\u5c31\u60f3\u7740\u5403\u4e2a\u996d\u5c31\u56de\u53bb\u6536\u62fe\u884c\u674e\u51c6\u5907\u7b2c\u4e8c\u5929\u56de\u7a0b\u4e86\u3002<\/p>\n<p>\u7136\u540e\u641c\u4e86\u4e0b\u770b\u5230\u8fc7\u597d\u591a\u6b21\u63a8\u8350\u7684\u517c\u864e\u6cbe\u9762\uff0c\u672c\u6765\u4ee5\u4e3a\u8981\u56de\u5230\u535a\u591a\u7ad9\u53bb\u5403\uff0c\u6ca1\u60f3\u5230Parco \u5730\u4e0b\u5c31\u6709\u4e00\u5bb6\u5206\u5e97\u3002\n\u4e0b\u697c\u8fc7\u53bb\u770b\u4e86\u4e00\u773c\u6392\u961f\u7684\u4eba\u53ea\u6709\u4e24\u4e2a\uff0c\u592a\u597d\u4e86\uff01<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20196.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5b83\u662f\u5148\u53bb\u673a\u5668\u4e0a\u4e70\u98df\u5238\u7684\u90a3\u79cd\u3002\u4e70\u7684\u65f6\u5019\u6709\u70b9\u72b9\u8c6b\u8981\u4e0d\u8981\u8f9b\u53e3\uff0c\u56e0\u4e3a\u770b\u4e0a\u53bb\u8f9b\u53e3\u5356\u5f97\u66f4\u597d\uff0c\u5e97\u5458\u5c0f\u54e5\u4eb2\u5207\u5f97\u8ddf\u6211\u8bf4\u60f3\u5403\u6709\u70b9\u70b9\u8fa3\u7684\u4e5f\u53ef\u4ee5\u9009\u8fa3\u5ea6\u6700\u4f4e\uff08\u6291\u3048\u3081\uff09\u3002\n\u4e8e\u662f\u5c31\u8fd9\u6837\u70b9\u4e86\u3002<\/p>\n<p>\u8c03\u6599\u91cc\u8fd9\u4e2a\u5c0f\u9c7c\u5e72\u918b\u597d\u53ef\u7231\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20197.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u55ef\u4e0a\u6765\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20198.jpeg\" alt=\"\"  \/>\n\n\n\u62cc\u4e00\u4e0b\u540e\u4f1a\u53d8\u6210\u8fd9\u6837\uff0c\u6bd4\u60f3\u8c61\u7684\u6d53\u539a\u597d\u591a\uff0c\u5403\u4e86\u51e0\u53e3\u4e4b\u540e\u89c9\u5f97\uff0c\u8fd8\u662f\u5e94\u8be5\u4e0d\u8981\u8f9b\u53e3\u7684\uff0c\u5176\u5b9e\u8fd8\u662f\u633a\u6709\u70b9\u8fa3\u7684\u3002\n\u6211\u8fd9\u6b21\u5728\u4e5d\u5dde\u771f\u7684\u5b8c\u5168\u8bef\u5224\u81ea\u5df1\u7684\u5403\u8fa3\u6c34\u5e73\u3002\u3002\u3002\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20199.jpeg\" alt=\"\"  \/>\n\n\n\u5f53\u7136\u8fd8\u662f\u5403\u5b8c\u4e86\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20200.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u30c1\u30e5\u30ed\u30b9\">\u30c1\u30e5\u30ed\u30b9<\/h3>\n<p>\u5403\u5f97\u592a\u6d53\u539a\u7684\u9762\u4e86\u4e4b\u540e\u53c8\u60f3\u627e\u70b9\u751c\u54c1\u4e86\u3002\n\u5728\u517c\u864e\u9644\u8fd1\u8f6c\u60a0\u7684\u65f6\u5019\u770b\u5230\u8fd9\u4e2a\u30c1\u30e5\u30ed\u30b9\u5e97\u53ef\u4ee5\u53ea\u8981\u4e00\u4e2amini size\u7684\uff0c\u5c31\u4e70\u4e86\u4e00\u4e2amini\u7684\u62b9\u8336\u5473\u3002\u5355\u7eaf\u662f\u4e00\u76f4\u5f88\u597d\u5947\u30c1\u30e5\u30ed\u30b9\u5230\u5e95\u662f\u4e2a\u4ec0\u4e48\u4e1c\u897f\u3002\n\u4e4b\u524d\u597d\u50cf\u67d0\u4f50\u8bf4\u8fc7\u559c\u6b22\u5403\uff0c\u4e00\u4f4d\u540c\u62c5\u592a\u592a\u4e5f\u8bf4\u8fc7\u53bb\u90a3\u8fb9\u73a9\u7684\u65f6\u5019\u89c9\u5f97\u7279\u522b\u597d\u5403\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20203.jpeg\" alt=\"\"  \/>\n\n\n\u4e70\u5b8c\u8fd8\u53d1\u73b0\u65c1\u8fb9\u8fd8\u8d34\u7740\u6709\u65e5\u5411\u5742\u7684\u7b7e\u540d\uff0c\u5177\u4f53\u4e3a\u5565\u4e0d\u592a\u6e05\u695a\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u5929\u795e\u5730\u4e0b\u8857\u95f2\u901b\">\u5929\u795e\u5730\u4e0b\u8857\u95f2\u901b<\/h3>\n<p>\u603b\u4e4b\u7ee7\u7eed\u95f2\u901b\u3002<\/p>\n<p>\u5148\u662f\u770b\u5230\u8fd9\u5bb6\u9c7c\u5409\u5e97\u611f\u89c9\u597d\u5212\u7b97\uff0c\u660e\u592a\u5b50\u653e\u9898\u8036\uff01\u6211\u597d\u60f3\u723d\u5403\u660e\u592a\u5b50\u554a\uff01\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u53c8\u8fdb\u4e86\u4e00\u5bb6\u770b\u8d77\u6765\u304a\u3057\u3083\u308c\u7684\u9762\u5305\u5e97\uff0c\u4f46\u662f\u4e70\u7684\u662f\u9178\u5976hhhhh \u6bd5\u7adf\u5b83\u9a97\u6211\u662f\u963f\u82cf\u9ad8\u539f\u4ea7hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20206.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5929\u795e\u5730\u4e0b\u8857\u7684\u67d0\u4e2a\u89d2\u843d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6765\u56de\u901b\u4e86\u4e0b\u53d1\u73b0\uff0c\u5927\u90e8\u5206\u5e97\u9762\u90fd\u5173\u95e8\u6216\u8005\u6b63\u5728\u5173\u95e8\u4e86\uff0c\u5b9e\u5728\u65e0\u804a\u4e86\uff0c\u53ea\u597d\u5f80\u56de\u8d70\u4e86\u3002<\/p>\n<h3 id=\"\u5929\u795e\u4e2d\u592e\u516c\u56ed\">\u5929\u795e\u4e2d\u592e\u516c\u56ed<\/h3>\n<p>\u4e8e\u662f\u7b2c\u4e09\u6b21\u7ecf\u8fc7\u5929\u795e\u4e2d\u592e\u516c\u56ed\ud83d\ude02 \u8fd9\u8fb9\u7684\u96c6\u4f1a\u770b\u8d77\u6765\u662f\u6bcf\u5929\u90fd\u4f1a\u5f00\u50ac\u4e86\uff0c\u597dchill\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20208.jpeg\" alt=\"\"  \/>\n\n\n\u5728\u8fd9\u8fb9\u6905\u5b50\u4e0a\u4f11\u606f\u4e86\u597d\u4e45\uff0c\u53cd\u6b63\u56de\u9152\u5e97\u4e5f\u662f\u5750\u7740\u73a9\u624b\u673a\uff0c\u4e0d\u5982\u5728\u8fd9\u4e2a\u73af\u5883\u91cc\u73a9www\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20209.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u8d70\u4e86\u53e6\u4e00\u8fb9\u7684\u6865\u56de\u53bb<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20210.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20212.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20216.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"1116--\u56de\u9999\u6e2f\">11.16 \u2708\ufe0f \u56de\u9999\u6e2f<\/h2>\n<p>\u4e0a\u5348\u6ca1\u65f6\u95f4\u5e72\u4ec0\u4e48\u522b\u7684\u4e8b\u4e86\uff0c\u5c31\u665a\u70b9\u8d77\u5e8a\u9000\u623f\uff0c\u7136\u540e\u76f4\u63a5\u53bb\u673a\u573a\u4e86\u3002<\/p>\n<p>\u5230\u8fbe\u673a\u573a\u592a\u65e9\uff0c\u8fdecheckin \u65f6\u95f4\u90fd\u8fd8\u6ca1\u5f00\u59cb\uff0c\u5c31\u5148\u53bb\u770b\u770b\u7f8e\u5973\u559d\u676f\u5496\u5561\u5148\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%201.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6258\u8fd0\u5b89\u68c0\u90fd\u8fc5\u901f\u641e\u5b8c\u4e86\uff0c\u5728\u767b\u673a\u53e3\u9644\u8fd1\u5148\u5403\u4e86\u4e2d\u996d\uff0c\u56e0\u4e3a\u56de\u7a0b\u662f\u9999\u6e2f\u5feb\u8fd0\uff0c\u4e0d\u7ed9\u94b1\u5c31\u4e0d\u4f1a\u7ed9\u4efb\u4f55\u5403\u7684\uff0c\u672c\u6765\u4e5f\u4e0d\u597d\u5403\uff0c\u5c31\u4e0d\u60f3\u6d88\u8d39\u5462\u3002<\/p>\n<p>\u5403\u4e86\u7897\u5496\u55b1\uff0c\u5176\u5b9e\u5b89\u68c0\u5b8c\u4e4b\u540e\uff0c\u798f\u5188\u673a\u573a\u5c31\u771f\u6ca1\u5565\u597d\u901b\u7684\u4e86\uff0c\u8fd8\u60f3\u4e70\u4e1c\u897f\u7684\u8bdd\u8fd8\u662f\u5728\u8fdb\u5b89\u68c0\u524d\u66f4\u597d\u3002\u4ee5\u53ca\u56fd\u9645terminal \u672c\u6765\u5c31\u504f\u5c11\uff0c\u66f4\u591a\u662f\u5728\u56fd\u5185terminal \u90a3\u8fb9\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%204.jpeg\" alt=\"\"  \/>\n\n\n\u53c8\u53bb\u559d\u4e86\u676f\u62b9\u8336\u62ff\u94c1\uff0c\u56e0\u4e3a\u770b\u4eba\u63a8\u8350\u8bf4\u8fd9\u5bb6\u8fd8\u633a\u597d\u559d\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8bdd\u8bf4\u770b\u5230\u8fd9\u4e48\u4e00\u4e2atoy \u76f8\u673a\u597d\u53ef\u7231\uff0c\u4f46\u597d\u8d35\uff0c\u4e5f\u4e0d\u77e5\u9053\u5230\u5e95\u6548\u679c\u5982\u4f55\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%208.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u98de\u673a\u8fd9\u6b21\u4e5f\u5f88\u51c6\u65f6\uff0c3\u4e2a\u5c0f\u65f6\u5c31\u56de\u5230\u9999\u6e2f\u4e86\u3002<\/p>\n<p>\u987a\u8def\u5728\u9999\u6e2f\u673a\u573a\u62cd\u4e86\u4e0b\u8fd9\u4e2a\u4e5d\u9f99\u57ce\u5be8\u7684\u573a\u666f\uff0c\u505a\u5f97\u5f88\u597d\uff0c\u8fd9\u5f88\u9999\u6e2fwwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%2013.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h2 id=\"\u94b1\u82b1\u54ea\u513f\u4e86\u603b\u7ed3\">\u94b1\u82b1\u54ea\u513f\u4e86\u603b\u7ed3<\/h2>\n<p>\u56de\u5230\u9999\u6e2f\u7684\u670b\u53cb\u5bb6\u4e4b\u540e\u62cd\u4e86\u4e0b\u624b\u4fe1\uff0c\u4e0d\u597d\u5403\uff0c\u522b\u4e70\ud83d\ude21\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1116-backHK%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e4b\u524d\u4e70\u5b8c\u5c31\u628a\u5427\u5527\u90fd\u88c5\u4e0a\u4e86\uff0c\u611f\u89c9\u81ea\u5df1\u840c\u840c\u54d2\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%20221.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u63a7\u5468\u8fb9\u524d\u9762\u53d1\u8fc7\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2055.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u4ed6\u7684\u5c0f\u73a9\u610f\u513f\u56de\u5bb6\u4e4b\u540e\u624d\u6446\u62cd\u4e86\u4e00\u4e0b\uff0c\u5176\u5b9e\u4e5f\u6ca1\u6709\u5f88\u591a\uff0c\u5b8c\u5168\u662f\u56e0\u4e3a\u7bb1\u5b50\u91cc\u88c5\u592a\u591a\u53bb\u672d\u5e4c\u7a7f\u7684\u51ac\u5929\u7684\u8863\u670d\uff0c\u6ca1\u6709\u592a\u591a\u7a7a\u95f4\u7559\u7ed9\u8d2d\u7269\ud83e\udd72\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/shopping.jpeg\" alt=\"\"  \/>\n\n<\/p>\n]]>"},{"title":"\u65f6\u96945\u5e74\u7684\u9713\u8679\u65c5\u884c\uff08\u56db\uff09\u522b\u5e9c","link":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-2\/","pubDate":"Sat, 23 Nov 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-11-23-travel-kyushu-2\/","description":"<h2 id=\"1114-\u963f\u82cf\u7537\u5b69\u522b\u5e9c\">11.14 \u963f\u82cf\u7537\u5b69+\u522b\u5e9c<\/h2>\n<p>\u4e5f\u662f\u5f88\u65e9\u5c31\u8d77\u5e8a\u4e86\uff0c\u800c\u4e14\u5e26\u4e0a\u4e86\u4e00\u4e2a\u665a\u4e0a\u7684\u884c\u674e\uff0c\u8fd9\u5929\u4f1a\u53bb\u522b\u5e9c\u4f4f\u4e00\u665a\uff0c\u798f\u5188\u7684\u5e8a\u4f4d\u6700\u521d\u662f\u76f4\u63a5\u8ba2\u4e864\u4e2a\u665a\u4e0a\u3002\n\u51fa\u53d1\u5927\u698210\u5929\u524d\u548c\u9152\u5e97\u548cBooking \u6c9f\u901a\u80fd\u5426\u53ea\u53d6\u6d88\u7b2c\u4e09\u4e2a\u665a\u4e0a\u3002\n\u5f97\u5230\u7684\u56de\u590d\u662f\u4e0d\u884c\uff0c\u8981\u4e48\u5c31\u66f4\u6539\u8ba2\u5355\u53ea\u8ba2\u524d\u4e24\u4e2a\u665a\u4e0a\uff0c\u518d\u53e6\u5916\u8ba2\u6700\u540e\u4e00\u4e2a\u665a\u4e0a\uff0c\u4f46\u56e0\u4e3a\u770b\u8d77\u6765\u798f\u5188\u7684\u4f4f\u5bbf\u5f88\u7d27\u5f20\uff0c\u6700\u540e\u90a3\u5929\u7684\u4f4f\u5bbf\u4e5f\u5f88\u62c5\u5fc3\u8ba2\u4e0d\u8ba2\u5f97\u5230\uff0c\n\u6700\u7ec8\u5c31\u6ca1\u6709\u6539\u8fd9\u4e2a\u8ba2\u5355\uff0c\u4e5f\u56e0\u4e3a\u6c9f\u901a\u7684\u65f6\u5019\u88ab\u544a\u77e5\u867d\u7136\u662f\u8fde\u7eed\u8ba2\u4e864\u4e2a\u665a\u4e0a\uff0c\u4f46\u5176\u5b9e\u6bcf\u4e2a\u665a\u4e0a\u7684\u4ef7\u94b1\u4e0d\u4e00\u6837\uff0c\u8fd9\u5929\u7684\u4ef7\u94b1\u5927\u6982\u662f300\u591armb\uff0c\u6700\u8d35\u7684\u662f\u6700\u540e\u4e00\u4e2a\u665a\u4e0a\u3002\n\u60f3\u4e86\u60f3\uff0c300\u591a\u5757\u5c31\u5f53\u662f\u7ed9\u81ea\u5df1\u4e70\u4e2a\u65b9\u4fbf\u5427\uff0c\u884c\u674e\u7bb1\u81f3\u5c11\u53ef\u4ee5\u653e\u5728\u8fd9\u91cc\u4e86\uff0c\u6211\u53bb\u522b\u5e9c\u73a9\u53ef\u4ee5\u5f88\u8f7b\u677e\u3002<\/p>","content":"<![CDATA[<h2 id=\"1114-\u963f\u82cf\u7537\u5b69\u522b\u5e9c\">11.14 \u963f\u82cf\u7537\u5b69+\u522b\u5e9c<\/h2>\n<p>\u4e5f\u662f\u5f88\u65e9\u5c31\u8d77\u5e8a\u4e86\uff0c\u800c\u4e14\u5e26\u4e0a\u4e86\u4e00\u4e2a\u665a\u4e0a\u7684\u884c\u674e\uff0c\u8fd9\u5929\u4f1a\u53bb\u522b\u5e9c\u4f4f\u4e00\u665a\uff0c\u798f\u5188\u7684\u5e8a\u4f4d\u6700\u521d\u662f\u76f4\u63a5\u8ba2\u4e864\u4e2a\u665a\u4e0a\u3002\n\u51fa\u53d1\u5927\u698210\u5929\u524d\u548c\u9152\u5e97\u548cBooking \u6c9f\u901a\u80fd\u5426\u53ea\u53d6\u6d88\u7b2c\u4e09\u4e2a\u665a\u4e0a\u3002\n\u5f97\u5230\u7684\u56de\u590d\u662f\u4e0d\u884c\uff0c\u8981\u4e48\u5c31\u66f4\u6539\u8ba2\u5355\u53ea\u8ba2\u524d\u4e24\u4e2a\u665a\u4e0a\uff0c\u518d\u53e6\u5916\u8ba2\u6700\u540e\u4e00\u4e2a\u665a\u4e0a\uff0c\u4f46\u56e0\u4e3a\u770b\u8d77\u6765\u798f\u5188\u7684\u4f4f\u5bbf\u5f88\u7d27\u5f20\uff0c\u6700\u540e\u90a3\u5929\u7684\u4f4f\u5bbf\u4e5f\u5f88\u62c5\u5fc3\u8ba2\u4e0d\u8ba2\u5f97\u5230\uff0c\n\u6700\u7ec8\u5c31\u6ca1\u6709\u6539\u8fd9\u4e2a\u8ba2\u5355\uff0c\u4e5f\u56e0\u4e3a\u6c9f\u901a\u7684\u65f6\u5019\u88ab\u544a\u77e5\u867d\u7136\u662f\u8fde\u7eed\u8ba2\u4e864\u4e2a\u665a\u4e0a\uff0c\u4f46\u5176\u5b9e\u6bcf\u4e2a\u665a\u4e0a\u7684\u4ef7\u94b1\u4e0d\u4e00\u6837\uff0c\u8fd9\u5929\u7684\u4ef7\u94b1\u5927\u6982\u662f300\u591armb\uff0c\u6700\u8d35\u7684\u662f\u6700\u540e\u4e00\u4e2a\u665a\u4e0a\u3002\n\u60f3\u4e86\u60f3\uff0c300\u591a\u5757\u5c31\u5f53\u662f\u7ed9\u81ea\u5df1\u4e70\u4e2a\u65b9\u4fbf\u5427\uff0c\u884c\u674e\u7bb1\u81f3\u5c11\u53ef\u4ee5\u653e\u5728\u8fd9\u91cc\u4e86\uff0c\u6211\u53bb\u522b\u5e9c\u73a9\u53ef\u4ee5\u5f88\u8f7b\u677e\u3002<\/p>\n<h3 id=\"\u963f\u82cf\u7537\u5b69\">\u963f\u82cf\u7537\u5b69<\/h3>\n<blockquote>\n<p><a href=\"https:\/\/www.jrkyushu.co.jp\/cn\/train\/asoboy.html\">https:\/\/www.jrkyushu.co.jp\/cn\/train\/asoboy.html<\/a><\/p>\n<\/blockquote>\n<p>7\u70b9\u591a\u5c31\u51fa\u95e8\u53bb\u4e86\u535a\u591a\u7ad9\uff0c\u7136\u540e\u4e70\u4e86\u4e2a\u6709\u660e\u592a\u5b50\u7684\u4fbf\u5f53\uff0c\u7136\u540e\u5750\u65b0\u5e72\u7ebf\u5148\u5230\u8fbe\u4e86\u718a\u672c\u3002\n\u56e0\u4e3a\u8fd9\u5929\u4e00\u5f00\u59cb\u7684\u91cd\u70b9\u662f\u60f3\u5750\u4e5d\u5dde\u7279\u8272\u5217\u8f66\uff0c\u963f\u82cf\u7537\u5b69\uff0c\u5b83\u662f\u6bcf\u5929\u53ea\u6709\u4e00\u73ed\u8f66\u5f80\u8fd4\u4e00\u6b21\u3002\n\u4e0d\u8fc7\u4e00\u4e2a\u597d\u5904\u662f\u6700\u8fd1\u5468\u4e2d\u5de5\u4f5c\u65e5\u7684\u8f66\u662f\u5168\u8f66\u81ea\u7531\u5e2d\uff0c\u4e0d\u9700\u8981\u52a0\u94b1\u63d0\u524d\u9884\u7ea6\uff0c\u4f46\u662f\u8f66\u4e0a\u4e0d\u63d0\u4f9b\u5468\u8fb9\u552e\u5356\u96f6\u98df\u552e\u5356\u7684\u670d\u52a1\u4e86\u3002<\/p>\n<p>\u4ece\u718a\u672c\u662f\u65e9\u4e0a 9:11 \u5f00\u51fa\uff0c\u6240\u4ee5\u8981\u8fd9\u4e2a\u4e4b\u524d\u5230\u8fbe\u718a\u672c\u7ad9\u5148\u3002<\/p>\n<p>\u5728\u597d\u591a\u8f66\u7ad9\u90fd\u6709\u770b\u5230\u7684\u8fd9\u5bb6\u8fde\u9501\u5496\u5561\u5385\u7ec8\u4e8e\u8bd5\u4e86\u4e0b\uff0c\u4e5f\u8fd8\u633aok\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>9\u70b9\u5de6\u53f3\u5c31\u80fd\u770b\u5230\u3042\u305d\u307c\u30fc\u3044\u7684\u8f66\u5f00\u5165\u7ad9\u53f0\u4e86\u3002\u987a\u4fbf\u6211\u89c9\u5f97\u8fd9\u5217\u8f66\u7684\u540d\u5b57\u8d77\u5f97\u633a\u597d\u7684\u3002\u4e2d\u6587\u963f\u82cf\u7537\u5b69\u3001\u82f1\u6587 aso boy\uff0c\u4f1a\u8ba9\u6e38\u5ba2\u60f3\u5230\u963f\u82cf\u706b\u5c71\u3002\n\u65e5\u6587\u7684\u3042\u305d\u307c\u30fc\u3044\u8c10\u97f3\u3042\u305d\u307c\uff0c\u73a9\u800d\u7684\u610f\u601d\uff0c\u4e5f\u7b97\u73a9\u5fc3\u6ee1\u6ee1\uff0c\u548c\u5c0f\u5b69\u7684\u610f\u5411\u633a\u5408\u7684\u3002\n\u5176\u5b9e\u5217\u8f66\u662f\u4ee5\u4e00\u53ea\u72d7\u72d7 kuro \u9171\u4e3a\u4e3b\u9898\u88c5\u9970\u7684wwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%203.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%205.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%206.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u662f\u81ea\u7531\u5e2d\uff0c\u4e0a\u8f66\u4e4b\u540e\u5750\u5230\u4e86\u6709\u5496\u5561\u5427\u76843\u53f7\u8f66\u53a2\uff0c\u5185\u90e8\u5f88\u6709\u7279\u8272\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%208.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%209.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2010.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2013.jpeg\" alt=\"\"  \/>\n\n\n3\u53f7\u8f66\u53a2\u6709\u4e24\u5904\u8ff7\u4f60\u666f\u89c2\uff0c\u4e00\u4e2a\u662f\u505a\u6210\u60f3\u6fa1\u5802\u90a3\u79cd\u7684\u6728\u7403\u6e38\u4e50\u6c60\uff0c\u53e6\u4e00\u8fb9\u662f\u56fe\u4e66\u5ba4\u3002\u90fd\u662f\u9002\u5408\u5c0f\u5b69\u5b50\u8fdb\u53bb\u73a9\u800d\u7684\u5730\u65b9\u3002\n\u8fd9\u5929\u56e0\u4e3a\u6ca1\u6709\u8f66\u5185\u670d\u52a1\uff0c\u6240\u4ee5\u4e0d\u5f00\u653e\u7ed9\u4eba\u8fdb\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2014.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2044.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u867d\u7136\u624d\u65e9\u4e0a9\u70b9\u534a\uff0c\u4f46\u6211\u5f00\u59cb\u5403\u4fbf\u5f53\ud83c\udf71\u4e86\uff0c\u56e0\u4e3a\u60f3\u5b8c\u6210\u5728\u5217\u8f66\u4e0a\u5403\u99c5\u5f01\u7684\u8bbe\u5b9a\uff08\uff1f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2011.jpeg\" alt=\"\"  \/>\n\n\n\u4fbf\u5f53\u8fd8\u633a\u597d\u5403\u7684\uff0c\u624d900yen \u7684\u6837\u5b50\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2012.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5403\u5b8c\u4e86\u4fbf\u5f53\u6211\u5f00\u59cb\u5728\u5217\u8f66\u524d\u540e\u8d70\u52a8\u53c2\u89c2\u4e71\u62cd\u7167\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2017.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2018.jpeg\" alt=\"\"  \/>\n\n\n\u5fd8\u8bb0\u4e86\u662f\u5217\u8f66\u5934\u8fd8\u662f\u5217\u8f66\u5c3e\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2019.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2020.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2023.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2039.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2045.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2046.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5230\u4e86\u963f\u82cf\u7ad9\uff0c\u5f88\u591a\u4eba\u4f1a\u4e0b\u8f66\uff0c\u6709\u5f88\u5927\u4e00\u90e8\u5206\u4eba\u5750\u8fd9\u4e2a\u8f66\u662f\u4e3a\u4e86\u53bb\u963f\u82cf\u706b\u8f66\u3002\u4f3c\u4e4e\u6ca1\u6709\u4eba\u662f\u6211\u8fd9\u79cd\u5355\u7eaf\u4ece\u5934\u5750\u5230\u5c3e\uff0c\u718a\u672c\u57503\u4e2a\u5c0f\u65f6\u6162\u8f66\u53bb\u7ec8\u70b9\u7ad9\u522b\u5e9c\u4e0b\u8f66\ud83d\ude02\ud83d\ude02\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2035.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5fd8\u8bb0\u662f\u54ea\u4e2a\u7ad9\uff0c\u4f46\u662f\u67d0\u4e9b\u7ad9\u7684\u505c\u7559\u65f6\u95f4\u5176\u5b9e\u4e0d\u77ed\uff0c3-6\u5206\u949f\u90fd\u6709\uff0c\u6240\u4ee5\u53ef\u4ee5\u7a0d\u5fae\u4e0b\u8f66\u770b\u770b\u98ce\u666fwwwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2036.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u535a\u591a\u7ad9\u968f\u4fbf\u4e70\u7684\u4e00\u4e2a\u96f6\u98df\uff0c\u8fd8\u633a\u597d\u5403\u7684\uff0c\u6ca1\u6709\u5e26\u56de\u6765\uff0c\u5168\u90e8\u81ea\u5df1\u8def\u4e0a\u5403\u6389\u4e86hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2047.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5403\u8fc7\u4fbf\u5f53\u4e86\uff0c\u524d\u540e\u8f66\u53a2\u62cd\u8fc7\u7167\u4e86\uff0c\u7a97\u6237\u5916\u98ce\u666f\u4e5f\u770b\u8fc7\u4e86\uff0c\u53c8\u7f8e\u6ecb\u6ecb\u7761\u4e86\u4e00\u89c9\uff0c12\u70b9\u534a\u5230\u8fbe\u522b\u5e9c\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2048.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u522b\u5e9c\u6e38\u5ba2\u4e2d\u5fc3\">\u522b\u5e9c\u6e38\u5ba2\u4e2d\u5fc3<\/h3>\n<p>\u522b\u5e9c\u5546\u4e1a\u5316\u6c14\u606f\u662f\u5f88\u6d53\uff0c\u5237\u5c0f\u7ea2\u4e66\u7684\u65f6\u5019\u603b\u6709\u4eba\u8bf4\u201c\u907f\u96f7\u201d\u4e0d\u597d\u73a9\u3002\n\u4f46\u8fd9\u8fb9\u7684\u7237\u5976\u4e5f\u5f88\u591a\u90fd\u80fd\u82f1\u8bed\u8ddf\u4f60\u6d41\u5229\u6c9f\u901a\u7684\uff0c\u6211\u89c9\u5f97\u5f88\u5389\u5bb3\u3002<\/p>\n<p>\u522b\u5e9c\u7ad9\u65c1\u8fb9\u7684\u6e38\u5ba2\u4e2d\u5fc3\u5f88\u65b9\u4fbf\uff0c\u5e94\u5bf9\u8d85\u7ea7\u719f\u7ec3\uff0c\u53ef\u4ee5\u627e\u4ed6\u4eec\u4e70\u4e00\u4e0b7\u4e2a\u5730\u72f1\u7684\u5171\u901a\u5238\uff0c\u6216\u8005\u5df4\u58eb\u4e00\u65e5\u5238\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2049.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<blockquote>\n<p><a href=\"https:\/\/www.beppu-jigoku.com\/fee\/index.html#001\">https:\/\/www.beppu-jigoku.com\/fee\/index.html#001<\/a><\/p>\n<\/blockquote>\n<p>\u4e0a\u9762\u8fd9\u4e2a\u662f\u6211\u641c\u5230\u7684\u4ed6\u4eec\u7684\u7f51\u7ad9\u30027\u4e2a\u5730\u72f1\u7684\u5171\u901a\u5238\u662f2200yen\uff0c\u7136\u540e\u7f51\u7ad9\u4e0a\u6709\u4e00\u4e2a<a href=\"https:\/\/www.beppu-jigoku.com\/discount\/index.html\">\u7279\u5225\u5272\u5f15<\/a>\u9875\u9762\uff0c\u5c31\u662f\u53ea\u8981\u7ed9staff \u5c55\u793a\u4e00\u4e0b\u8fd9\u4e2a\u9875\u9762\uff0c\u95e8\u7968\u5c31\u51cf200 \u53d8\u62102000yen\u3002<\/p>\n<p>\u6211\u53bb\u95ee\u4e86\u6e38\u5ba2\u4e2d\u5fc3\u7684\u4eba\uff0c\u5979\u8bf4\u5979\u8fd9\u8fb9\u53ef\u4ee5\u5356\u7ed9\u6211\u8fd9\u4e2a2000yen \u7684\u7968\uff0c\u4f46\u8fd9\u4e2a\u5b9e\u9645\u4e0a\u662f\u5151\u6362\u5238\uff0c\u9700\u8981\u5230\u6211\u53bb\u7684\u4efb\u4f55\u4e00\u4e2a\u5730\u72f1\u95e8\u53e3\u53bb\u5151\u6362\u624d\u80fd\u5f00\u59cb\u7528\uff0c\u6709\u53ef\u80fd\u9700\u8981\u82b1\u65f6\u95f4\u6392\u961f\u3002\n\u5982\u679c\u82b12200yen\u8d2d\u5165\u7684\u5c31\u662f\u771f\u6b63\u7684\u95e8\u7968\uff0c\u53ef\u4ee5\u76f4\u63a5\u5f00\u59cb\u7528\u3002\n\u6211\u8003\u8651\u4e0d\u662f\u6bcf\u4e2a\u5730\u72f1\u90fd\u9700\u8981\u6392\u961f\uff0c\u6211\u5148\u53bb\u6ca1\u592a\u591a\u4eba\u7684\u5730\u72f1\u5f00\u59cb\u7528\u4e0d\u5c31\u53ef\u4ee5\u4e86\uff0c\u8fd9\u5f88\u7b80\u5355\uff0c200yen\u6211\u8981\u7701\ud83d\ude0f<\/p>\n<p>\u7136\u540e\u6211\u6ca1\u6709\u8d2d\u4e70\u5df4\u58eb\u4e00\u65e5\u5238\uff0c\u4f46\u662f\u95ee\u4e86\u5927\u81f4\u6bcf\u4e00\u7a0b\u5df4\u58eb\u8981\u591a\u5c11\u94b1\uff0c\u4f30\u7b97\u4e86\u4e00\u4e0b\u4e70\u4e0d\u4e70\u8fd9\u4e2a\u4e00\u65e5\u5238\u597d\u50cf\u6ca1\u5dee\u3002\n\u5546\u4e1a\u5316\u9ad8\u6240\u4ee5\u670d\u52a1\u4e5f\u597d\uff0c\u6e38\u5ba2\u4e2d\u5fc3\u4f1a\u76f4\u63a5\u7ed9\u4f60\u4e00\u5f20\u4fe1\u606f\u5355\u5b50\uff0c\u6709\u5927\u81f4\u6240\u6709\u4f60\u53ef\u4ee5\u5750\u7684\u5df4\u58eb\u548c\u65f6\u95f4\u8868\uff0c\u5355\u7a0b\u591a\u5c11\u94b1\u591a\u5c11\u65f6\u95f4\u90fd\u6807\u6ce8\u4e86\uff0c\u8fd9\u6bd4\u6211\u81ea\u5df1\u67e5\u7684\u4fe1\u606f\u51c6\u786e\u591a\u4e86\u3002<\/p>\n<p>\u518d\u8bf4\u4e00\u4e0b\u6211\u7684\u8def\u7ebf\u5b89\u6392\u3002\u9996\u5148\u8bf4\u4e00\u4e0b\u8fd9\u4e2a\u4e03\u5927\u5730\u72f1\u5de1\u793c\uff0c\u4e3b\u8981\u662f\u5206\u5e03\u5728\u4e24\u4e2a\u5730\u65b9\u3002\u4e00\u4e2a\u5730\u65b9\u662f\u6d77\u5730\u72f1\u3001\u9b3c\u77f3\u574a\u4e3b\u5730\u72f1\u3001\u304b\u307e\u3069\u5730\u72f1\u3001\u9b3c\u5c71\u5730\u72f1\u3001\u767d\u6c60\u5730\u72f1\uff0c\u8fd9\u4e94\u4e2a\u5728\u4e00\u8d77\uff0c\u5168\u90e8\u90fd\u662f\u6b65\u884c\u8ddd\u79bb\u3002\u53e6\u5916\u4e00\u5757\u662f\u6700\u540e\u4e24\u4e2a\u9f99\u5377\u5730\u72f1\u548c\u8840\u6c60\u5730\u72f1\uff0c\u8fd9\u4e24\u4e2a\u4e5f\u662f\u6328\u7740\u7684\u3002\u4f46\u662f\u4e24\u5757\u533a\u57df\u4e4b\u524d\u662f\uff0c\u5f00\u8f665-10\u5206\u949f\uff0c\u8d70\u8def\u5927\u6982\u898130\u5206\u949f\u7684\u8ddd\u79bb\u3002<\/p>\n<p>\u7edd\u5927\u591a\u6570\u63a8\u8350\u7684\u8def\u7ebf\u987a\u5e8f\u662f\u4ece\u6700\u51fa\u540d\u7684\u6d77\u5730\u72f1\u5f00\u59cb\uff0c\u9f99\u5377\u5730\u72f1\u7ed3\u675f\u3002\u4e70\u4e86\u7968\u4e4b\u540e\u6e38\u5ba2\u4e2d\u5fc3\u7ed9\u7684\u96c6\u7ae0\u7684\u518c\u5b50\u4e0a\u4e5f\u662f\u8fd9\u4e48\u753b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20182.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u800c\u6211\u5f88\u5de7\u7684\u5728\u51fa\u53d1\u4e4b\u524d\u641c\u5230\u8fc7\u4e00\u7bc7\u9999\u6e2f\u4eba\u5199\u7684\u6e38\u8bb0\uff0c\u4ed6\u662f\u548c\u63a8\u8350\u987a\u5e8f\u8d70\u7684\u76f8\u53cd\u7684\u8def\uff0c\u4ed6\u6ca1\u6709\u5148\u53bb\u6d77\u5730\u72f1\uff0c\u5148\u53bb\u7684\u8840\u6c60\u548c\u9f99\u5377\u5730\u72f1\uff0c\u6700\u540e\u624d\u53bb\u7684\u6d77\u5730\u72f1\u3002\n\u4e0d\u8fc7\u4ed6\u7684\u90a3\u7bc7\u6e38\u8bb0\u7ed9\u6211\u6700\u5927\u7684\u4fe1\u606f\u662f\u4e00\u4e2a\u4e0b\u5348\u53ef\u4ee5\u8d70\u5b8c\u6240\u6709\u4e03\u4e2a\u5730\u72f1\u7684\u3002\n\u56e0\u4e3a\u4ed6\u5c31\u662f12\u70b9\u5de6\u53f3\u5230\u8fbe\u522b\u5e9c\uff0c5\u70b9\u6240\u6709\u5730\u72f1\u4e4b\u524d\u5c31\u628a\u4e03\u4e2a\u5168\u90e8\u8d70\u5b8c\u4e86\u4e86\uff0c\u8fd8\u4e00\u70b9\u4e5f\u4e0d\u7d2f\u3002\n\u505a\u8ba1\u5212\u7684\u65f6\u5019\u6000\u7591\u6211\u4e00\u4e2a\u4e0b\u5348\u8d70\u4e0d\u5b8c\u662f\u4ee5\u4e3a\u6bcf\u4e00\u4e2a\u5730\u72f1\u90fd\u8981\u82b1\u4e0d\u5c11\u65f6\u95f4\uff0c\u4ee5\u53ca\u5b98\u7f51\u4e0a\u9762\u8bf4\u5171\u901a\u5238\u5176\u5b9e\u662f\u53ef\u4ee5\u8fde\u7eed\u7528\u4e24\u5929\u7684\uff0c\u6211\u771f\u7684\u4ee5\u4e3a\u6709\u90a3\u4e48\u591a\u5185\u5bb9\u9700\u8981\u7528\u4e24\u5929\ud83d\ude02\uff08\u5176\u5b9e\u6ca1\u6709\uff09<\/p>\n<p>\u4e8e\u662f\uff0c\u6211\u4e5f\u51b3\u5b9a\u6309\u7167\u8fd9\u4f4d\u9999\u6e2f\u5c0f\u54e5\u7684\u987a\u5e8f\u8d70\u548c\u591a\u6570\u4eba\u53cd\u65b9\u5411\u7684\u8def\u7ebf\u3002<\/p>\n<h3 id=\"\u522b\u5e9c\u5730\u72f1\u5de1\u793c\">\u522b\u5e9c\u5730\u72f1\u5de1\u793c<\/h3>\n<h4 id=\"\u9f99\u5377\u5730\u72f1\">\u9f99\u5377\u5730\u72f1<\/h4>\n<p>\u6240\u4ee5\u6700\u5148\u662f\u53bb\u9f99\u5377\u5730\u72f1\u3002\u8fd9\u91cc\u660e\u663e\u5c31\u633a\u5c11\u4eba\u7684\uff0c\u5151\u6362\u5238\u5151\u6362\u95e8\u7968\u6839\u672c\u4e0d\u7528\u6392\u961f\uff0c\u7701200yen\u8f7b\u677e\ud83d\ude17<\/p>\n<p>\u8fdb\u53bb\u5c31\u8fd9\u4e48\u4e00\u4e2a\u4e1c\u897f\uff0c\u9f99\u5377\u5730\u72f1\u662f\u4e00\u4e2a\u95f4\u6b47\u6027\u55b7\u6cc9\uff0c\u5b83\u5199\u4e86\u95f4\u6b47\u53ef\u80fd30-40\u5206\u949f\uff0c\u8fd0\u6c14\u597d\u7684\u8bdd\u6765\u4e86\u5c31\u80fd\u770b\u5230\uff0c\u90a35\u5206\u949f\u5c31\u80fd\u7ed3\u675f\u8fd9\u4e2a\u3002\n\u8fd0\u6c14\u4e0d\u597d\u5c31\u5750\u65c1\u8fb9\u4f11\u606f\u7b49\u5f8530\u5206\u949f\u5c31\u884c\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2050.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u672c\u6765\u5176\u5b9e\u4e5f\u6ca1\u6709\u5f88\u60f3\u7b49\u5f85\u90a3\u4e48\u4e45\uff0c\u5728\u58f3\u5e97\u4e70\u4e86\u74f6\u8336\u2b07\ufe0f\uff08\u8fd9\u74f6\u771f\u7684\u975e\u5e38\u62b9\u8336\uff0c\u6709\u70b9\u6da9\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd8\u4e70\u4e86\u5728\u522b\u7684\u5730\u65b9\u6ca1\u770b\u5230\u8fc7\u7684ckw\u5427\u5527\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2053.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u76f8\u5f53\u4e8e\u4e5f\u5c31\u8fc7\u4e8610\u5206\u949f\uff0c\u9f99\u5377\u5377\u8d77\u6765\u4e86\ud83c\udf2a\ufe0f \u55b7\u8d77\u6765\u7684\u65f6\u5019\u662f\u8fd9\u6837\u2b07\ufe0f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2054.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u8840\u6c60\u5730\u72f1\">\u8840\u6c60\u5730\u72f1<\/h4>\n<p>\u9f99\u5377\u5bf9\u9762\u5c31\u662f\u8840\u6c60\u5730\u72f1\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2057.jpeg\" alt=\"\"  \/>\n\n\n\u597d\u96be\u5f97\u5728\u8fd9\u91cc\u770b\u5230\u4e86\u9b3c\u706f\uff01\uff01\uff01\uff08\u80fd\u4e0d\u80fd\u5236\u4f5c\u52a8\u753b\u7b2c\u4e09\u5b63\ud83e\udd79\uff08\u4e0d\u8fc7\u8840\u6c60\u7684\u5370\u7ae0\u88ab\u76d6\u5f97\u592a\u591a\u4e86\uff0c\u611f\u89c9\u90fd\u5feb\u78e8\u5e73\u4e86\uff0c\u8be5\u6362\u65b0\u7684\u4e86\uff0c\u6211\u600e\u4e48\u76d6\u90fd\u4e0d\u6e05\u6670\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2058.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8840\u6c60\u6211\u5176\u5b9e\u89c9\u5f97\u66f4\u50cf\u6a58\u8272\uff0c\u540e\u6765\u5728\u6d77\u5730\u72f1\u4fa7\u8fb9\u7684\u4e00\u4e2a\u5c0f\u6c64\u91cc\u7684\u7ea2\u8272\u6bd4\u8fd9\u4e2a\u66f4\u50cf\u8840\ud83e\ude78\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2059.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2060.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u8fd9\u91cc\u6709\u5356\u8bf4\u662f\u80fd\u6cbb\u5f88\u591a\u76ae\u80a4\u75c5\u7684\u8f6f\u818f\uff0c\u5acc\u8d35\u6ca1\u4e70\uff0c\u6211\u4e5f\u6ca1\u5565\u7279\u522b\u8981\u6cbb\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2071.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u8fd9\u91cc\u6709\u8db3\u6c64\uff0c\u6211\u8bd5\u4e86\uff0c\u8fd8\u633a\u4e0d\u9519\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2061.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u533a\u57df\u7684\u4e24\u4e2a\u5730\u72f1\u5c31\u5b8c\u6210\u565c\u3002<\/p>\n<p>\u7b49\u5df4\u58eb\u53bb\u94c1\u8f6e\u533a\u5c31\u53ef\u4ee5\u53bb\u53e6\u59165\u4e2a\u4e86\u3002<\/p>\n<h4 id=\"\u767d\u6c60\u5730\u72f1\">\u767d\u6c60\u5730\u72f1<\/h4>\n<p>\u867d\u7136\u53eb\u767d\u6c60\uff0c\u4f46\u5176\u5b9e\u6c34\u662f\u7eff\u8272\u7684\uff0c\u8fd8\u633a\u597d\u770b\u7684\u3002\u91cc\u9762\u8fd8\u6709\u4e2a\u6ca1\u5237\u5174\u8da3\u7684\u70ed\u5e26\u9c7c\u9986\uff0c\u56e0\u4e3a\u6c34\u5f88\u70ed\uff0c\u6240\u4ee5\u53ef\u4ee5\u517b\u70ed\u5e26\u9c7c\u7684\u610f\u601d\u5427\u54c8\u54c8\u54c8\u54c8\u54c8<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2095.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8d70\u8def\u9014\u4e2d\u770b\u5230\u4e00\u4e2a\u5976\u5976\u5728\u5356\u7684\u6e29\u6cc9\u84b8\u3057\uff0c\u5c31\u60f3\u7740\u652f\u6301\u4e0b\u8def\u8fb9\u5c0f\u644a\uff0c\u6240\u4ee5\u4e70\u4e86\u4e24\u4e2a\u9e21\u86cb\u3002\u5c31\u662f\u5f88\u666e\u901a\u7684\u86cb\uff0c\u548c\u6211\u84b8\u7684\u9e21\u86cb\u6ca1\u5565\u533a\u522b\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2067.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u597d\u770b\u7684\u4e95\u76d6\u4e5f\u5fc5\u987b\u62cd\u4e00\u4e0b\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2080.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u9b3c\u5c71\u5730\u72f1\">\u9b3c\u5c71\u5730\u72f1<\/h4>\n<p>\u89c9\u5f97\u6700\u65e0\u804a\u7684\u662f\u8fd9\u4e2a\u5730\u72f1\uff0c\u56e0\u4e3a\u5b83\u7684\u5356\u70b9\u662f\u517b\u4e86\u51e0\u5341\u6761\u9cc4\u9c7c\ud83d\udc0a<\/p>\n<p>\u62cd\u7684\u7167\u7247\u90fd\u89c9\u5f97\u5e73\u5e73\u65e0\u5947\uff0c\u5dee\u70b9\u8ba4\u4e0d\u51fa\u6765\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2099.jpeg\" alt=\"\"  \/>\n\n\n\u9cc4\u9c7c\u662f\u6709\u5f88\u591a\uff0c\u4f46\u5b83\u4eec\u53c8\u4e0d\u5e72\u4ec0\u4e48\uff0c\u6211\u4e5f\u4e0d\u77e5\u9053\u6211\u6765\u770b\u9cc4\u9c7c\u770b\u4ec0\u4e48\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20105.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u304b\u307e\u3069\u5730\u72f1\">\u304b\u307e\u3069\u5730\u72f1<\/h4>\n<p>\u8fd9\u4e2a\u5730\u72f1\u5e94\u8be5\u662f\u6bd4\u8f83\u5927\u7684\u4e00\u4e2a\uff0c\u56e0\u4e3a\u5728\u8fd9\u91cc\u9047\u5230\u4e86\u5de8\u591a\u5de8\u591a\u97e9\u56fd\u4eba\u3002\n\u5728\u5176\u4ed6\u51e0\u4e2a\u5730\u72f1\u57fa\u672c\u5176\u5b9e\u4eba\u90fd\u4e0d\u7b97\u592a\u591a\uff0c\u53ef\u80fd\u53cd\u65b9\u5411\u771f\u7684\u5f88\u6709\u6548\u3002\u552f\u72ec\u8fd9\u4e2a\u5730\u65b9\u6709\u7279\u522b\u7279\u522b\u591a\u7684\u97e9\u56fd\u4eba\uff0c\u95e8\u53e3\u505c\u4e86\u597d\u51e0\u8f86\u65c5\u6e38\u5df4\u58eb\uff0c\u53ef\u80fd\u51e0\u8f86\u5df4\u58eb\u7684\u97e9\u56fd\u6e38\u5ba2\u90fd\u805a\u96c6\u5728\u4e86\u8fd9\u91cc\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2073.jpeg\" alt=\"\"  \/>\n\n\n\u8fd9\u91cc\u8bb2\u89e3\u8868\u6f14\u7684 staff \u53ef\u80fd\u90fd\u662f\u97e9\u56fd\u4eba\uff0c\u6216\u8005\u81f3\u5c11\u597d\u597d\u7ec3\u4e60\u4e86\u97e9\u8bed\u7684\u65e5\u672c\u4eba\uff0c\u56e0\u4e3a\u8fd9\u91cc\u4ed6\u76f4\u63a5\u5728\u7528\u97e9\u8bed\u7ed9\u97e9\u56fd\u6e38\u5ba2\u8868\u6f14\u8bb2\u89e3\uff0c\u540e\u9762\u53e6\u5916\u4e00\u6279\u6e38\u5ba2\u6765\u7684\u65f6\u5019\uff0c\u662f\u6709\u7528\u65e5\u8bed\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2076.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u304b\u307e\u3069\u7684\u611f\u89c9\u5c31\u662f\u5404\u79cd\u6e29\u6cc9\u90fd\u6709\u4e00\u70b9\uff0c\u6240\u4ee5\u4f1a\u4e0d\u4f1a\u56e0\u4e3a\u8fd9\u6837\u6240\u4ee5\u97e9\u56fd\u8fd9\u79cd\u56e2\u4f53\u6e38\u5ba2\u975e\u5e38\u591a\uff0c\u770b\u4e86\u8fd9\u4e00\u4e2a\u5c31\u4e0d\u7528\u53bb\u53e6\u5916\u51e0\u4e2a\u4e86\uff0c\u7701\u94b1\u4e86\u3002\u3002\u3002<\/p>\n<p>\u304b\u307e\u3069\u6709\u8db3\u6c64\u7684\uff0c\u8fd8\u6709\u5356\u9e21\u86cb\u3001\u5305\u5b50\u4e4b\u7c7b\u719f\u98df\u7684\u4f11\u606f\u533a\uff0c\u4f46\u662f\u592a\u591a\u4eba\u4e86\uff0c\u8fd9\u4e2a\u8db3\u6c64\u770b\u4e86\u4e00\u773c\u6211\u8d70\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20118.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6709\u5728\u8fd9\u91cc\u4e70\u4e86\u4e00\u4e2a\u5305\u5b50\u5145\u9965\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20120.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u53c8\u662f\u56e0\u4e3a\u8fd9\u4e2a\u540d\u5b57\uff0c\u5728\u58f3\u5e97\u53d1\u73b0\u719f\u4eba\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2077.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u9b3c\u77f3\u574a\u4e3b\u5730\u72f1\">\u9b3c\u77f3\u574a\u4e3b\u5730\u72f1<\/h4>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2084.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5b83\u957f\u8fd9\u6837\uff0c\u5f88\u6709\u7279\u8272\uff0c\u89c9\u5f97\u8fd9\u4e2a\u6bd4\u8f83\u50cf\u767d\u6c60hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2081.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u8fd9\u4e2a\u5730\u72f1\u91cc\u73af\u5883\u597d\u592a\u591a\u4e86\uff0c\u6ca1\u51e0\u4e2a\u4eba\uff0c\u78b0\u5230\u7684\u53ea\u6709\u4e00\u4e9b\u89c1\u5b66\u7684\u5c0f\u5b66\u751f<\/p>\n<p>\u8db3\u6c64\u7684\u73af\u5883\u662f\u8fd9\u6837\u7684\uff0c\u5f88\u559c\u6b22\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2088.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u8fd9\u91cc\u5750\u4e86\u6bd4\u8f83\u4e45\uff0c\u8fd9\u8fb9\u7684\u6c34\u6bd4\u8840\u6c60\u5730\u72f1\u7684\u70eb\u4e00\u4e9b\uff0c\u5f88\u8212\u670d\uff0c\u6211\u7684jio\u5728\u524d\u51e0\u5929\u6bcf\u59292+w\u6b65\u7684\u6467\u6b8b\u4e0b\uff0c\u8db3\u6c64\u771f\u7684\u592a\u8212\u670d\u4e86\u592a\u559c\u6b22\u4e86wwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%2091.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h4 id=\"\u6d77\u5730\u72f1\">\u6d77\u5730\u72f1<\/h4>\n<p>\u6700\u540e\u7ec8\u4e8e\u662f\u5230\u6700\u591a\u4eba\u6765\u7684\u6d77\u5730\u72f1\u3002\u5176\u5b9e\u8fd9\u4e2a\u65f6\u5019\u4e5f\u624d4\u70b9\uff0c\u4e8e\u662f\u6211\u51b3\u5b9a\u5728\u8fd9\u91cc\u6162\u6162\u6d88\u78e8\u65f6\u95f4\uff0c\u76f4\u52305\u70b9\u5173\u95e8\ud83d\ude01<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20100.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20107.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20109.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20110.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4f9d\u65e7\u6253\u4e86\u5361\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20111.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6d77\u5730\u72f1\u7684\u8db3\u6c64\u6700\u540e\u6bd4\u8f83\u665a\u624d\u53bb\uff0c\u57fa\u672c\u90fd\u5feb\u6ca1\u4eba\u4e86\uff0c\u72ec\u4eab\u4e86\u5f88\u4e45wwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20140.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20130.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u6d77\u5730\u72f1\u7684\u58f3\u5e97\u72e0\u72e0\u6d88\u78e8\u4e86\u65f6\u95f4\u3002<\/p>\n<p>\u8fd9\u4e2a\u5927\u5206\u732b\u7cfb\u5217\u633a\u53ef\u7231\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20112.jpeg\" alt=\"\"  \/>\n\n\n\u8fd9\u4e2a\u67ef\u5357Q\u7248\u5927\u5206\u9650\u5b9a\u4e5f\u5f88\u53ef\u7231\u7684\u8bf4\uff0c\u4e0d\u8fc7\u6ca1\u4e70\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20117.jpeg\" alt=\"\"  \/>\n\n\n\u51b0\u7bb1\u8d34\u6709\u4e00\u4e9b\u4e5f\u8fd8\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20119.jpeg\" alt=\"\"  \/>\n\n\n\u5176\u5b9e\u6709\u52a8\u5fc3\u4e70\u4e00\u4e2a\u63d0\u706f\u7684\uff0c\u8981\u4e0d\u662f\u56e0\u4e3a\u6211\u7684\u7bb1\u5b50\u771f\u7684\u633a\u6ee1\u7684\u4e86\uff0c\u771f\u7684\u5f88\u60f3\u4e70\u4e00\u4e2a\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20132.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u56e0\u4e3a\u592a\u6709\u65f6\u95f4\uff0c\u5c31\u5728\u8fd9\u91cc\u4e70\u4e86\u4e24\u76d2\u624b\u4fe1\uff0c\u6253\u7b97\u56de\u9999\u6e2f\u7684\u65f6\u5019\u62ff\u7ed9\u670b\u53cb\u5206\u4e86\uff0c\u7ed3\u679c\u5f88\u5931\u8d25\uff0c\u9009\u7684\u4e00\u70b9\u4e5f\u4e0d\u597d\u5403\uff0c\u8fd8\u4e0d\u5982\u5728\u5317\u6d77\u9053\u4e70\u767d\u8272\u604b\u4eba\u5462\ud83d\ude02<\/p>\n<p>\u4e0d\u8fc7\u6d77\u5730\u72f1\u7684\u58f3\u5e97\u4e5f\u5728\u5356\u7684\u4e00\u4e2a\u7279\u4ea7\u7684\u6e29\u6cc9\u86cb\uff0c\u6211\u672c\u6765\u60f3\u7684\u662f\u6211\u5728\u8def\u8fb9\u652f\u6301\u8fc7\u5976\u5976\u4e86\uff0c\u8fd9\u8fb9\u666f\u533a\u7684\u5c31\u7b97\u4e86\u5427\u3002\n\u7ed3\u679c\u8ddf\u670b\u53cb\u804a\u8bf4\uff0c\u8fd9\u91cc\u5356\u7684\u9e21\u86cb\u771f\u7684\u5f88\u597d\u5403\uff0c\u8fd8\u662f\u5f3a\u70c8\u63a8\u8350\u6211\u53bb\u4e70\uff0c\u8fd9\u4e2a\u65f6\u5019\u5df2\u7ecf\u662f16:59\u5206\u4e86\u3002\n\u6211\u672c\u6765\u5df2\u7ecf\u5728\u51fa\u4e86\u58f3\u5e97\u5728\u5f80\u95e8\u53e3\u51c6\u5907\u8d70\u4e86\uff0c\u9a6c\u4e0a\u6389\u8f6c\u5934\u53bb\u4e70\u4e865\u4e2a\u86cb\uff08\u56e0\u4e3a\u4e00\u4e2a150yen\uff0c5\u4e2a450\u6bd4\u8f83\u5212\u7b97wwww\n\u4f30\u8ba1\u6211\u5c31\u662f\u8fd9\u5929\u6700\u540e\u4e00\u540d\u987e\u5ba2\u4e86\u3002<\/p>\n<h3 id=\"\u5c71\u7530\u522b\u838a\">\u5c71\u7530\u522b\u838a<\/h3>\n<p>\u5728\u6d77\u5730\u72f1\u95e8\u53e3\u7ee7\u7eed\u7b49\u4e00\u4e2a\u5df4\u58eb\u56de\u5230JR\u7ad9\u9644\u8fd1\u518d\u53bb\u627e\u9152\u5e97\u30026\u70b9\u4e0d\u5230\u5230\u4e86\u522b\u838a\u641e Checkin\u3002\n\u8fd9\u662f\u4e2a\u65e5\u5f0f\u5c0f\u522b\u5885\uff0c\u5e26\u4e2a\u5c0f\u5ead\u9662\uff0c\u867d\u7136\u6709\u4e9b\u5730\u65b9\u5f88\u65e7\u4e86\uff0c\u8e29\u7740\u8d70\u5eca\u548c\u697c\u68af\u90fd\u4f1a\u560e\u5431\u560e\u5431\u54cd\u90a3\u79cd\uff0c\u4f46\u662f\u6574\u4f53\u6c1b\u56f4\u5b8c\u5168\u6b63\u4e2d\u7ea2\u5fc3\uff0c\u786e\u5b9e\u53ef\u4ee5\u8bf4\u662f\u5b8c\u7f8e\u91cd\u73b0\/\u4fdd\u7559\u6b6a\u679c\u4ec1\u5fc3\u76ee\u4e2d\u7684\u65e7\u548c\u5f0f\u522b\u5885\u5bb6\u5ead\u6c1b\u56f4\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20139.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u662f\u5b9a\u4e86\u4e2a\u5355\u4eba\u95f4\uff0c\u867d\u7136\u6d74\u5ba4\u516c\u7528\uff0c\u4f46\u662f\u8fd9\u6837\u7684\u623f\u95f4\uff0c\u7b80\u76f4\u68a6\u5bd0\u4ee5\u6c42\uff0c\u7279\u522b\u662f\u4f4f\u4e86\u51e0\u5929\u5e76\u4e0d\u8212\u670d\u7684\u5e8a\u4f4d\u548c\u80f6\u56ca\uff0c\u611f\u89c9\u7ec8\u4e8e\u6709\u4e2a\u5730\u65b9\u80fd\u597d\u597d\u7761\u89c9\u4e86\uff0c\u611f\u52a8\ud83e\udd79\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20142.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5148\u662f\u8d81\u7740\u8fd8\u70ed\u4e4e\uff0c\u628a\u9e21\u86cb\u90fd\u5e72\u6389\u4e86\uff0c\u56e0\u4e3a\u771f\u7684\u5f88\u597d\u5403\uff0c\u8def\u8fb9\u644a\u5976\u5976\u5f88\u62b1\u6b49\uff0c\u4f46\u771f\u7684\u6bd4\u4f60\u505a\u7684\u597d\u5403\u5f88\u591a\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20143.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u6ce1\u8336\u5403\u4e86\u70b9\u5fc3\uff0c\u53c8\u6253\u5f00\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u8fd9\u4e2a\u96f6\u98df\u2b07\ufe0f \u5fd8\u8bb0\u5177\u4f53\u5728\u54ea\u4e2a\u58f3\u5e97\u4e70\u7684\uff0c\u636e\u8bf4\u662f\u4eba\u6c14no.1\u3002\n\u800c\u4e14\u5b83\u5199\u6fc0\u8f9b\uff0c\u6211\u8868\u793a\u6211\u5c31\u8981\u770b\u770b\u6709\u591a\u8f9b\u3002\n\uff08\u7136\u540e\u6211\u8d25\u4e86\uff0c\u8fd9\u4e2a\u7279\u522b\u7279\u522b\u8fa3\ud83e\udd75 \u6211\u5403\u4e86\u4e24\u53e3\u5c31\u8f93\u4e86\uff0c\u8fd9\u4e2a\u6fc0\u8f9b\u771f\u7684\u6ca1\u9a97\u4eba\uff0c\u662f\u4e0d\u662f\u88ab\u592a\u591a\u7684\u97e9\u56fd\u6e38\u5ba2\u7ed9\u5377\u8d77\u6765\u7684\uff1f\uff01\u559c\u6b22\u5403\u8fa3\u7684\u4eba\u5982\u679c\u6765\u522b\u5e9c\u8bf7\u8bd5\u8bd5\u8fd9\u4e2a\u3002\u3002\u3002\u3002\u3002\u6211\u4e0d\u884c\u4e86\uff0c\u6574\u5305\u653e\u5f03\u4e86\ud83d\ude02\ud83d\ude02\ud83d\ude02\ud83d\ude02\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20150.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u5728\u522b\u5885\u91cc\u53c2\u89c2\u8f6c\u4e86\u4e0b\u3002\u771f\u7684\u5f88\u559c\u6b22\uff0c\u63a8\u8350\u7ed9\u6240\u6709\u559c\u6b22\u8fd9\u4e2a\u7c7b\u578b\u4f4f\u5bbf\u7684\u4eba\u3002<\/p>\n<p>\u8d70\u5eca\uff0c\u697c\u68af\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20144.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20148.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20151.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20154.jpeg\" alt=\"\"  \/>\n\n\n\u201c\u614e\u72ec\u201d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20155.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u611f\u89c9\u662f\u7b2c\u4e00\u6b21\u6b63\u7ecf\u770b\u5230\u201c\u5fa1\u624b\u6d17\u201d\u7528\u5b83\u7684\u672c\u610fhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20145.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6bd4\u8f83\u9760\u91cc\u7684\u4e00\u4e2a\u516c\u5171\u7a7a\u95f4\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20152.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20153.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdb\u95e8\u95e8\u5385\u5904\uff0c\u53f3\u624b\u8fb9\u7684\u67dc\u5b50\u5176\u5b9e\u662f\u978b\u67dc\uff0c\u6bcf\u4e2a\u623f\u95f4\u90fd\u4f1a\u6709\u4e00\u4e2a\u7a7a\u95f4\u653e\u978b\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20156.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdb\u95e8\u5385\u5de6\u624b\u8fb9\u5c31\u662f\u8fd9\u4e2a\u516c\u5171\u623f\u95f4\uff0ccheckin \u5c31\u9080\u8bf7\u4f60\u5750\u5728\u8fd9\u91cc\u641e\u5c31\u884c\uff0c\u670d\u52a1\u5f88\u5468\u5230\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20146.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20147.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20157.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdb\u95e8\u5385\u5de6\u624b\u8fb9\u8fd8\u6709\u8fd9\u4e48\u4e00\u4e2a\u522b\u81f4\u7684\u5c0f\u623f\u95f4\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20175.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u95e8\u5385\u5bf9\u7740\u7684 reception \u7684\u5730\u65b9\u4f1a\u6302\u7740\u8fd9\u4e48\u4e00\u4e2a\u677f\u5b50\uff0c\u662f\u6307\u6bcf\u4e2a\u623f\u95f4\u7684\u5ba2\u4eba\u90fd\u53ef\u4ee5\u9884\u7ea6\u4e00\u4e2a\u65f6\u95f4\u6bb530\u5206\u949f\u7684\u9732\u5929\u98ce\u5415\u5305\u573a\u3002\n\u8fd9\u4e2a\u4e0d\u662f\u6307\u65e5\u5e38\u6d17\u6fa1\u7684\u6d74\u5ba4\uff0c\u662f\u9732\u5929\u6e29\u6cc9\u3002\u5ba4\u5185\u6709\u516c\u5171\u6d74\u5ba4\u662f24\u5c0f\u65f6\u5f00\u653e\u7684\uff0c\u4f60\u60f3\u4ec0\u4e48\u65f6\u5019\u53bb\u6d17\u6fa1\u90fd\u53ef\u4ee5\u3002\n\u4f46\u8fd9\u4e2a\u9732\u5929\u6e29\u6cc9\u662f\u6709\u65f6\u95f4\u9650\u5236\u7684\uff0c\u4f60\u9009\u7684\u8fd930\u5206\u949f\u5c31\u662f\u4f60\u7684\u5305\u573a\u65f6\u95f4\u3002\u65e5\u5f0f\u6ce1\u6e29\u6cc9\u662f\u8981\u6c42\u4f60\u5148\u6d17\u5934\u6d17\u6fa1\u6d17\u5e72\u51c0\u518d\u53bb\u6ce1\u7684\uff0c\n\u8fd9\u8fb9staff\u5c31\u4f1a\u63d0\u9192\u4f60\uff0c\u8fd9\u8fb9\u7684\u9732\u5929\u6e29\u6cc9\u662f\u6ca1\u6709\u63d0\u4f9b\u6d17\u6d74\u90e8\u5206\u7684\uff0c\u9700\u8981\u4f60\u81ea\u5df1\u5148\u5728\u5ba4\u5185\u6d74\u5ba4\u6d17\u5e72\u51c0\u518d\u53bb\u6ce1\u6c64\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20158.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u963f\u91cc\u90ce\u70e4\u8089\">\u963f\u91cc\u90ce\u70e4\u8089<\/h3>\n<p>\u8f6c\u4e86\u4e00\u5708\u53c8\u56de\u623f\u95f4\u5750\u4e86\u4f1a\u513f\uff0c\u611f\u89c9\u597d\u4e0d\u5bb9\u6613\u6765\u4e86\uff0c\u8fd8\u662f\u518d\u5403\u70b9\u5f53\u5730\u7f8e\u98df\u597d\u4e86\uff0c\u53ef\u60dc\u53c8\u6709\u70b9\u4e0d\u77e5\u9053\u8be5\u5403\u5565\uff0c\u7136\u540e\u53c8\u4e34\u65f6\u5237\u5c0f\u7ea2\u4e66\u63a8\u8350\u7684\u65f6\u5019\u770b\u5230\u4e00\u4e2a\u963f\u91cc\u90ce\u70e4\u8089\u5e97\u3002\n\u4e00\u4e2a\u662f\u535a\u4e3b\u8bc4\u4ef7\u70e4\u8089\u633a\u597d\u5403\u7684\uff0c\u5165\u53e3\u5373\u5316\uff0c\u518d\u4e00\u4e2a\u662f\u8bf4\u8fd9\u91cc\u7684\u51b7\u9762\u662f\u522b\u5e9c\u51b7\u9762\u53d1\u7965\u5730\u3002\n\u6211\u8fd8\u633a\u559c\u6b22\u51b7\u9762\u7684\uff0c\u53c8\u770b\u4e86\u4e0b\u8fd9\u5bb6\u79bb\u522b\u838a\u633a\u8fd1\u7684\uff0c\u5c31\u9009\u4e86\u8fd9\u5bb6\u3002<\/p>\n<p>\u5927\u6982\u63a5\u8fd17\u70b945\u5de6\u53f3\u7684\u65f6\u5019\u51fa\u95e8\u4e86\u3002\n\u6b65\u884c10\u5206\u949f\u5c31\u5230\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20161.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8be5\u8bf4\u4e0d\u8bf4\uff0c\u6211\u5c45\u7136\u4e5f\u80fd\u4e00\u4e2a\u4eba\u6765\u70e4\u8089\u4e86\uff01\u8fdb\u6b65\u4e86\uff5e\u5176\u5b9e\u4e5f\u6ca1\u6709\u5f88\u96be\u561b\uff5e\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20162.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20163.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u51b7\u9762\u8fd8\u6ca1\u4e0a\u5148\u5403\u4e86\u4e24\u7247\u8089\uff0c\u771f\u7684\u86ee\u597d\u5403\u7684\uff0c\u8fd9\u4e2a\u8089\u3002\u4f46\u662f\u51b7\u9762\u6709\u70b9\u5931\u671b\uff0c\u4ed6\u4eec\u7528\u7684\u9762\u597d\u786c\u54e6\uff0c\u4e0d\u662f\u6211\u559c\u6b22\u7684\uff0c\u6211\u4f1a\u89c9\u5f97\u6df1\u5733\u7684\u70e4\u4e32\u8fde\u9501\u5e97\u767d\u7389\u4e32\u57ce\u7684\u51b7\u9762\u66f4\u597d\u5403\u3002\n\u51b7\u9762\u70b9\u7684\u6211\u5f88\u540e\u6094\uff0c\u6211\u60f3\u7684\u662f\u51b7\u9762\u7b97\u662f\u78b3\u6c34\uff0c\u6240\u4ee5\u6ca1\u6709\u8981\u7c73\u996d\u3002\n\u65e9\u77e5\u9053\u5e94\u8be5\u76f4\u63a5\u70b9\u7c73\u996d\uff0c\u5403\u70e4\u8089\u7684\u65f6\u5019\u4e00\u4e2a\u52b2\u5728\u60f3\u4e94\u90ce\u53d4\uff0c\u628a\u70e4\u597d\u7684\u8089\u8638\u70b9\u8638\u6599\u7136\u540e\u5377\u4e00\u4e9b\u767d\u7c73\u996d\u4e00\u53e3\u585e\u5165\u5634\u91cc\uff0c\u592a\u4eab\u53d7\u4e86\uff08\u6211\u54c7\u54c7\u5927\u54ed\ud83d\ude02\ud83d\ude02\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20165.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u52aa\u529b\u5e72\u6389\u4e86\u5927\u90e8\u5206\u51b7\u9762\uff0c\u5176\u5b9e\u4e5f\u5f88\u9971\u4e86\uff0c\u672c\u6765\u524d\u9762\u5c31\u8fd8\u5403\u4e865\u4e2a\u9e21\u86cb\uff08\u603b\u51717\u4e2a\uff09\u3002<\/p>\n<p>\u6700\u540e\u5feb9\u70b9\u7684\u65f6\u5019\uff0cstaff \u8bf4\u8981last order \u7684\u65f6\u95f4\u4e86\uff0c\u6211\u53c8\u4e34\u65f6\u8981\u4e86\u4e00\u4e2asoft ice \ud83c\udf68\uff0c\u597d\u5403\uff0c\u6ee1\u8db3\ud83d\ude0c\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20166.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20167.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u6563\u6b65\u56de\u522b\u838a\u9732\u5929\u6e29\u6cc9\">\u6563\u6b65\u56de\u522b\u838a+\u9732\u5929\u6e29\u6cc9<\/h3>\n<p>\u5403\u5f97\u8fd8\u633a\u9971\u5c31\u6253\u7b97\u9644\u8fd1\u6e9c\u8fbe\u6e9c\u8fbe\u518d\u56de\u53bb\uff0c\u53cd\u6b63\u6211\u9884\u7ea6\u7684\u9732\u5929\u6e29\u6cc9\u65f6\u95f4\u6bd4\u8f83\u665a\u3002<\/p>\n<p>\u633a\u6709\u610f\u601d\u7684\u540d\u5b57\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20169.jpeg\" alt=\"\"  \/>\n\n\n\u770b\u8d77\u6765\u5f88\u597d\u5403\u7684\u4e00\u5bb6\u5e97\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20170.jpeg\" alt=\"\"  \/>\n\n\n\u597d\u50cf\u662f\u63a5\u8fd1\u6d77\u8fb9\u7684\u5730\u65b9\uff0c\u6709\u4e2a\u5f69\u8272\u73bb\u7483\u88c5\u9970\u7684\u7089\u5b50\uff0c\u633a\u6709\u610f\u601d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20171.jpeg\" alt=\"\"  \/>\n\n\n\u5947\u602a\u989c\u8272\u7684\u522b\u5e9ctower\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20172.jpeg\" alt=\"\"  \/>\n\n\n\u5728\u9644\u8fd1\u7684\u4e00\u5bb6lawson \u53d1\u73b0\u585e\u5c14\u8fbe\u5305\u5305\uff0c\u7ea0\u7ed3\u4e86\u4e00\u4e0b\u8fd8\u662f\u4e70\u4e0b\u6765\u4e86\uff0c\u53ea\u662f\u6ca1\u60f3\u5230\u8fd9\u4e2a\u4fbf\u5229\u5e97\u597d\u50cf\u4e0d\u80fdtax-free\uff0c\n\u6211\u95ee\u5e97\u5458\u5c0f\u54e5\uff0c\u4fe9\u4eba\u597d\u50cf\u8fdetax-free \u662f\u5565\u90fd\u4e0d\u77e5\u9053\u3002\u3002\u3002\u4e00\u6574\u4e2a\u65e0\u8bed\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20173.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56de\u623f\u95f4\u540e\u60f3\u8d77\u6765\u62c6\u4e86\u4e00\u4e0b\u8fd9\u4e2a\u7279\u610f\u4e70\u7684\u4e5d\u5341\u4e5d\u756a\u304a\u307f\u304f\u3058\u7684\u5427\u5527\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20178.jpeg\" alt=\"\"  \/>\n\n\n\u662f\u5927\u5409\u54e6\uff01\u597d\u8fd0\u4f20\u9012\u7ed9\u5927\u5bb6wwwwwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20179.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6700\u540e\u7ed9\u5e2e\u6211\u6253\u5361\u7684\u9053\u5177\u4eec\u6765\u4e2a\u5e8a\u7167\uff08bushi\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1114-Beppu%20-%20181.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4f11\u606f\u4e86\u4e00\u4f1a\u513f\u4e4b\u540e\u6211\u5c31\u5148\u53bb\u516c\u5171\u6d74\u5ba4\u6d17\u6fa1\u4e86\uff0c\u524d\u9762\u90a3\u5757\u677f\u5b50\u4e0a\u4e5f\u770b\u5f97\u5230\uff0c\u603b\u5171\u5c31\u53ea\u670910\u4e2a\u623f\u95f4\uff0c\u5927\u6982\u6709\u51e0\u4e2a\u623f\u95f4\u4e5f\u662f\u81ea\u5e26\u6d74\u5ba4\u7684\u5427\uff0c\u6240\u4ee5\u5176\u5b9e\u516c\u5171\u6d74\u5ba4\u4f7f\u7528\u7684\u4eba\u5927\u6982\u6bd4\u60f3\u8c61\u5c11\u5f88\u591a\u3002\n\u4e5f\u6709\u53ef\u80fd\u6211\u771f\u7684\u6bd4\u8f83\u665a\u4e86\uff0c\u6211\u5168\u7a0b\u6ca1\u9047\u5230\u8fc7\u4efb\u4f55\u5176\u4ed6\u623f\u95f4\u7684\u5ba2\u4eba\uff0c\u516c\u5171\u6d74\u5ba4\u4e5f\u7528\u5f97\u50cf\u5305\u573a\u4e00\u6837hhhhh\n\u4e0d\u8fc7\u516c\u5171\u6d74\u5ba4\u7684\u8bbe\u65bd\u771f\u7684\u770b\u7740\u7279\u522b\u65e7\u4e86\uff0c\u7a0d\u5fae\u6709\u70b9\u6015\u5b83\u4e0d\u5e72\u51c0\u3002\u5e0c\u671b\u53ea\u662f\u770b\u8d77\u6765\u5427\uff0c\u6bd5\u7adf\u516c\u5171\u6d74\u5ba4\u7684\u706f\u5149\u4e5f\u4e0d\u600e\u4e48\u660e\u4eae\n\u7136\u540e\u5dee\u4e0d\u591a\u65f6\u95f4\u5c31\u53bb\u4e86\u9732\u5929\u6e29\u6cc9\u7684\u5730\u65b9\uff0c\u4e5f\u7b97\u795e\u5947\u7684\u4e00\u4e2a\u4eba\u5305\u573a\u7684\u4f53\u9a8c\u5427\u3002<\/p>\n<p>\u6ca1\u5565\uff0c\u771f\u7684\u5f88\u723d\uff01\uff01\uff01<\/p>\n<p>\u5176\u5b9e\u4e5f\u4e0d\u7b97\u5f88\u5c0f\u7684\u9732\u5929\u6e29\u6cc9\uff0c\u4e00\u5bb6\u4eba\u7684\u8bdd\u975e\u5e38\u7ef0\u7ef0\u6709\u4f59\u3002\n\u4e0d\u8fc7\u6211\u771f\u7684\u6ce1\u4e0d\u957f\uff0c10-15\u5206\u949f\u6211\u5c31\u4e0d\u592a\u884c\u4e86\uff0c\u89c9\u5f97\u70ed\u4e86\uff0c\u63d0\u524d\u8dd1\u4e86\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u3002\n\u6ce1\u5b8c\u771f\u7684\u6709\u89c9\u5f97\u76ae\u80a4\u4f3c\u4e4e\u53d8\u5f97\u3064\u308b\u3064\u308bwww<\/p>\n<h2 id=\"1115-\u79bb\u5f00\u522b\u5e9c\">11.15 \u79bb\u5f00\u522b\u5e9c<\/h2>\n<p>\u975e\u5e38\u5b89\u9759\u7761\u5f97\u5f88\u597d\u7684\u4e00\u4e2a\u665a\u4e0a\u3002<\/p>\n<p>\u8d77\u5e8a\u4e4b\u540e\u62c9\u5f00\u7a97\u5e18\u5728\u7a97\u6237\u8fb9\u5750\u4e86\u4e00\u4f1a\u513f\uff0c\u524d\u4e00\u665a\u6ca1\u5750\u5728\u8fd9\u513f\uff0c\u4e0d\u8fc7\u7a97\u6237\u5916\u6ca1\u5565\u666f\u8272\u5c31\u662f\u4e86\uff0c\u662f\u80cc\u9762\uff0c\u800c\u4e14\u6709\u4e9b\u88ab\u6321\u4f4f\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u5c71\u7530\u522b\u838a\u7684\u65e9\u9910\">\u5c71\u7530\u522b\u838a\u7684\u65e9\u9910<\/h3>\n<p>\u65e9\u9910\u9700\u8981\u63d0\u524d\u544a\u77e5\uff0c\u53e6\u5916\u52a01500yen\uff0c\u662f\u6bd4\u8f83\u8d35\uff0c\u4f46\u6211\u89c9\u5f97\u8fd8\u633a\u4e0d\u9519\u7684\u3002<\/p>\n<p>\u5403\u65e9\u9910\u4e4b\u524d\u6211\u5c31\u628a\u4e1c\u897f\u6574\u7406\u597d\uff0c\u51c6\u5907\u5403\u5b8c\u5c31\u53bb\u8d76JR\u4e86\u3002\u6240\u4ee5\u6700\u540e\u518d\u8f6c\u4e86\u4e00\u4e0b\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%202.jpeg\" alt=\"\"  \/>\n\n\n\u6628\u665a\u4e0a\u6ca1\u592a\u770b\u6e05\u7684\u5ead\u9662\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%203.jpeg\" alt=\"\"  \/>\n\n\n\u6240\u6709\u5ba2\u4eba\u5403\u65e9\u996d\u7684\u5385\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%204.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%209.jpeg\" alt=\"\"  \/>\n\n\n\u996d\u5385\u65c1\u7684\u8d70\u5eca\uff0c\u4e0d\u8fc7\u6211\u672c\u6765\u4ee5\u4e3a\u8fd9\u8fb9\u8d70\u5eca\u53ef\u4ee5\u5f00\u95e8\u8d70\u8fc7\u53bb\u5ead\u9662\u6563\u6b65\uff0c\u4f46\u5b9e\u9645\u597d\u50cf\u6539\u88c5\u6210\u4e86\u4e0d\u80fd\u6253\u5f00\u7684\uff0c\u5927\u6982\u8fd8\u662f\u6709\u4e00\u4e9b\u5b89\u5168\u8003\u8651\uff1f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%205.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%207.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%208.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e48\u6709\u7279\u8272\u7684\u65c5\u9986\uff0c\u679c\u7136\u662f\u6709\u7535\u5f71\u5728\u8fd9\u91cc\u62cd\u8fc7\uff0c\u4e0d\u8fc7\u90fd\u4e0d\u51fa\u540d\u5c31\u662f\u4e86hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2011.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e1500\u7684\u65e9\u996d\u662f\u8fd9\u6837\uff0c\u8fd8\u6709\u9e21\u86cb\u548c\u5496\u5561\u53ef\u4ee5\u81ea\u53d6\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2013.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4ece\u6211\u5750\u7740\u7684\u4f4d\u7f6e\u770b\u5ead\u9662\u5927\u6982\u662f\u8fd9\u79cd\u89d2\u5ea6\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1115-Yufuin-Fukuoka%20-%2014.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u8981\u53bb\u8d76 JR \u65f6\u95f4\u6709\u70b9\u7d27\uff0c\u6240\u4ee5\u65e9\u996d\u5e76\u6ca1\u6709\u6162\u6162\u54c1\u5473\uff0c\u800c\u662f\u5feb\u901f\u5438\u5165\uff0c\u5496\u5561\u4e5f\u6ca1\u6765\u5f97\u53ca\u559d\u4e00\u676f\u5c31checkout \u8d70\u4e86\u3002\n\u8981\u4e0d\u662f\u6709\u540e\u9762\u7684\u884c\u7a0b\uff0c\u8fd8\u771f\u60f3\u5728\u8fd9\u91cc\u591a\u4f4f\u51e0\u5929\u3002<\/p>\n]]>"},{"title":"\u65f6\u96945\u5e74\u7684\u9713\u8679\u65c5\u884c\uff08\u4e8c\uff09\u672d\u5e4c\uff08\u4e0b\uff09","link":"https:\/\/zhuzi.dev\/posts\/2024-11-21-travel-sapporo-2\/","pubDate":"Thu, 21 Nov 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-11-21-travel-sapporo-2\/","description":"<h2 id=\"1110-\u5c0f\u6a3d\u5317\u6d77\u9053\u795e\u5babparcoaoao\u6c34\u65cf\u9986\">11.10 \u5c0f\u6a3d+\u5317\u6d77\u9053\u795e\u5bab+Parco+AOAO\u6c34\u65cf\u9986<\/h2>\n<p>\u8fd9\u5929\u7b97\u6bd4\u8f83\u60a0\u95f2\u4e86\uff0c\u867d\u7136\u4e00\u5929\u4e0b\u6765\u8fd8\u662f\u8d70\u4e862.5w\u6b65\u3002<\/p>\n<p>\u524d\u4e00\u665a\u7684\u6c11\u5bbf\u53ea\u62fc\u4e86\u4e00\u4e2a\u665a\u4e0a\uff0c\u6240\u4ee5\u65e9\u4e0a\u8d77\u6765\u53c8\u662f\u6536\u62fe\u884c\u674e\u9000\u623f\u7136\u540e\u6b65\u884c\u53bb\u53e6\u4e00\u4e2a\u9152\u5e97\uff0c\u8fd9\u6b21\u6bd4\u8f83\u8fd1\uff0c\u53ef\u4ee5\u6b65\u884c\u3002\n\u5176\u5b9e\u672c\u6765\u505a\u884c\u7a0b\u7684\u65f6\u5019\uff0c\u53d1\u73b0\u6c11\u5bbf\u79bb\u4e8c\u6761\u5e02\u573a\u5f88\u8fd1\uff0c\u672c\u6765\u5b89\u6392\u53bb\u4e8c\u6761\u5e02\u573a\u5403\u4e2a\u6d77\u9c9c\u4e3c\u5f53\u65e9\u996d\uff0c\u4e0d\u8fc7\u524d\u4e00\u665a\u7684\u6ce1\u9762\u5403\u5f97\u592a\u665a\uff0c\u611f\u89c9\u5b8c\u5168\u6ca1\u6d88\u5316\uff0c\u4e0d\u592a\u6709\u80c3\u53e3\u3002\n\u800c\u4e14\u6211\u641c\u7d22\u4e8c\u6761\u5e02\u573a\u7684\u5e97\uff0c\u8bc4\u4ef7\u6bd4\u8f83\u597d\u7684\u90fd\u8fd8\u633a\u8d35\u7684\uff0c\u4e5f\u6b63\u5e38\uff0c\u4e8e\u662f\u5c31\u76f4\u63a5\u653e\u5f03\u4e86\u4e8c\u6761\u5e02\u573a\u3002<\/p>","content":"<![CDATA[<h2 id=\"1110-\u5c0f\u6a3d\u5317\u6d77\u9053\u795e\u5babparcoaoao\u6c34\u65cf\u9986\">11.10 \u5c0f\u6a3d+\u5317\u6d77\u9053\u795e\u5bab+Parco+AOAO\u6c34\u65cf\u9986<\/h2>\n<p>\u8fd9\u5929\u7b97\u6bd4\u8f83\u60a0\u95f2\u4e86\uff0c\u867d\u7136\u4e00\u5929\u4e0b\u6765\u8fd8\u662f\u8d70\u4e862.5w\u6b65\u3002<\/p>\n<p>\u524d\u4e00\u665a\u7684\u6c11\u5bbf\u53ea\u62fc\u4e86\u4e00\u4e2a\u665a\u4e0a\uff0c\u6240\u4ee5\u65e9\u4e0a\u8d77\u6765\u53c8\u662f\u6536\u62fe\u884c\u674e\u9000\u623f\u7136\u540e\u6b65\u884c\u53bb\u53e6\u4e00\u4e2a\u9152\u5e97\uff0c\u8fd9\u6b21\u6bd4\u8f83\u8fd1\uff0c\u53ef\u4ee5\u6b65\u884c\u3002\n\u5176\u5b9e\u672c\u6765\u505a\u884c\u7a0b\u7684\u65f6\u5019\uff0c\u53d1\u73b0\u6c11\u5bbf\u79bb\u4e8c\u6761\u5e02\u573a\u5f88\u8fd1\uff0c\u672c\u6765\u5b89\u6392\u53bb\u4e8c\u6761\u5e02\u573a\u5403\u4e2a\u6d77\u9c9c\u4e3c\u5f53\u65e9\u996d\uff0c\u4e0d\u8fc7\u524d\u4e00\u665a\u7684\u6ce1\u9762\u5403\u5f97\u592a\u665a\uff0c\u611f\u89c9\u5b8c\u5168\u6ca1\u6d88\u5316\uff0c\u4e0d\u592a\u6709\u80c3\u53e3\u3002\n\u800c\u4e14\u6211\u641c\u7d22\u4e8c\u6761\u5e02\u573a\u7684\u5e97\uff0c\u8bc4\u4ef7\u6bd4\u8f83\u597d\u7684\u90fd\u8fd8\u633a\u8d35\u7684\uff0c\u4e5f\u6b63\u5e38\uff0c\u4e8e\u662f\u5c31\u76f4\u63a5\u653e\u5f03\u4e86\u4e8c\u6761\u5e02\u573a\u3002<\/p>\n<h3 id=\"\u5c0f\u6a3d\">\u5c0f\u6a3d<\/h3>\n<p>\u7b97\u662f\u6bd4\u8f83\u665a\u624d\u51fa\u53d1\u53bb\u5c0f\u6a3d\uff0c\u76f4\u63a5\u5750local train \u7ecf\u8fc7\u6d77\u8fb9\u7684\u90a3\u6761\u51fd\u9986\u672c\u7ebf\u8fc7\u53bb\u7684\uff08\u6211\u5f88\u559c\u6b22\u8fd9\u6761\u7ebf\uff0c\u7ecf\u8fc7\u6d77\u8fb9\u7684\u662f\u90a3\u4e00\u6bb5\u975e\u5e38\u6f02\u4eae\uff09\u3002\n\u6162\u8f66\u6447\u6447\u6643\u6643\u5750\u5f97\u592a\u8212\u670d\u4e86\uff0c\u5dee\u70b9\u5b8c\u5168\u7761\u8fc7\u53bb\uff0c\u6574\u4e2a\u4eba\u90fd\u5e73\u9759\u4e0b\u6765\u5728\u4f11\u606f\u3002<\/p>\n<p>\u5c0f\u6a3d\u6211\u6765\u8fc7\uff0c\u8fd8\u4f4f\u8fc7\u4e00\u665a\u3002\u5c31\u5e26\u7740\u59b9\u59b9\u4ece\u5357\u5c0f\u6a3d\u7ad9\u4e0b\u8f66\uff0c\u4ece\u516b\u97f3\u76d2\u9986\u5f00\u59cb\uff0c\u4e00\u76f4\u6cbf\u7740\u6b65\u884c\u8857\u8d70\u5230\u8fd0\u6cb3\u7684\u8fd9\u6761\u7ecf\u5178\u6563\u6b65\u8def\u7ebf\u8d70\u4e86\u4e00\u5708\u3002<\/p>\n<p>\u8fdc\u5904\u5728\u88c5\u4fee\u7684\u662f\u672d\u5e4c\u7ea2\u7816\u5385\u820d\uff0c\u4e5f\u5c31\u662f\u5317\u6d77\u9053\u5385\u65e7\u672c\u5385\u820d\uff0c\u623f\u5b50\u633a\u6709\u7279\u8272\u7684\uff0c\u53ef\u60dc\u5728\u6574\u4fee\uff0c\u660e\u5e747\u6708\u624d\u91cd\u65b0\u5f00\u653e\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5357\u5c0f\u6a3d\u7ad9\u51fa\u53e3\uff0c\u8fd9\u5929\u5929\u6c14\u975e\u5e38\u597d\uff0c\u4e2d\u5348\u5347\u6e29\u523015\u5ea6\u4e86\uff0c\u751a\u81f3\u6709\u70b9\u70ed\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%203.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%204.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%206.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u516b\u97f3\u76d2\u9986\u8fd8\u662f\u8001\u6837\u5b50\uff0c\u5728\u91cc\u9762\u8bd5\u542c\u5404\u79cd\u5404\u6837\u7684\u6b4c\u8fd8\u662f\u6709\u8da3\u7684\u3002\u53ea\u662f\u6ca1\u60f3\u5230\u65f6\u96946\u5e74\uff0c\u90fd\u80fd\u5728\u8fd9\u91cc\u770b\u5230\u4e0d\u5c11\u96ea\u4eba\u7684\u6b4c\u5236\u6210\u516b\u97f3\u76d2\u4e86\u3002\n\u5f53\u7136\u4e5f\u53ef\u80fd\u662f\u6293\u70ed\u70b9\u8425\u9500wwww\n\u4f46\u56e0\u4e3a\u6709 <a href=\"https:\/\/www.youtube.com\/watch?v=NOlkuq1ZuXI\">zig<\/a> <a href=\"https:\/\/www.youtube.com\/watch?v=-6BvyCVmdo4\">zag love<\/a> \ud83e\udd79 \u6beb\u4e0d\u72b9\u8c6b\u5730\u4e70\u4e0b\u4e86\u3002\u867d\u7136\u4e00\u5b9a\u8981\u8bf4\u7684\u8bdd\uff0c\u7ec7\u9526\u7684\u516b\u97f3\u76d2\u6700\u597d\u542c\u3002\n6\u5e74\u524d\u6765\u8fd9\u4e2a\u516b\u97f3\u76d2\u9986\u4e70\u4e86 smap \u4e16\u754c\u306b\u4e00\u3064\u3060\u3051\u306e\u82b1 \u7684\u4eba\uff0c\u4e5f\u6ca1\u60f3\u52306\u5e74\u540e\u4f1a\u6765\u4e70\u26c4\ufe0f\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u63a5\u7740\u5c31\u4f1a\u662f LeTAO\u3001\u516d\u82b1\u4ead\u51e0\u4e2a\u5927\u7684\u624b\u4fe1\u751c\u54c1\u7684\u5e97\uff0c\u5176\u5b9e\u5728\u8fd9\u91cc\u4e70\u624b\u4fe1\u633a\u597d\u7684\uff0c\u867d\u7136\u9713\u8679\u7684\u8fd9\u4e9b\u4e1c\u897f\u603b\u88ab\u8bdf\u75c5\u592a\u751cwwww<\/p>\n<p>\u5634\u998b\u53ea\u5728 LeTAO \u4e70\u4e86\u4e2a\u51b0\u6dc7\u6dcb\ud83c\udf66\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%209.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6b65\u884c\u8857\u8fd9\u4e2a\u6ca1\u4e0b\u96ea\u7684\u65f6\u6bb5\u786e\u5b9e\u4e0d\u592a\u591a\u4eba\uff0c\u5927\u81f4\u901b\u8fc7\u53bb\uff0c\u4e70\u4e86\u4e2a\u53ef\u4e50\u997c\u5f53\u4e2d\u996d\u4e86\u3002\u7136\u540e\u5c31\u8d70\u5230\u5c0f\u6a3d\u8fd0\u6cb3\u4e86\u3002\n\u8fd9\u8fb9\u8fd8\u6709\u4e00\u70b9\u70b9\u7ea2\u53f6\uff0c\u4e5f\u7b97\u662f\u5c0f\u6a3d\u8fd0\u6cb3\u7684\u53e6\u4e00\u79cd\u6837\u8c8c\u4e86\uff0c\u867d\u7136\u6211\u8fd8\u662f\u89c9\u5f97\u6ca1\u6709\u51ac\u5929\u96ea\u666f\u597d\u770b\ud83d\ude02<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2013.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2016.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2018.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2019.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u5317\u6d77\u9053\u795e\u5bab\">\u5317\u6d77\u9053\u795e\u5bab<\/h3>\n<p>\u5c0f\u6a3d\u603b\u5171\u4e5f\u5c31\u662f\u534a\u5929\u7684\u65f6\u95f4\u5427\u3002\u5927\u69822\u70b9\u591a\u5c31\u4ece\u5c0f\u6a3d\u7ad9\u5750\u5df4\u58eb\u53bb\u4e86\u5317\u6d77\u9053\u795e\u5bab\u3002\n\u5230\u8fbe\u795e\u5bab\u7684\u65f6\u50193\u70b9\u591a\uff0c\u592a\u9633\u975e\u5e38\u659c\u4e86\uff0c\u5929\u8272\u4e5f\u53d8\u6697\u4e86\u8bb8\u591a\uff0c\u5230\u7684\u65f6\u5019\u624d\u53d1\u73b0\u795e\u5bab\u662f4\u70b9\u5173\u95e8\uff0c\u5dee\u70b9\u5c31\u8981\u6251\u7a7a\u4e86\ud83d\ude02<\/p>\n<p>\u6700\u8fd1\u597d\u50cf\u662f\u4e03\u4e94\u4e09\u7684\u65f6\u8282\uff0c\u5728\u795e\u5bab\u4e5f\u770b\u5230\u4e86\u7236\u6bcd\u5e26\u7740\u7a7f\u7740\u548c\u670d\u7684\u5c0f\u5b69\u5b50\u6765\u795e\u793e\u53c2\u62dc\u5565\u7684\uff0c\u548c\u670d\u90fd\u597d\u597d\u770b\uff0c\u597d\u53ef\u7231w<\/p>\n<p>\u5728\u795e\u5bab\u4e70\u4e86\u4e2a\u4ed5\u4e8b\u5b88\uff0c\u5e0c\u671b\u80fd\u4fdd\u4f51\u6211\u627e\u5de5\u4f5c\u987a\u5229\u5427wwww<\/p>\n<p>\u5317\u6d77\u9053\u795e\u5bab\u5176\u5b9e\u7b97\u662f\u5728\u5186\u5c71\u516c\u56ed\u91cc\uff0c\u8fd9\u4e2a\u516c\u56ed\u5e94\u8be5\u4e0a\u4e00\u5468\u7684\u67ab\u53f6\u4e5f\u5f88\u6f02\u4eae\uff0c\u8fd9\u5468\u8fd8\u662f\u892a\u8272\u4e86\u592a\u591a\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2022.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2023.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2025.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e0d\u5c0f\u5fc3\u62cd\u5230\u4e86\u5c0f\u5973\u5b69\u52a8\u611f\u7684\u4e00\u523bhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2027.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u60f3\u7740\u5077\u62cd\u4e00\u4e0b\u7a7f\u548c\u670d\u7684\u6bcd\u5973\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2028.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u795e\u5bab\u95e8\u53e3\u4e24\u4fa7\u5206\u522b\u6709\u4e2a\u5c0f\u4ead\u5b50\uff0c\u4e00\u8fb9\u662f\u516d\u82b1\u4ead\uff0c\u4f1a\u5356\u4e00\u4e2a\u7279\u8272\u7684\u5224\u5b98\u997c\uff0c\u4e00\u4e2a\u597d\u50cf\u662f150yen\u3002\n\u672c\u6765\u6ca1\u6709\u62a5\u4ec0\u4e48\u671f\u671b\uff0c\u7ed3\u679c\u975e\u5e38\u597d\u5403\uff0c\u867d\u7136\u662f\u7ea2\u8c46\u9985\uff0c\u4f46\u662f\u4e0d\u751c\u4e0d\u817b\uff0c\u800c\u4e14\u662f\u70ed\u7684\u521a\u521a\u70e4\u51fa\u6765\u7684\uff0c\u53c8mochimochi\u7684\u53e3\u611f\uff0c\u597d\u559c\u6b22\uff0c\u65e9\u77e5\u9053\u518d\u4e70\u4e24\u4e2ahhhhhh<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2030.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u4e00\u8fb9\u662f\u6709\u4e2a\u795e\u5bab\u8336\u623f\u5c4b\uff0c\u8fd9\u8fb9\u662f\u5356\u4e00\u4e2a\u7279\u4ea7\u53eb\u795e\u5bab\u798f\u997c\uff0c\u53ef\u60dc\u6765\u665a\u4e86\uff0c\u552e\u7f44\u4e86\uff0c\u660e\u660e\u624d3\u70b9\u534a\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2033.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4ece\u795e\u5bab\u51fa\u6765\u5feb\u8981\u5929\u9ed1\u4e86\uff0c\u5c31\u6253\u7b97\u7a7f\u8fc7\u4e00\u6bb5\u5186\u5c71\u516c\u56ed\u53bb\u5750\u5730\u94c1\u5148\u56de\u9152\u5e97\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2034.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2036.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5186\u5c71\u516c\u56ed\u4e5f\u8fd8\u633a\u90ca\u91ce\u516c\u56ed\u7684\uff0c\u559c\u6b22www\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2037.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"parco\">Parco<\/h3>\n<p>\u56de\u9152\u5e97checkin \u4ee5\u53ca\u4f11\u606f\u4e86\u4e00\u9635\u518d\u51fa\u95e8\u7684\u3002\n\u76f4\u63a5\u662f\u6b65\u884c\u53bb\u4e86\u672d\u5e4c\u7684 Parco\u3002Parco \u6709\u5854\u5e97\u3001jump shop\u3001chiikawa land\uff0c\u5c31\u5c5e\u4e8e\u6211\u80fd\u6d88\u78e8\u5f88\u591a\u65f6\u95f4\u7684\u5730\u65b9hhhhh<\/p>\n<p>\u867d\u7136\u8fd9\u6837\u90a3\u6837\uff0c\u8fd8\u662f\u4e70\u4e86\u4e00\u5f20\u521dA\uff0c\u59b9\u59b9\u4e70\u4e86\u521dB\uff0c\u4e24\u4ebashare\u4e86\u4e00\u4e0b\u6362\u56de\u6765\u7684\u6863\ud83d\ude02\uff08\u5c31\u662f\u4e00\u5f00\u59cb\u6839\u672c\u6ca1\u6ce8\u610f\u5230\u521dB \u7684\u7279\u5178\u5c0f\u5361\u6ca1\u6709\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2038.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6b63\u597dXG\u7684\u7b2c\u4e8c\u5f20mini\u4e13\u4e5f\u51fa\u4e86\uff0c\u5c31\u987a\u624b\u4e5f\u652f\u6301\u4e86\u4e00\u4e0b\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2039.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u591a\u4e70\u4e86\u4e00\u5f20 Maya \u7684 solo \u5c01\uff0c\u56e0\u4e3a\u770b\u56fe\u7684\u65f6\u5019\u4e00\u773c\u76f8\u4e2d\uff0c\u89c9\u5f97\u7279\u522b\u7f8e\ud83e\udd29\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%20112.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2044.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u6c64\u5496\u55b1-soup-curry-king\">\u6c64\u5496\u55b1 Soup Curry King<\/h3>\n<p>\u4ece Parco \u51fa\u6765\u5c31\u51c6\u5907\u53bb\u5403\u996d\u4e86\u3002\n\u672c\u6765\u662f\u5728 google maps \u4e0a\u770b\u4e2d\u9644\u8fd1\u7684\u4e00\u5bb6\u53eb Soup Curry GARAKU \u7684\u6c64\u5496\u55b1\u7684\u5e97\u3002\n\u6ca1\u60f3\u5230\u8fd9\u5bb6\u662f\u7f51\u7ea2\u5e97\uff0c\u53bb\u5230\u5730\u65b9\u53d1\u73b0\u5927\u6392\u961f\uff0c\u524d\u9762\u7b49\u5f8527\u684c\u3002\n\u76f4\u63a5\u653e\u5f03\uff0c\u53e6\u5916\u641c\u7d22\u4e86\u9644\u8fd1\u7684\u6c64\u5496\u55b1\u5e97\u540e\uff0c\u627e\u5230\u8857\u5bf9\u9762\u7684\u4e00\u5bb6\u53eb Soup Curry King \u7684\u5e97\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2046.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6ca1\u6709\u4eba\u6392\u961f\uff0c\u4f46\u662f\u5e97\u5185\u57fa\u672c\u4e5f\u662f\u5750\u6ee1\u4e86\uff0c\u5c31\u76f4\u63a5\u8fdb\u53bb\u4e86\u3002<\/p>\n<p>\u6211\u70b9\u7684\u9e21\u8089+\u591a\u79cd\u91ce\u83dc\u6b3e\u2b07\ufe0f\uff0c\u975e\u5e38\u597d\u5403\ud83d\ude0b \u540e\u6094\u7c73\u996d\u70b9\u7684\u662f\u666e\u901asize\uff0c\u6211\u5e94\u8be5\u70b9\u5927\u76db\u308a\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2045.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u611f\u89c9\u8fd9\u5bb6\u7684\u6c64\u504f\u8f9b\u53e3\uff0c\u9009\u7684\u8fa3\u5ea63\u800c\u5df2\uff08\u6ee1\u683c10\uff09\uff0c\u5403\u5230\u540e\u9762\u771f\u7684\u4f1a\u89c9\u5f97\u6709\u70b9\u8fa3\u3002\n\u56e0\u4e3a\u9910\u684c\u4e0a\u6709\u7eaf\u97e9\u6587\u7684tip\uff0c\u770b\u63d2\u56fe\u597d\u50cf\u662f\u53ef\u4ee5\u52a0\u5377\u5fc3\u83dc\u7684\u610f\u601d\uff0c\u6211\u6000\u7591\u8fd9\u5bb6\u662f\u4e0d\u662f\u97e9\u56fd\u4eba\u6765\u5f97\u591a\uff0c\u56e0\u4e3a\u6bd4\u8f83\u8fa3\ud83d\ude02<\/p>\n<h3 id=\"aoao-sapporo-\u6c34\u65cf\u9986\">AOAO Sapporo \u6c34\u65cf\u9986<\/h3>\n<p>\u8fd9\u4e2a\u5730\u65b9\u4e5f\u662f\u59b9\u59b9\u5237\u5c0f\u7ea2\u4e66\u770b\u5230\u7684\u624d\u51b3\u5b9a\u52a0\u5165\u884c\u7a0b\u7684\u3002\n\u56e0\u4e3a\u8fd9\u4e2a\u6c34\u65cf\u9986\u7684\u4f18\u70b9\u662f\u665a\u4e0a10\u70b9\u624d\u5173\u95e8\uff0c9\u70b9\u524d\u5165\u573a\u5c31\u597d\u3002\n\u800c\u4e14\u5730\u7406\u4f4d\u7f6e\u662f\u4e2d\u5fc3\u5730\u5e26\uff0c\u5c31\u5728 Parco \u65c1\u8fb9\u3002\u665a\u4e0a\u56de\u9152\u5e97\u4e5f\u4f1a\u5f88\u65b9\u4fbf\u3002\n\u6240\u4ee5\u975e\u5e38\u9002\u5408\u665a\u4e0a\u4e0d\u60f3\u56de\u9152\u5e97\u4f11\u606f\uff0c\u6bd4\u8f83\u60f3\u6d88\u78e8\u591a\u70b9\u665a\u4e0a\u65f6\u95f4\u7684\u8bdd\u53ef\u4ee5\u6765\u8fd9\u91cc\u8f6c\u8f6c\u3002<\/p>\n<p>\u8fd9\u4e2a\u6c34\u65cf\u9986\u5176\u5b9e\u662f\u5728\u5546\u573a\u7684\u697c\u4e0a\uff0c\u5927\u6982\u5360\u636e\u4e863\u5c42\u697c\u7684\u6837\u5b50\u3002<\/p>\n<p>\u603b\u7684\u6765\u8bf4\u4e0d\u662f\u5f88\u5927\uff0c\u4e1c\u897f\u4e5f\u4e0d\u7b97\u591a\uff0c\u4f46\u662f\u6c1b\u56f4\u8425\u9020\u5f88\u5389\u5bb3\uff0c\u975e\u5e38\u9759\u8c27\uff0c\u9648\u8bbe\u5f88\u827a\u672f\uff0c\u7b80\u6d01\u73b0\u4ee3\u98ce\u683c\uff0c\u751a\u81f3\u6709\u79cd\u7f8e\u672f\u9986\u7684\u611f\u89c9\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2048.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<blockquote>\n<p>\u8d34\u4e2a\u5b98\u65b9\u7f51\u5740\uff1a <a href=\"https:\/\/aoao-sapporo.blue\/\">https:\/\/aoao-sapporo.blue\/<\/a><\/p>\n<\/blockquote>\n<p>\u50cf\u4e0b\u9762\u8fd9\u4e2a\u751f\u6001\u666f\u89c2 box \u597d\u50cf\u662f\u67094\u4e2a\uff0c\u6bcf\u4e00\u4e2a\u90fd\u6253\u9020\u5f97\u5f88\u6f02\u4eae\u5f88\u7ec6\u81f4\uff0c\u6bcf\u4e2a\u90fd\u53ef\u4ee5\u8ba9\u4eba\u53d1\u5446\u770b\u597d\u4e45\uff0c\u975e\u5e38\u5e73\u590d\u5fc3\u60c5\uff0c\u5728\u8fd9\u4e2a\u5730\u65b9\u505ameditation \u4f30\u8ba1\u7279\u522b\u9002\u5408wwww\n\u8fd9\u4e00\u5757\u5728\u5b98\u7f51\u7684\u7b80\u4ecb\u76f4\u63a5\u5c31\u8bf4\u662f\u4ee5 \u300c\u4f98\u3073\u3001\u5bc2\u3073\u300d\u7684\u611f\u89c9\u6765\u505a\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2056.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2057.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2058.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2060.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2061.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2062.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2063.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e9b\u5f69\u8272\u5c0f\u9c7c\u7684\u6e38\u52a8\uff0c\u6211\u771f\u7684\u76ef\u4e86\u597d\u4e45\u597d\u4e45\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2064.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2065.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2066.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2067.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2072.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u5c0f\u4e11\u9c7c\u7279\u522b\u8ff7\u4f60\uff0c\u975e\u5e38\u53ef\u7231\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2073.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2079.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u5730\u65b9\u53eb\u505a Blue Room\uff0c\u4e00\u76f4\u5728\u6295\u5f71\u5404\u5f0f\u5404\u6837\u7684\u573a\u666f\uff0c\u6bd4\u5982\u8fd9\u91cc\u6211\u62cd\u7684\u662f\u5728\u6295\u5f71\u6d77\u91cc\u7684\u6c34\u6bcd\uff0c\u751a\u81f3\u662f\u4f1a\u6709\u4e92\u52a8\u6548\u679c\u7684\uff0c\u4f60\u5982\u679c\u5728\u8fd9\u91cc\u8d70\u6765\u8d70\u53bb\uff0c\u662f\u4f1a\u5728\u811a\u8fb9\u751f\u6210\u6c34\u6ce1\u7684\uff0c\u53c8\u6709\u8da3\u53c8\u7f8e\u4e3d\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2080.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u6211\u7ffb\u5b98\u7f51\u7684\u65f6\u5019\uff0c\u8fd9\u91cc\u8fd8\u4f1a\u5076\u5c14\u4f5c\u4e3a\u5c0f\u578blive \u821e\u53f0\uff0c\u4f1a\u6709\u4e0d\u592a\u77e5\u540d\u7684\u4e50\u624b\u6b4c\u624b\u6765\u8868\u6f14wwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2081.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7136\u540e\u6709\u4e00\u5927\u7247\u7684\u6c34\u6bcd\ud83e\udebc\u533a\uff0c\u4e5f\u662f\u5f88\u597d\u770b\uff0c\u611f\u89c9\u5168\u4e16\u754c\u90fd\u5f88\u5b89\u9759\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2084.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2085.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2088.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2089.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2090.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2093.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2094.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2095.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%2098.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%20101.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u8fd8\u6709\u4e00\u4e2a\u4f01\u9e45\u533a\uff0c\u4f46\u662f\u5230\u7684\u65f6\u5019\u5df2\u7ecf\u662f\u665a\u4e0a9\u70b9\u4e86\uff0c\u4f01\u9e45\u57fa\u672c\u90fd\u5728\u7761\u89c9wwww \u53ea\u770b\u5230\u6709\u4e00\u53ea\u8fd9\u4e48\u8db4\u7740\u5728\u7761\uff0c\u800c\u4e14\u8fd8\u4e0d\u65f6\u6253\u54c8\u6b20\u7684\u6837\u5b50\uff0c\u5176\u4ed6\u7684\u90fd\u662f\u7ad9\u7740\u5728\u7761\u89c9hhhh<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%20104.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53c8\u56de Blue Room \u5b89\u9759\u5730\u5750\u4e86\u5f88\u4e45\uff0c\u6709\u53d8\u6210\u6d77\u8fb9\u6d6a\u82b1\u7684\u65f6\u5019\uff0c\u4e5f\u6709\u8fd9\u79cd\u9cb8\u9c7c\ud83d\udc33\u6765\u56de\u6e38\u7684\u65f6\u5019\uff0c\u90fd\u5f88\u8ba9\u4eba\u8212\u670d\uff0c\u8eab\u5fc3\u90fd\u653e\u677e\u4e0b\u6765\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1110-Otaru-Sapporo%20-%20105.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5982\u679c\u665a\u4e0a\u5728\u672d\u5e4c\u60f3\u627e\u5730\u65b9\u6d88\u78e8\u65f6\u95f4\u53d1\u53d1\u5446\uff0c\u8fd9\u91cc\u771f\u7684\u5f88\u9002\u5408\u3002\n\u5f53\u7136\u5982\u679c\u662f\u4e0b\u5348\u53ef\u80fd\u81f3\u5c11\u8fd8\u80fd\u770b\u5230\u4f01\u9e45\u6d3b\u8e66\u4e71\u8df3wwww<\/p>\n<h2 id=\"1111-\u5f00\u59cb\u4e00\u4e2a\u4eba\u884c\u52a8\">11.11 \u5f00\u59cb\u4e00\u4e2a\u4eba\u884c\u52a8<\/h2>\n<p>\u524d\u4e24\u5929\u7684\u75b2\u52b3\u79ef\u7d2f\u7740\uff0c\u8fd9\u5929\u4e24\u4e2a\u4eba\u90fd\u7d2f\u4e86\uff0c9\u70b9\u591a\u624d\u8d77\u6765\uff0c10\u70b9\u591a\u624d\u9000\u623f\u51fa\u95e8\u3002<\/p>\n<p>\u6211\u5148\u53bb\u628a\u6211\u7684\u884c\u674e\u5bc4\u5b58\u5230\u6211\u90a3\u665a\u8981\u4f4f\u7684 hostel\uff0c\u6b65\u884c\u8ddd\u79bb\u3002<\/p>\n<p>\u4e4b\u524d\u7684\u96ea\u5df2\u7ecf\u5b8c\u5168\u5316\u4e86\uff0c\u8fd9\u5929\u4e5f\u57fa\u672c\u662f\u6674\u5929\uff0c\u4f46\u6674\u5929\u7684\u9ec4\u53f6\u4e5f\u8fd8\u662f\u633a\u597d\u770b\u7684\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u6c64\u5496\u55b1-rojiura-curry-samurai\">\u6c64\u5496\u55b1 Rojiura Curry Samurai<\/h3>\n<p>\u672c\u6765\u60f3\u7740\u53bb\u5403\u4e2a\u62c9\u9762\u7684\uff0c\u4f46\u662f\u8111\u5b50\u6ca1\u592a\u8f6c\u8fc7\u6765\uff0c\u6ca1\u6709\u63d0\u524d\u627e\u5e97\uff0c\u4e34\u65f6\u4e5f\u4e0d\u77e5\u9053\u53bb\u54ea\u91cc\u5403\u3002\n\u6700\u540e\u8fd8\u662f\u56de JR \u7ad9\u53bb\u4e86\uff0c\u6253\u7b97\u5728\u7ad9\u9644\u8fd1\u627e\u4e00\u4e2a\u5e97\u3002<\/p>\n<p>\u6ca1\u60f3\u5230\u5230\u4e86JR \u7ad9\u9644\u8fd1\u6b63\u597d\u662f11\u70b9\u524d\uff0c\u9047\u5230\u4e00\u4e2a\u770b\u4eba\u63a8\u8350\u8fc7\u7684\u6c64\u5496\u55b1\u5e97 Rojiura Curry Samurai\uff0c\u770b\u5230\u5e97\u95e8\u53e3\u5df2\u7ecf\u6709\u4eba\u6392\u961f\uff0c\u4f46\u662f\u4e5f\u4e0d\u662f\u7279\u522b\u591a\uff0c\u79bb11\u70b9\u4e5f\u5c31\u4e0d\u52305\u5206\u949f\u4e86\uff0c\u4e8e\u662f\u9a6c\u4e0a\u5c31\u8ddf\u7740\u53bb\u6392\u961f\u4e86\u3002<\/p>\n<p>\u4e00\u5f00\u5e97\u5c31\u8fdb\u95e8\u5750\u4e0b\uff0c\u4e0d\u6127\u662fJR\u7ad9\u7684\u5e97\uff0c\u8fd8\u80fd\u7528pad \u6765\u70b9\u83dcwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7ed3\u679c\u662f\u6ca1\u60f3\u5230\u8fde\u7eed\u4e24\u5929\u90fd\u662f\u5403\u6c64\u5496\u55b1\uff0c\u4f46\u662f\u8fd9\u5bb6 Rojiura \u548c\u6628\u5929\u90a3\u5bb6\u5176\u5b9e\u5473\u9053\u5b8c\u5168\u4e0d\u4e00\u6837\uff0c\u8fd9\u5bb6\u7684\u6c64\u662f\u504f\u756a\u8304\u53e3\u5473\u7684\uff0c\u4e5f\u975e\u5e38\u597d\u5403\ud83d\ude0b\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5403\u5b8c\u5c31\u9001\u59b9\u59b9\u8fdbJR\u53bb\u673a\u573a\u4e86\uff0c\u5979\u5c31\u5148\u56de\u56fd\u4e0a\u73ed\u4e86\u3002\u540e\u534a\u5f00\u59cb\u4e86\u6211\u7684\u4e00\u4e2a\u4eba\u65c5\u6e38\u3002<\/p>\n<h3 id=\"\u6251\u7a7a\u4e86\u7684\u827a\u672f\u4e4b\u68ee\">\u6251\u7a7a\u4e86\u7684\u827a\u672f\u4e4b\u68ee<\/h3>\n<p>\u672c\u6765\u8ba1\u5212\u7684\u662f\u4e00\u4e2a\u4e0b\u5348\u90fd\u5728\u827a\u672f\u4e4b\u68ee\u91ce\u5916\u7f8e\u672f\u9986\u901b\u901b\u7684\u3002\u8fd9\u4e5f\u662f\u5237\u5c0f\u7ea2\u4e66\u770b\u5230\u7684\u63a8\u8350\uff0c\u7b97\u5f88\u5c0f\u4f17\u7684\u666f\u70b9\uff0c\u6211\u81ea\u5df1\u7684\u529f\u8bfe\u6ca1\u505a\u8db3\u3002<\/p>\n<p>\u5750\u5730\u94c1\u518d\u8f6c\u5df4\u58eb\uff0c\u5750\u7684\u5df4\u58eb\u7684\u7ec8\u70b9\u7ad9\u53ea\u6709\u6211\u4e00\u4e2a\u4eba\u4e0b\u8f66\u3002\u7ed3\u679c\u4e0b\u8f66\u624d\u53d1\u73b0\u91ce\u5916\u7f8e\u672f\u9986\u662f\u4ece11\u67085\u53f7\u5c31\u5f00\u59cb\u51ac\u5b63\u4f11\u9986\u4e86\uff0c\u4e00\u76f4\u5230\u660e\u5e744\u6708\u5e95\u624d\u4f1a\u91cd\u65b0\u5f00\u653e\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%208.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u771f\u662f\u4e00\u4e2a\u4eba\u65c5\u6e38\u7684\u5f00\u7aef\u7adf\u7136\u5982\u6b64\u6ed1\u94c1\u5362\uff0c\u5b9e\u5728\u662f\u88ab\u81ea\u5df1\u7b11\u6b7b\u3002<\/p>\n<blockquote>\n<p>\u8d34\u4e00\u4e2a\u5b98\u7f51\uff1a <a href=\"https:\/\/artpark.or.jp\/shisetsu\/yagai-sapporo-art-museum\/\">https:\/\/artpark.or.jp\/shisetsu\/yagai-sapporo-art-museum\/<\/a>\uff08\u4eba\u5bb6\u786e\u5b9e\u6709\u660e\u660e\u767d\u767d\u5199\u774011\u67084\u65e5-4\u670828\u65e5\u51ac\u5b63\u4f11\u9986\ud83d\ude02<\/p>\n<\/blockquote>\n<p>\u6ca1\u8f99\uff0c\u6211\u60f3\u5230\u91ce\u5916\u7f8e\u672f\u9986\u5173\u4e86\uff0c\u65c1\u8fb9\u5e94\u8be5\u8fd8\u6709\u4e00\u4e2a\u827a\u672f\u4e4b\u68ee\u7f8e\u672f\u9986\u3002\u4e8e\u662f\u5c31\u6b65\u884c\u8fc7\u53bb\u53e6\u4e00\u4e2a\u7f8e\u672f\u9986\u4e86\u3002\uff08\u5176\u5b9e\u8fd9\u4e5f\u662f\u6ca1\u6709\u505a\u529f\u8bfe\u7684\u70b9\uff0c\u6211\u662f\u5750\u8f66\u5230\u8fd9\u91cc\u624d\u660e\u767d\u662f\u5206\u522b\u6709\u4e24\u4e2a\u7f8e\u672f\u9986\uff0c\u3084\u3084\u3053\u3057\u3044\uff09\n\u800c\u4e14\u6b63\u597d\u6cbf\u8def\u6709\u770b\u5230\u5ba3\u4f20\uff0c\u6700\u8fd1\u6709\u4e2a\u4ec0\u4e48\u7279\u522b\u5c55\u89c8\u3002<\/p>\n<p>\u7ed3\u679c\u8d70\u5230\u827a\u672f\u4e4b\u68ee\u7684\u7f8e\u672f\u9986\u624d\u53d1\u73b0\uff0c\u5468\u4e00\u4f11\u9986\uff0c11\u670811\u65e5\u662f\u4e00\u4e2a\u6708\u66dc\u65e5\u5462hhhhhhh<\/p>\n<blockquote>\n<p>\u5b98\u7f51\uff1a <a href=\"https:\/\/artpark.or.jp\/shisetsu\/sapporo-art-museum\/\">https:\/\/artpark.or.jp\/shisetsu\/sapporo-art-museum\/<\/a> \uff08\u4e5f\u6709\u519911\u6708\u52304\u6708\u7684\u51ac\u5b63\u662f\u6708\u66dc\u65e5\u4f11\u9986\uff09<\/p>\n<\/blockquote>\n<p>\u518d\u6b21\u88ab\u7b11\u75af\uff0c\u4e0d\u8fc7\u8fd9\u6b21\u662f\u65c1\u8fb9\u8fd8\u6709\u4e24\u4f4d\u65e5\u672c\u5927\u5988\u4e5f\u662f\u5230\u4e86\u624d\u53d1\u73b0\u662f\u4f11\u9986\u65e5\uff0c\u81ea\u5df1\u6ca1\u6709\u6210\u4e3a\u552f\u4e00\u7684\u5c0f\u4e11\ud83e\udd21<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2014.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e00\u8d9f\u827a\u672f\u4e4b\u68ee\u662f\u5b8c\u5b8c\u5168\u5168\u7684\u767d\u6765\u4e86\ud83d\ude02\ud83d\ude02\ud83d\ude02\ud83d\ude02\ud83d\ude02<\/p>\n<h3 id=\"\u771f\u99d2\u5185\u516c\u56ed\">\u771f\u99d2\u5185\u516c\u56ed<\/h3>\n<p>\u672c\u6765\u662f\u60f3\u90a3\u5c31\u53ea\u597d\u539f\u8def\u8fd4\u56de\u4e86\u3002\u4f46\u662f\u90fd\u6765\u5230\u6bd4\u8f83\u8fdc\u7684\u533a\u57df\u4e86\uff0c\u5c31\u53bb\u4e86\u8fd9\u9644\u8fd1\u7684\u771f\u99d2\u5185\u516c\u56ed\u3002\n\u8fd9\u4e2a\u516c\u56ed\u7b97\u662f\u8fd9\u4e2a\u7247\u533a\u6700\u5927\u7684\u516c\u56ed\uff0c\u4e4b\u524d\u4e5f\u5237\u5230\u8fc7\u8fd9\u4e2a\u516c\u56ed\u4e0a\u5468\u7684\u7ea2\u53f6\u4e5f\u633a\u597d\u770b\u7684\u3002\n\u79c9\u627f\u6765\u90fd\u6765\u4e86\uff0c\u5c31\u53bb\u901b\u4e00\u5708\u597d\u4e86\u3002<\/p>\n<p>\u4e0d\u8fc7\u7ec8\u7a76\u8fd8\u662f\u6709\u70b9\u8fc7\u5b63\u4e86\uff0c\u8fd9\u8fb9\u7684\u7ea2\u53f6\u5269\u7684\u4e0d\u591a\u4e86\u3002<\/p>\n<p>\u5df4\u58eb\u7ad9\u7684\u9ec4\u53f6\u8fd8\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u516c\u56ed\u672c\u8eab\u633a\u4e0d\u9519\u7684\uff0c\u5982\u679c\u4f4f\u5728\u9644\u8fd1\uff0c\u6211\u53ef\u80fd\u4f1a\u60f3\u5929\u5929\u6765\u8fd9\u91cc\u6563\u6b65\u6216\u8005\u953b\u70bc\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2016.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2018.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2019.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2021.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u60f3\u77404\u70b9\u5c31\u8981\u5929\u9ed1\u4e86\uff0c\u5c31\u6ca1\u6709\u5728\u771f\u99d2\u5185\u516c\u56ed\u4e45\u7559\uff0c\u770b\u4e86\u4e0b\u5730\u94c1\u7ebf\uff0c\u60f3\u7740\u56de\u53bb\u7684\u65f6\u5019\u8fd8\u4f1a\u7ecf\u8fc7\u4e2d\u5c9b\u516c\u56ed\uff0c\u4e0d\u5982\u518d\u53bb\u4e00\u4e0b\u4e2d\u5c9b\u516c\u56ed\u597d\u4e86\u3002\n\u662f\u5b8c\u5168\u4e34\u65f6\u7684\u5b89\u6392\u3002<\/p>\n<p>\u771f\u99d2\u5185\u516c\u56ed\u8d70\u56de\u5730\u94c1\u7ad9\u7684\u8def\u4e0a\u8fd8\u6709\u51e0\u68f5\u6811\u662f\u7ea2\u7740\u7684\uff0c\u8fd8\u4e0d\u9519\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2025.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2028.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u524d\u51e0\u5929\u6bcf\u5929\u90fd\u5e26\u7740\u7684\u8c37\uff0c\u4eca\u5929\u7ec8\u4e8e\u60f3\u8d77\u6765\u62ff\u51fa\u6765\u6253\u5361\u4e00\u4e0b\u597d\u4e86\uff0c\u53ef\u80fd\u56e0\u4e3a\u81ea\u5df1\u4e00\u4e2a\u4eba\u7565\u65e0\u804a\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2030.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u4e2d\u5c9b\u516c\u56ed\">\u4e2d\u5c9b\u516c\u56ed<\/h3>\n<p>\u4e2d\u5c9b\u516c\u56ed\u572811\u6708\u521d\u6709\u51e0\u5929\u665a\u4e0a\u6709light up \u6d3b\u52a8\u7684\uff0c\u5f88\u53ef\u60dc\u6ca1\u8d76\u4e0a\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2034.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2035.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2038.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e2d\u5c9b\u516c\u56ed\u91cc\u6709\u4e00\u4e2a\u5c0f\u666f\u70b9\uff0c\u4e30\u5e73\u9986\uff0c\u4ee5\u524d\u5c31\u662f\u505a\u5bb4\u4f1a\u5385\u7684\u6837\u5b50\uff0c\u73b0\u5728\u4e5f\u53ef\u4ee5\u79df\u501f\uff0c\u6bd4\u5982\u4e3e\u884c\u5a5a\u793c\u641e\u6d3b\u52a8\u4e4b\u7c7b\u7684\u3002\u95e8\u7968\u597d\u50cf\u662f200\u8fd8\u662f300yen\u5427\uff0c\u8fdb\u53bb\u8f6c\u4e86\u4e00\u5708\uff0c\u6ca1\u5565\u7279\u522b\u6709\u610f\u601d\u7684\u4e1c\u897f\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2040.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e2d\u5c9b\u516c\u56ed\u91cc\u7684\u7ea2\u53f6\u5269\u4e0b\u7684\u591a\u4e00\u70b9\u70b9\uff0c\u800c\u4e14\u56e0\u4e3a\u6709\u6e56\uff0c\u6574\u4f53\u666f\u8272\u66f4\u597d\u770b\u3002\u4f46\u8fd8\u662f\u5e94\u8be5\u65e9\u4e00\u5468\u6765\u770b\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2053.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2054.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2057.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2058.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u85fb\u5ca9\u5c71\u591c\u666f\">\u85fb\u5ca9\u5c71\u591c\u666f<\/h3>\n<p>4\u70b9\u591a\u5dee\u4e0d\u591a\u5929\u9ed1\u4e86\u5c31\u79bb\u5f00\u4e86\u4e2d\u5c9b\u516c\u56ed\u3002\u770b\u65f6\u95f4\u4e5f\u592a\u65e9\u4e86\uff0c\u5b9e\u5728\u6ca1\u5565\u5730\u65b9\u53bb\u4e86\uff0c\u5c31\u8fd8\u662f\u53bb\u4e86\u53ef\u80fd\u4f1a\u5f88\u591a\u4eba\u7684\u85fb\u5ca9\u5c71\u770b\u591c\u666f\u3002<\/p>\n<p>\u5176\u5b9e\u6211\u771f\u7684\u5bf9\u4f60\u4eec\u9713\u8679\u591c\u666f\u5927\u591a\u4e0d\u592a\u611f\u5174\u8da3\uff0c\u591a\u6570\u5b9e\u5728\u4e0d\u89c9\u5f97\u6709\u5565\u597d\u770b\u7684\ud83d\ude02\n18\u5e74\u5728\u51fd\u9986\u53bb\u770b\u7684\u90a3\u4e2a\u6240\u8c13\u4ec0\u4e48\u767e\u4e07\u591c\u666f\uff0c\u9664\u4e86\u56e0\u4e3a\u5730\u5f62\u5f62\u72b6\u7a0d\u5fae\u7279\u522b\u4e00\u70b9\uff0c\u8fd9\u79f0\u4e0d\u4e0a\u4ec0\u4e48\u7279\u522b\u9707\u64bc\u7684\u4e1c\u897f\u554a\u554a\u554a\u554a\u554a\u554a\u3002\u3002\u3002<\/p>\n<p>\uff08\u4f60\u8ba9\u4e00\u4e2a\u7ecf\u5e38\u770b\u9999\u6e2f\u7ef4\u6e2f\u548c\u6b63\u597d\u521a\u770b\u8fc7\u4e0a\u6d77\u5916\u6ee9\u7684\u4eba\u6765\u770b\u8fd9\u73a9\u610f\u513f\uff0c\u5b9e\u5728\u662femmmmm<\/p>\n<p>whatever\uff0c\u4ece\u4e2d\u5c9b\u516c\u56ed\u51fa\u6765\u662f\u5750\u7684\u6709\u8f68\u7535\u8f66\u53bb\u5230\u85fb\u5ca9\u5c71\u7f06\u8f66\u5c71\u9e93\u99c5\u9644\u8fd1\uff08\u5c31\u662f\u5c71\u811a\u4e0b\u7684\u8d77\u59cb\u7ad9\uff09\u3002\u672d\u5e4c\u7684\u6709\u8f68\u7535\u8f66\u53ea\u6709\u4e00\u6761\u5faa\u73af\u7ebf\u8def\uff0c\u4f46\u4f1a\u5206\u6210\u4e24\u4e2a\u65b9\u5411\uff0c\u5185\u5faa\u73af\u548c\u5916\u5faa\u73af\u3002\n\u867d\u7136\u5b83\u6709\u5356\u7535\u8f66\u4e00\u65e5\u5238\uff0c\u4f46\u6211\u89c9\u5f97\u8fd9\u6761\u5faa\u73af\u7ebf\u4e0a\u53ef\u73a9\u7684\u4e1c\u897f\u592a\u5c11\u4e86\uff0c\u8fd8\u662f\u633a\u65e0\u804a\u7684\uff0c\u53ea\u5750\u4e00\u7a0b\u4e24\u7a0b\u6839\u672c\u6ca1\u5565\u5fc5\u8981\u4e70\u8fd9\u4e2a\u4e00\u65e5\u5238\u3002<\/p>\n<p>\u603b\u4e4b\uff0c\u53bb\u85fb\u5ca9\u5c71\u770b\u591c\u666f\u6700\u597d\u662f\u5148\u5750\u7535\u8f66\u5230\u7f06\u8f66\u8d77\u59cb\u7ad9\u9644\u8fd1\uff0c\u5b83\u672c\u6765\u6709\u514d\u8d39shuttle bus \u4ece\u8fd9\u4e2a\u8f66\u7ad9\u8f66\u4f60\u5230\u7f06\u8f66\u8d77\u59cb\u7ad9\uff0c\u4f46\u8fd9\u4e2a\u8f6620\u5206\u949f\u624d\u4e00\u73ed\u3002\n\u5f53\u573a\u5c31\u6709\u4f4d\u5927\u53d4\u8ba9\u6211\u4eec\u76f4\u63a5\u817f\u8fc7\u53bb\uff0c\u5f88\u5feb\uff0c10\u5206\u949f\u5c31\u5230\u4e86\uff0c\u73ed\u8f66\u8981\u7b49\u5f88\u4e45\u3002<\/p>\n<p>\u4f46\u6211\u540e\u9762\u81ea\u5df1\u817f\u8fc7\u53bb\u4e4b\u540e\uff0c\u89c9\u5f97\uff0c\u5982\u679c\u662f\u8d70\u4e0d\u52a8\u7684\u3001\u817f\u811a\u4e0d\u4fbf\u7684\u4eba\uff0c\u8fd8\u662f\u4e56\u4e56\u7b49\u73ed\u8f66\u5c31\u597d\u3002\u56e0\u4e3a\u6709\u4e0d\u77ed\u7684\u4e00\u6bb5\u662f\u8fd8\u633a\u9661\u7684\u4e0a\u5761\u8def\uff0c\u722c\u4e0a\u53bb\u4e4b\u540e\u7ed9\u6211\u5598\u5f97\ud83d\ude2e\u200d\ud83d\udca8<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2060.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<blockquote>\n<p>\u8d34\u4e00\u4e2a\u85fb\u5ca9\u5c71\u7684\u5b98\u7f51\uff1a <a href=\"https:\/\/mt-moiwa.jp\/\">https:\/\/mt-moiwa.jp\/<\/a><\/p>\n<\/blockquote>\n<p>\u7f06\u8f66\u662f\u5206\u4e24\u6bb5\u7684\uff0c\u4e2d\u95f4\u6709\u4e2a\u4e2d\u8179\u99c5\uff0c\u4e24\u6bb5\u7684\u8f66\u7528\u5f97\u4e0d\u4e00\u6837\u3002\n\u6700\u7b80\u5355\u7684\u5c31\u662f\u76f4\u63a5\u9009\u62e9\u4e70\u5f80\u590d4\u6bb5\u7684\u7968\u5c31\u53ef\u4ee5\u4e86\uff0c2100yen\u3002\n\u5982\u679c\u662f\u767d\u5929\u5c31\u4e0a\u5c71\uff0c\u8fd8\u613f\u610f\u722c\u5c71\u7684\u8bdd\uff0c\u4ece\u4e2d\u8179\u99c5\u5230\u5c71\u9876\u5e94\u8be5\u4e0d\u662f\u5f88\u957f\u8ddd\u79bb\u662f\u53ef\u4ee5\u81ea\u5df1\u722c\u4e0a\u53bb\u7684\u3002<\/p>\n<p>\u5750\u5728\u5c71\u9e93\u99c5\u5230\u4e2d\u8179\u99c5\u7684\u7f06\u8f66\u4e0a\u62cd\u7684\u591c\u666f\u5927\u81f4\u662f\u8fd9\u6837\u2b07\ufe0f<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2061.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2062.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2063.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u5b9e\u662f6\u70b9\u4e0d\u5230\u5c31\u5230\u4e86\u5c71\u9876\uff0c\u4eba\u8fd8\u4e0d\u7b97\u5f88\u591a\u3002<\/p>\n<p>\u5c71\u9876\u9732\u53f0\u6709\u6446\u8fd9\u4e48\u2b07\ufe0f\u4e00\u4e2a\u4e1c\u897f\u7ed9\u4eba\u62cd\u7167\u7528\uff0c\u6211\u4e0d\u592a\u7406\u89e3\u80fd\u62cd\u51fa\u4ec0\u4e48\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2065.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u7684\u624b\u673a\u80fd\u62cd\u7684\u591c\u666f\u5927\u81f4\u5982\u6b64\uff0c\u561b\uff0c\u4e5f\u8fd8\u884c\u5427\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2066.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u55ef\uff0c\u8fd8\u662f\u6253\u4e2a\u5361\uff0c\u5176\u5b9e\u624b\u51bb\u6b7b\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2070.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u5c71\u9876\u5ba4\u5185\u4e00\u4e2a\u4f11\u606f\u7684\u89d2\u843d\u5750\u4e86\u597d\u534a\u5929\u624d\u4e0b\u5c71\u3002<\/p>\n<h3 id=\"\u665a\u996d\u62c9\u9762\">\u665a\u996d\u62c9\u9762<\/h3>\n<p>\u5750\u7535\u8f66\u5148\u56de\u4e86\u8d9f\u9884\u8ba2\u7684 hostel \u641echeckin \u548c\u653e\u4e0b\u591a\u4f59\u7684\u4e1c\u897f\u3002\u5176\u5b9e\u65e5\u5e38\u7684 hostel \u4e4b\u7c7b\u7684\u5e8a\u4f4d\u4e00\u5929\u624d1\u3001200\u5757\uff0c\u53ef\u60dc\u524d\u4e24\u5929\u7684\u8ba2\u4e0d\u5230\u554a\u3002<\/p>\n<p>\u7136\u540e\u53c8\u51fa\u95e8\u627e\u665a\u996d\u4e86\uff0c\u56e0\u4e3a\u65e9\u4e0a\u6ca1\u5403\u6210\u62c9\u9762\uff0c\u5c31\u5f00\u59cb\u641c\u7d22\u62c9\u9762\u5e97\u3002<\/p>\n<p>\u7ecf\u8fc7\u8fd9\u4e48\u4e00\u5bb6\u5f88\u7f51\u7ea2\u7684\u5e97\u2b07\ufe0f\uff0c\u6392\u961f\u597d\u53ef\u6015\uff0c\u53c8\u662f\u5bd2\u98ce\u4e2d\uff0c\u8f6c\u5934\u5c31\u53bb\u4e86\u9694\u58c1\u4e00\u6761\u8857\u6ca1\u4ec0\u4e48\u4eba\u7684\u62c9\u9762\u5e97\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2078.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u4e5f\u4e0d\u786e\u5b9a\u662f\u4e0d\u662f\u771f\u7684\u90a3\u5bb6\u5e97\u90a3\u4e48\u597d\u5403\uff0c\u6211\u5403\u7684\u8fd9\u5bb6\u611f\u89c9\u4e5f\u4e0d\u5dee\u5427\u3002\n\u53ea\u662f\u6211\u611f\u89c9\u8fd9\u5bb6\u5473\u564c\u62c9\u9762\u597d\u50cf\u4e0d\u662f\u5f88\u5bf9\u6211\u80c3\u53e3\uff0c\u6709\u70b9\u592a\u54b8\u3002\u3002\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2080.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5403\u5b8c\u53bb\u4e86\u8d9flawson\uff0c\u6253\u5370\u4e86\u51e0\u5f20\u7eb8wwww \u548c\u4e70\u4e86\u4e2a\u5e03\u4e01\ud83c\udf6e\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2079.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1111-Sapporo%20-%2081.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u5929\u665a\u4e0a\u5728hostel \u4f4f\u7684\u5f88\u96be\u53d7\uff0c\u4f4f\u7684\u662f\u4e00\u4e2a\u6df7\u5bbf\u56db\u4eba\u95f4\u3002\n\u6709\u4e00\u4e2a\u5e8a\u4f4d\u7684\u7537\u7684\uff0c\u4e00\u6574\u665a\u90fd\u5728\u6253\u547c\uff0c\u5f88\u5f71\u54cd\u6211\u3002\n\u518d\u52a0\u4e0a\u623f\u95f4\u91cc\u662f\u5f00\u7a7a\u8c03\u7684\uff0c\u5f00\u7684\u6e29\u5ea6\u597d\u50cf\u592a\u9ad8\u4e86\uff0c\u53c8\u975e\u5e38\u5e72\u71e5\uff0c\u641e\u5f97\u6211\u51e0\u4e4e\u662f\u5f7b\u591c\u96be\u7720\u5f88\u96be\u53d7\u3002<\/p>\n<h2 id=\"1112-\u672d\u5e4c\u5230\u798f\u5188\">11.12 \u2708\ufe0f\u672d\u5e4c\u5230\u798f\u5188<\/h2>\n<p>\u5e78\u597d\u540c\u4e00\u4e2a\u623f\u95f4\u7684\u5176\u4ed6\u4eba\u90fd\u5f88\u65e9\u5c31\u79bb\u5f00\u4e86\uff0c\u6211\u5927\u69828\u70b9\u591a\u624d\u8d77\u5e8a\u6d17\u6f31\uff0c\u7136\u540e9\u70b9\u5230\u5927\u5802\u90a3\u8fb9\u8981\u4e86\u65e9\u996d\uff0c\u8fd9\u4e2ahostel \u4e00\u5929\u624d150rmb \u8fd8\u5305\u65e9\u996d\uff0c\u5b9e\u5728\u6211\u4e5f\u4e0d\u597d\u8bf4\u4ec0\u4e48\u96be\u542c\u7684\u8bdd\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8<\/p>\n<p>\u2b07\ufe0f\u5176\u5b9e\u5c31\u662f\u524d\u53f0 staff \u505a\u7684\u65e9\u9910\uff0c\u4e5f\u8fd8\u884c\u5427hhhhh<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u56e0\u4e3a\u65f6\u95f4\u8fd8\u65e9\u4f46\u4e5f\u65e0\u6cd5\u53bb\u4ec0\u4e48\u592a\u8fdc\u7684\u5730\u65b9\u4e86\uff0c\u6700\u7ec8\u6211\u8fd8\u662f\u628a\u884c\u674e\u5148\u7559\u5728\u8fd9\u4e2a hostel \u6253\u7b97\u51fa\u95e8\u6e9c\u8fbe\u4e00\u4e2a\u534a\u5c0f\u65f6\u518d\u51fa\u53d1\u53bb\u673a\u573a\u3002<\/p>\n<h3 id=\"\u4e00\u65e9\u7684\u95f2\u901b\">\u4e00\u65e9\u7684\u95f2\u901b<\/h3>\n<p>\u6b63\u597d\u56e0\u4e3a\u524d\u4e00\u665a\u7684\u7a7a\u8c03\u5bfc\u81f4\u6211\u7684\u5634\u4e0a\u611f\u89c9\u8981\u957f\u6c34\u6ce1\uff0c\u5c31\u6253\u7b97\u53bb\u627e\u4e00\u4e2a\u836f\u5986\u5e97\u4e70\u70b9\u836f\u597d\u4e86\uff0c\u4e8e\u662f\u5c31\u8fd1\u6253\u7b97\u76f4\u63a5\u628a\u72f8\u5c0f\u8def\u518d\u6563\u6b65\u4e00\u4e2a\u6765\u56de\u3002<\/p>\n<p>\u8fd9\u95f4\u4e5f\u662fhostel\uff0c\u66fe\u7ecf\u60f3\u8981\u8ba2\u7684\uff0c\u623f\u95f4\u770b\u7740\u53c8\u4e0d\u662f\u5f88\u6ee1\u610f\uff0c\u4f46\u662f\u8fd9\u8fb9\u7684\u5496\u5561\u4f3c\u4e4e\u597d\u559d\u4e9b\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5f88\u559c\u6b22\u8fd9\u4e2a\u5305\u997a\u5b50\u6b65\u9aa4\u7684\u5e18\u5b50www\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%204.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u518d\u6b21\u8def\u8fc7\u6240\u4ee5\u7ed9\u7b2c\u4e00\u5929\u5403\u7684\u997a\u5b50\u5236\u9020\u6240\u62cd\u4e2a\u7167\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>10\u70b9\u7684\u65f6\u5019\u8def\u8fc7\u8fd9\u5bb6\u5e97\u8fd8\u6ca1\u6709\u4eba\u6392\u961f\uff0c\u5e97\u662f11\u70b9\u534a\u5f00\u95e8\uff0c\u6211\u5b8c\u5168\u6ca1\u6709\u65f6\u95f4\u6392\u961f\u4e86\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%206.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53c8\u53bb\u626d\u86cb\u5e97\u8f6c\u4e86\u4e00\u5708\uff0c\u840cw\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2010.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u60f3\u8d77\u6765\u8dd1\u6765\u4e70\u4e86\u4e00\u652f\uff0c\u867d\u7136\u5b8c\u5168\u6ca1\u6709\u4ee3\u8a00\u4eba\u7684\u5ba3\u4f20\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2012.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6298\u56de\u6765\u63a5\u8fd111\u70b9\u7684\u65f6\u5019\uff0c\u8fd9\u5bb6\u5e97\u5c31\u6709\u5f88\u591a\u4eba\u5728\u6392\u961f\u4e86\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2013.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7785\u4e86\u4e00\u773c\u67d0\u4f50\u559c\u6b22\u7684\u78b3\u9178\u996e\u6599\u662f\u5565\uff0c\u6211\u57fa\u672c\u4e0d\u559d\u78b3\u9178\u996e\u6599\uff0c\u6ca1\u4e70w\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2014.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>11\u70b9\u534a\u4e0d\u5230\u5c31\u56de\u5230 hostel \u53d6\u4e86\u884c\u674e\u518d\u53bb\u7ad9\u70b9\u7b49\u673a\u573a\u5927\u5df4\u3002<\/p>\n<p>\u6700\u540e\u7ed9 hostel \u5927\u5385\u7559\u4e2a\u7167\u7247\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2016.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u7b49\u673a\u573a\u5927\u5df4\u7684\u7ad9\u7684\u8857\u5bf9\u9762\u6709\u4e00\u4e2a\u8fd9\u4e2a\uff0c\u4e0d\u77e5\u9053\u662f\u5565\uff0c\u53ea\u662f\u88c5\u9970\u5f97\u5f88\u6709\u610f\u601d\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2017.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u673a\u573a\u5927\u5df4\u8fd8\u662f\u6bd4JR \u6162\u4e0d\u5c11\u7684\uff0c\u800c\u4e14\u4f1a\u6709\u70b9\u5bb3\u6015\u5835\u8f66\u3002\n\u53e6\u5916\u672d\u5e4c\u8fd9\u4e2a\u673a\u573a\u5927\u5df4\u597d\u50cf\u662f\u4e24\u5bb6\u516c\u53f8\u4e00\u8d77\u8fd0\u8425\u7684\uff0c\u8f66\u6b21\u662f\u95f4\u4e2d\u63d2\u7740\u90fd\u6709\uff0c\u5176\u4e2d\u4e00\u5bb6\u7684\u5df4\u58eb\u4e0d\u80fd\u5237IC\u5361\uff08\u6211\u4e0d\u7406\u89e3\uff09\uff0c\u6211\u9047\u4e0a\u7684\u8fd9\u4e2a\u6b63\u597d\u662f\uff0c\u5e78\u597d\u6211\u7684\u73b0\u91d1\u6b63\u597d\u80fd\u652f\u4ed8\uff0c\u8981\u4e0d\u7136\u597d\u9ebb\u70e6\u3002<\/p>\n<h3 id=\"\u672d\u5e4c\u673a\u573a\">\u672d\u5e4c\u673a\u573a<\/h3>\n<p>\u5148\u53bb\u6298\u817e\u4e86 checkin \u884c\u674e\u6362\u767b\u673a\u724c\uff0c\u53d1\u73b0\u5750\u9713\u8679\u56fd\u5185\u822a\u73ed\u5b8c\u5168\u4e0d\u9700\u8981\u8bc1\u4ef6\u7684\u3002\n\u6211\u662f\u5148\u5728\u81ea\u52a9\u7684\u673a\u5668\u4e0a\u505a\u4e86 checkin\uff0c\u5e76\u4e0d\u8981\u6c42\u6211\u63d0\u4f9b\u62a4\u7167\u53f7\u7801\uff0c\u7136\u540e\u518d\u6392\u961f\u53bb\u6258\u8fd0\u884c\u674e\u3002staff \u53ea\u95ee\u4e86\u6211\u7684\u540d\u5b57\u662f\u5426\u62fc\u5199\u6b63\u786e\uff0c\u4e5f\u6ca1\u8981\u6c42\u6211\u51fa\u793a\u62a4\u7167\u3002<\/p>\n<p>\u597d\u795e\u5947\u3002<\/p>\n<p>\u641e\u5b8c\u4e86\u6258\u8fd0\u89c9\u5f97\u8fd8\u65e9\u4e0d\u60f3\u8fdb\u5b89\u68c0\uff0c\u6253\u7b97\u5148\u5728\u8fd9\u8fb9\u7684\u5546\u5e97\u901b\u901b\u4e70\u4e70\u5403\u5403\u3002<\/p>\n<p>\u5148\u641e\u4e86\u4e00\u4e2a\u51b0\u6dc7\u6dcb\ud83c\udf66 \u633a\u4e0d\u9519\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2021.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u540e\u9762\u770b\u5230\u672d\u5e4c\u519c\u5b66\u6821\u7684\u51b0\u6dc7\u6dcb\u5f88\u7f51\u7ea2\uff0c\u4f46\u6392\u961f\u592a\u6050\u6016\u4e86\uff0c\u611f\u89c9\u8981\u63921\u4e2a\u5c0f\u65f6\u5c31\u5b8c\u5168\u653e\u5f03\u4e86\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2022.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u5c31\u5728\u522b\u7684\u5e97\u4e70\u4e86\u4e2a\u672d\u5e4c\u519c\u5b66\u6821\u7684\u5e03\u4e01\ud83c\udf6e\u5403\uff0c\u4e5f\u633a\u597d\u5403\u7684<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2030.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u4e00\u4e2a\u5f88\u591a\u4eba\u6392\u961f\u7684\u662f\u8fd9\u4e2a Kinotoya \u7684\u51b0\u6dc7\u6dcb\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2026.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u751f\u30ce\u30fc\u30b9\u30de\u30f3\uff0c\u610f\u601d\u662f northman \u5317\u4eba\ud83d\ude02\uff0c\u597d\u60f3\u8bd5\u8bd5\u7684\u554a\uff0c\u53ef\u60dc\u4e0d\u7ba1\u54ea\u4e2a\u5e97\u90fd\u662f\u54c1\u5207\u72b6\u6001\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2024.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6ca1\u6709\u4e70\u90a3\u4e2a\u5b9a\u756a\u7684\u767d\u8272\u604b\u4eba\uff0c\u56e0\u4e3a\u5b9e\u5728\u662f\u6211\u4e0d\u7231\u5403\u3002\u4f46\u662f\u6709\u70b9\u540e\u6094\u5e94\u8be5\u4e70\u8fd9\u4e2a\u96ea\u4eba\u5f62\u72b6\u5de7\u514b\u529b\uff0c\u8fd8\u662f\u5f88\u53ef\u7231\u7684\u554a\u3002\u800c\u4e14\u540e\u9762\u5728\u522b\u5e9c\u4e70\u7684\u624b\u4fe1\u4e00\u70b9\u4e5f\u4e0d\u597d\u5403\uff0c\u65e9\u77e5\u9053\u8fd8\u4e0d\u5982\u767d\u8272\u604b\u4eba\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2031.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u8fd9\u5929\u5750\u7684 Skymark \u7684\u822a\u73ed\u662f pikachu jet\uff0c\u4e0d\u4ec5\u673a\u4f53\u5f88\u53ef\u7231\uff0c\u7eb8\u676f\u4e5f\u5f88\u53ef\u7231\uff0c\u98de\u673a\u4e0a\u7684\u5e7f\u64ad\u4e5f\u4e0d\u505c\u7ed9\u4f60 pikapikachu \ud83d\ude06<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2032.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2033.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2034.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u673a\u4e0a\u53d1\u996e\u6599\u7ed9\u7684\u6c34\u676f\u4e5f\u7279\u522b\u53ef\u7231\uff0c\u6211\u628a\u5b83\u62ff\u7740\u5f53\u540e\u9762\u51e0\u5929\u7684\u6f31\u53e3\u676f\u7528hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2037.jpeg\" alt=\"\"  \/>\n\n\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1112-Sapporo-Fukuoka%20-%2039.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u603b\u4e4b\u5c31\u662f\u5f88\u987a\u5229\u5730\u79bb\u5f00\u672d\u5e4c\u53bb\u4e86\u798f\u5188\u3002<\/p>\n]]>"},{"title":"\u65f6\u96945\u5e74\u7684\u9713\u8679\u65c5\u884c\uff08\u4e00\uff09\u672d\u5e4c\uff08\u4e0a\uff09","link":"https:\/\/zhuzi.dev\/posts\/2024-11-20-travel-sapporo-1\/","pubDate":"Wed, 20 Nov 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-11-20-travel-sapporo-1\/","description":"<p>\u4e0a\u4e00\u6b21\u53bb\u9713\u8679\u662f 2019 \u5e74 12 \u6708\uff0c\u6b63\u597d\u5728\u75ab\u60c5\u524d\u3002\u5176\u5b9e\u53bb\u5e74\u5f00\u653e\u7b7e\u8bc1\u4e4b\u540e\u4e5f\u60f3\u53bb\u6765\u7740\uff0c\u4f46\u662f\u79cd\u79cd\u539f\u56e0\u6ca1\u6709\u80fd\u53bb\uff0c\u4eca\u5e74\u56e0\u4e3a\u4e00\u4e9b\u5951\u673a\u53bb\u4e86\uff0c\u662f\u65f6\u9694 5 \u5e74\u7684\u9713\u8679\u65c5\u6e38\u3002\n\u5177\u4f53\u6765\u8bf4\uff0c\u76f4\u5230 9 \u6708\u4e2d\u65ec\u4e5f\u6ca1\u6709\u7279\u522b\u60f3\u53bb\u7684\uff0c9 \u6708\u4e0b\u65ec\u4eba\u751f\u7b2c\u4e00\u6b21\u6f14\u5531\u4f1a\u62bd\u7968\u62bd\u4e2d\uff0c\u662f\u672d\u5e4c\u86cb\u7684\u9996\u65e5\uff0c11 \u6708 9 \u65e5\u3002\n\u5f53\u65f6\u548c\u51e0\u4f4d\u8ffd\u661f\u8ba4\u8bc6\u7684\u670b\u53cb\u62a5\u544a\u4e86\u4e00\u4e0b\u8fd9\u4e2a\u7ed3\u679c\uff0c\u4e0d\u8fc7\u5f53\u65f6\u60f3\u7684\u5e76\u4e0d\u662f\u4e00\u5b9a\u8981\u53bb\uff0c\u6bd5\u7adf\u8ba2\u673a\u7968\u9152\u5e97\u529e\u7b7e\u8bc1\u7b49\u4e00\u7cfb\u5217\u6d41\u7a0b\u90fd\u5f88\u8d39\u52b2\u3002\n\u4e5f\u60f3\u8fc7\u76f4\u63a5\u5356\u6389\u7968\uff0c\u4e5f\u8bb8\u8fd8\u80fd\u8d5a\u5230\u70b9\u5dee\u4ef7\uff08\u3002\uff09<\/p>","content":"<![CDATA[<p>\u4e0a\u4e00\u6b21\u53bb\u9713\u8679\u662f 2019 \u5e74 12 \u6708\uff0c\u6b63\u597d\u5728\u75ab\u60c5\u524d\u3002\u5176\u5b9e\u53bb\u5e74\u5f00\u653e\u7b7e\u8bc1\u4e4b\u540e\u4e5f\u60f3\u53bb\u6765\u7740\uff0c\u4f46\u662f\u79cd\u79cd\u539f\u56e0\u6ca1\u6709\u80fd\u53bb\uff0c\u4eca\u5e74\u56e0\u4e3a\u4e00\u4e9b\u5951\u673a\u53bb\u4e86\uff0c\u662f\u65f6\u9694 5 \u5e74\u7684\u9713\u8679\u65c5\u6e38\u3002\n\u5177\u4f53\u6765\u8bf4\uff0c\u76f4\u5230 9 \u6708\u4e2d\u65ec\u4e5f\u6ca1\u6709\u7279\u522b\u60f3\u53bb\u7684\uff0c9 \u6708\u4e0b\u65ec\u4eba\u751f\u7b2c\u4e00\u6b21\u6f14\u5531\u4f1a\u62bd\u7968\u62bd\u4e2d\uff0c\u662f\u672d\u5e4c\u86cb\u7684\u9996\u65e5\uff0c11 \u6708 9 \u65e5\u3002\n\u5f53\u65f6\u548c\u51e0\u4f4d\u8ffd\u661f\u8ba4\u8bc6\u7684\u670b\u53cb\u62a5\u544a\u4e86\u4e00\u4e0b\u8fd9\u4e2a\u7ed3\u679c\uff0c\u4e0d\u8fc7\u5f53\u65f6\u60f3\u7684\u5e76\u4e0d\u662f\u4e00\u5b9a\u8981\u53bb\uff0c\u6bd5\u7adf\u8ba2\u673a\u7968\u9152\u5e97\u529e\u7b7e\u8bc1\u7b49\u4e00\u7cfb\u5217\u6d41\u7a0b\u90fd\u5f88\u8d39\u52b2\u3002\n\u4e5f\u60f3\u8fc7\u76f4\u63a5\u5356\u6389\u7968\uff0c\u4e5f\u8bb8\u8fd8\u80fd\u8d5a\u5230\u70b9\u5dee\u4ef7\uff08\u3002\uff09<\/p>\n<p>\u4f46\u4e00\u4f4d\u867d\u7136\u89c1\u8fc7\u51e0\u9762\u4f46\u4e0d\u7b97\u7279\u522b\u719f\u7684\u59b9\u59b9A \u975e\u5e38\u70ed\u60c5\u5730\u8dd1\u6765\u8054\u7cfb\u6211\u60f3\u8981\u7968\uff0c\u5979\u8bf4\u4e0d\u8bba\u662f\u8ddf\u6211\u540c\u884c\u4e00\u8d77\u53bb\u6216\u8005\u76f4\u63a5\u6536\u6211\u7684\u7968\u90fd\u53ef\u4ee5\u3002\n\u5728\u6ca1\u6709\u7279\u522b\u660e\u786e\u56de\u590d\u5982\u4f55\u5904\u7406\u7684\u65f6\u5019\uff0c\u6211\u5f00\u59cb\u5148\u641c\u7d22\u673a\u7968\u9152\u5e97\uff0c\u60f3\u7740\u662f\u5148\u4e86\u89e3\u4e0b\u884c\u60c5\u5427\uff0c\u4ee5\u53ca\u4e0d\u7ba1\u53bb\u4e0d\u53bb\u4e5f\u53ef\u4ee5\u5148\u628a\u9152\u5e97\u8ba2\u7740\u3002\n\u5728\u548c A \u804a\u673a\u9152\u7684\u65f6\u5019\uff0c\u5dee\u4e0d\u591a\u624d\u4e0b\u5b9a\u51b3\u5fc3\u8fd8\u662f\u53bb\u5427\uff0c\u592a\u4e45\u6ca1\u6709\u65c5\u6e38\u4e86\uff0c\u6211\u4e5f\u8bb8\u5f88\u9700\u8981\u8fd9\u6837\u4e00\u6b21\u65c5\u884c\uff0c\u65e0\u8bba\u6700\u521d\u7684\u76ee\u7684\u662f\u4e0d\u662f\u53ea\u662f\u770b\u63a7\u3002<\/p>\n<p>\u56e0\u4e3a\u6f14\u5531\u4f1a\u7684\u65f6\u95f4\u662f\u786e\u5b9a\u7684\uff0c\u6240\u4ee5\u4ee5\u5b83\u4e3a\u951a\u70b9\u4e4b\u540e\uff0c\u5f88\u591a\u4e1c\u897f\u7684\u65f6\u95f4\u5730\u70b9\u53cd\u800c\u4e0d\u7528\u8fc7\u591a\u8003\u8651\u3002<\/p>\n<p>10 \u6708\u5f00\u59cb\u53bb\u529e\u7b7e\u8bc1\uff0c\u4e2d\u65ec\u5de6\u53f3\u5c31\u62ff\u5230\u4e86\u3002\u7b49\u5f85\u7b7e\u8bc1\u7684\u9014\u4e2d\uff0c\u6211\u5f00\u59cb\u60f3\u8ba1\u5212\u66f4\u957f\u7684\u65c5\u884c\uff0c\u6bd5\u7adf\u662f\u65f6\u9694 5 \u5e74\u7684\u9713\u8679\u65c5\u6e38\uff0c\u96be\u5f97\u53bb\u4e86\u4e00\u6b21\uff0c\u4e0d\u8981\u4ec5\u9650\u5728\u672d\u5e4c\uff0c\u6211\u518d\u53bb\u4e00\u4e0b\u522b\u7684\u6211\u8fd8\u6ca1\u6709\u53bb\u8fc7\u7684\u5730\u65b9\u597d\u4e86\u3002\n\u7ecf\u8fc7\u53cd\u590d\u67e5\u673a\u7968\u7b49\u7b49\uff0c\u6700\u540e\u51b3\u5b9a\u540e\u534a\u53bb\u798f\u5188\u73a9\uff0c\u56e0\u4e3a\u6211\u786e\u5b9e\u6ca1\u53bb\u8fc7\u4e5d\u5dde\u3002\n\u540e\u534a\u7684\u90e8\u5206\u662f\u5b8c\u5168\u7684\u4e00\u4e2a\u4eba\u65c5\u884c\uff0c\u59b9\u59b9A \u8981\u5148\u56de\u56fd\u7ee7\u7eed\u4e0a\u73ed\u4e86\u3002<\/p>\n<p>\u603b\u4e4b\uff0c\u8fd8\u662f\u6309\u7167\u6211\u7684\u60ef\u4f8b\u6765\u5199\u6d41\u6c34\u8d26\u4e86\uff0c\u5148\u5199\u4e0a\u534a\u7684\u672d\u5e4c\u7bc7\u3002<\/p>\n<h2 id=\"117--\u665a\u4e0a\u5148\u5230\u4e0a\u6d77\">11.7 \u2708\ufe0f \u665a\u4e0a\u5148\u5230\u4e0a\u6d77<\/h2>\n<p>\u8fd9\u5929\u5b8c\u5168\u53ef\u4ee5\u7b97\u6210\u662f day 0\uff0c\u56e0\u4e3a\u6ca1\u60f3\u5230\u8fc7\u4e86\u8fd9\u51e0\u5e74\uff0c\u73b0\u5728\u662f\u4ece\u4e0a\u6d77\u8f6c\u673a\u53bb\u672d\u5e4c\u7684\u673a\u7968\u6700\u4fbf\u5b9c\u3002\n18 \u5e74\u53bb\u5317\u6d77\u9053\u73a9\u7684\u65f6\u5019\u662f\u4ece\u9999\u6e2f\u98de\u53bb\u4e1c\u4eac\uff0c\u7136\u540e\u5728\u4e1c\u4eac\u8f6c\u673a\u53bb\u51fd\u9986\u8fdb\u5165\u5317\u6d77\u9053\u3002\u4eca\u5e74\u8fd9\u4e2a\u9009\u9879\u4f3c\u4e4e\u6bd4\u4ee5\u524d\u6da8\u4ef7\u592a\u591a\uff0c\u5b8c\u5168\u6253\u4e0d\u8fc7\u4e0a\u6d77\u8f6c\u673a\u3002<\/p>\n<p>\u5348\u996d\u65f6\u95f4\u521a\u8fc7\u5c31\u51fa\u53d1\u53bb\u673a\u573a\uff0c\u5728\u673a\u573a\u548c\u59b9\u59b9A\u6c47\u5408\u7684\uff0c\u60f3\u6765\u4e5f\u8fd8\u86ee\u795e\u5947\uff0c\u5728\u51c6\u5907\u671f\u95f4\u7684\u4e00\u4e2a\u6708\u91cc\u6211\u4eec\u6ca1\u6709\u4eba\u63d0\u8fc7\u8bf4\u8981\u89c1\u4e00\u9762\u786e\u8ba4\u4e00\u4e0b\u7ec6\u8282\u5565\u7684\u3002\n\u66f4\u50cf\u662f\u7eaf\u7cb9\u7684\u7f51\u53cb+\u65c5\u6e38\u642d\u5b50\uff0c\u4e00\u5207\u5728\u5fae\u4fe1\u91cc\u804a\u59a5\u4e86hhhhhh<\/p>\n<p>\u603b\u4e4b\u4e00\u5207\u90fd\u8fd8\u633a\u987a\u5229\u7684\u5148\u5230\u8fbe\u4e86\u4e0a\u6d77\uff0c\u5728\u673a\u573a\u65c1\u8fb9\u7761\u4e00\u665a\uff0c\u7b2c\u4e8c\u5929\u8d76\u65e9\u73ed\u673a\u98de\u672d\u5e4c\u3002<\/p>\n<p>\u56e0\u4e3a\u90fd\u8981\u7ecf\u8fc7\u4e00\u6b21\u4e0a\u6d77\u4e86\uff0c\u5c31\u60f3\u7740\u5728\u4e0a\u6d77\u7684\u665a\u4e0a\u7a0d\u5fae citywalk \u4e00\u4e0b\u3002\n\u6211\u4e5f\u4e0d\u77e5\u9053\u662f\u9694\u4e86\u591a\u5c11\u5e74\u7684\u4e0a\u6d77\uff0c\u5230\u4e86\u5148\u6bd4\u6df1\u5733\u964d\u6e2910\u5ea6\uff0c\u8d76\u7d27\u5957\u4e0a\u51c6\u5907\u7684\u5916\u5957\u3002\n\u51fa\u4e86\u673a\u573a\u5148\u662f\u5750\u5730\u94c1\u53bb\u4e86\u611a\u56ed\u8def\u9644\u8fd1\u8f6c\u4e86\u4e0b\u3002\u8857\u7684\u6c1b\u56f4\u662f\u6211\u5f88\u559c\u6b22\u7684\u90a3\u79cd\u5566\uff0c\u4e0d\u8fc7\u662f\u62d6\u7740\u7bb1\u5b50\u8d70\u7684\uff0c\u8fd8\u662f\u6709\u70b9\u9ebb\u70e6\uff0c\u6ca1\u6709\u7279\u522b\u505c\u7559\u7684\u8d70\u4e86\u4e00\u7ad9\u5730\u94c1\u7ad9\u7684\u8def\u7a0b\u5c31\u79bb\u5f00\u4e86\u3002<\/p>\n<p>\u4e00\u70b9\u70b9\u6108\u56ed\u8def\u9014\u5f84\u7684\u56fe\u7247<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%201.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%209.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2011.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7ee7\u7eed\u5750\u5730\u94c1\u5230\u4e86\u5357\u4eac\u4e1c\u8def\uff0c\u4e34\u65f6\u627e\u4e86\u4e2a\u5bc4\u5b58\u884c\u674e\u7684\u5730\u65b9\uff0c\u8fd9\u4e2a\u662f\u59b9\u59b9A \u76f4\u63a5\u9760\u641c\u7d22\u5c0f\u7ea2\u4e66\u627e\u5230\u7684\uff0c\u8fd9\u79cd\u65f6\u5019\u7684\u5c0f\u7ea2\u4e66\u786e\u5b9e\u6709\u7528\u3002\n\u6ca1\u6709\u7bb1\u5b50\u62d6\u7d2f\u4e4b\u540e\uff0c\u4e45\u8fdd\u5730\u53bb\u4e86\u5916\u6ee9\u770b\u591c\u666f\u3002\u59b9\u59b9\u662f\u4e2a\u5e7f\u4e1c\u4eba\uff0c\u8fde\u4e0a\u6d77\u4e5f\u662f\u7b2c\u4e00\u6b21\u6765\uff0c\u672c\u6765\u6211\u4ee5\u4e3a\u5979\u4e0d\u4f1a\u60f3\u8981\u6765\u5916\u6ee9\u3002\u6211\u6765\u8fc7\u5f88\u591a\u6b21\u4e0a\u6d77\uff0c\u5916\u6ee9\u4e5f\u6765\u5f97\u4e0d\u591a\uff0c\u6bd5\u7adf\u6211\u4f1a\u628a\u5916\u6ee9\u548c\u5de8\u5927\u7684\u4eba\u6d41\u91cf\u90a3\u79cd\u62e5\u6324\u4e0d\u9002\u6302\u94a9\uff0c\u4f46\u65e2\u7136\u59b9\u59b9\u662f\u7b2c\u4e00\u6b21\u6765\uff0c\u90a3\u8fd8\u662f\u53ef\u4ee5\u518d\u6765\u770b\u770b\u7684\u3002<\/p>\n<p>\u5e78\u8fd0\u7684\u662f\uff0c\u8fd9\u6bb5\u65f6\u95f4\u5927\u6982\u7b97\u662f\u65c5\u6e38\u6de1\u5b63\uff08\uff1f\uff0c\u5de5\u4f5c\u65e5\uff0c\u524d\u540e\u90fd\u6ca1\u6709\u4ec0\u4e48\u8282\u5047\u65e5\uff0c\u4e0d\u4e0b\u96e8\uff0c\u80fd\u89c1\u5ea6\u975e\u5e38\u9ad8\uff0c\u4eba\u5b8c\u5168\u4e0d\u7b97\u591a\uff0c\u4f53\u9a8c\u76f8\u5f53\u597d\uff0c\u751a\u81f3\u53ef\u4ee5\u8bf4\u662f\u6211\u6765\u51e0\u6b21\u5916\u6ee9\u91cc\u7684\u6700\u4f73\u4f53\u9a8c\u3002\n\u539f\u6765\u6545\u5730\u91cd\u6e38\u4e5f\u4f1a\u6709\u60ca\u559c\u3002<\/p>\n<p>\u8fd9\u6b21\u770b\u5230\u7684\u5916\u6ee9\u591c\u666f\u4e5f\u975e\u5e38\u4e0d\u9519\uff0c\u6574\u4e2a\u5916\u6ee9\u90fd\u6709\u79cd\u6d0b\u6c14\u7e41\u534e\u7684\u611f\u89c9\uff0c\u53e6\u5916\u4e5f\u610f\u8bc6\u5230\u548c\u7ef4\u6e2f\u7684\u4e0d\u540c\uff0c\u5916\u6ee9\u591f\u5f00\u9614\uff0c\u89c6\u91ce\u5b8c\u5168\u6ca1\u6709\u906e\u6321\u7684\u611f\u89c9\u5f88\u8212\u9002\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2018.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2023.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2031.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2039.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2041.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5230\u5916\u6ee9\u7684\u65f6\u5019\uff0c\u59b9\u59b9\u5f00\u59cb\u62ff\u51fa\u67ef\u8fbe\u7684\u80f6\u5377\u76f8\u673a\uff08\u5979\u8bf4\u662f\u521d\u7ea7\u7684\u50bb\u74dc\u76f8\u673a\uff09\u548c\u65e7 iphone \u62cd\u7167\uff08\u662f\u4e3a\u4e86\u8ffd\u6c42\u67d0\u4e9b\u7167\u7247\u6548\u679c\u7279\u610f\u4e70\u7684\u65e7\u624b\u673a\uff09\uff0c\u6211\u4e0d\u592a\u786e\u5b9a\u8fd9\u662f\u90a3\u79cd\u559c\u6b22\u6444\u5f71\u7684\u6587\u9752\u6c14\u8d28\uff0c\u8fd8\u662f\u5355\u7eaf\u5c0f\u7ea2\u4e66\u7684\u90a3\u79cd\u8ffd\u6c42\u51fa\u7247\uff0c\u4e0d\u8fc7\u5979\u5f00\u5fc3\u5c31\u597dwww<\/p>\n<p>\u5728\u5916\u6ee9\u901b\u5b8c\u5c31\u53bb\u673a\u573a\u9644\u8fd1\u7684\u5feb\u6377\u9152\u5e97\u51d1\u5408\u4e86\u4e00\u665a\u4e0a\u3002\u5c31\u771f\u7684\u662f\u5f88\u4fbf\u5b9c\u7684\u9526\u6c5f\u4e4b\u661f\uff08\u4e00\u4e2a\u665a\u4e0a\u4e24\u4e2a\u4eba\u624d180\uff09\uff0c\u6761\u4ef6\u771f\u7684\u53ea\u80fd\u8bf4\u51d1\u5408\u3002\u8fd8\u597d\u6211\u4eec\u4fe9\u90fd\u5c5e\u4e8e\u53ef\u4ee5\u51d1\u5408\u7684\u7c7b\u578bhhhhh<\/p>\n<h2 id=\"118--\u4e0a\u6d77\u5230\u672d\u5e4c\u65f6\u8ba1\u53f0\u5927\u901a\u516c\u56ed\u4e70\u5468\u8fb9\u70e4\u8089\">11.8 \u2708\ufe0f \u4e0a\u6d77\u5230\u672d\u5e4c\uff0c\u65f6\u8ba1\u53f0+\u5927\u901a\u516c\u56ed+\u4e70\u5468\u8fb9+\u70e4\u8089<\/h2>\n<p>\u4e00\u5927\u65e9\u5728\u6caa\u56fd\u673a\u573a\u91cc\uff0c\u5df2\u7ecf\u770b\u5230\u5f88\u591a\u540c\u62c5\u96ea\u59e8\uff0c\u56e0\u4e3a\u770b\u5230\u6bd4\u5982 Labo \u63a7\u5305\u3001\u4e11\u5a03\u75db\u5305 etc\u3002\n\u771f\u7684\u6df1\u5207\u611f\u53d7\u5230\u73b0\u5728\u662f\u4e2a\u559c\u6b22\u5c55\u793a\u81ea\u5df1\u559c\u597d\u7684\u65f6\u4ee3\uff0c\u6211\u53ef\u80fd\u4e50\u4e8e\u5728\u7f51\u4e0a\u5c55\u793a\uff0c\u4f46\u73b0\u5b9e\u4e2d\u662f\u5f88\u5c11\u7279\u610f\u5938\u5f20\u5730\u53bb\u5916\u9732\u559c\u597d\u7684\u4eba\uff0c\u4e00\u4e2a\u5c0f\u94a5\u5319\u6263\u6216\u5427\u5527\u8fd9\u79cd\u53ef\u4ee5\u63a5\u53d7\uff0c\u5927\u9762\u79ef\u7684\u75db\u5305\u75db\u5a03\u5b9e\u5728\u592a\u7f9e\u803b\u4e86\ud83d\ude02<\/p>\n<p>\u5728\u8868\u9762\u4e0a\u6211\u6700\u5927\u7684\u52aa\u529b\u662f\u4e70\u4e86\u4ef6\u7d2b\u8272\u7684\u5916\u5957\uff0c\u548c\u7070\u7c89\u8272\u7684\u683c\u5b50\u88e4\uff08\u5927\u9762\u79ef\u7c89\u8272\u7684\u8863\u670d\u6ca1\u627e\u5230\u5408\u5fc3\u610f\u7684\uff09\uff0c\u75db\u5305\u662f\u4e0d\u53ef\u80fd\u7684\u3002<\/p>\n<p>\u5728\u767b\u673a\u53e3\u9644\u8fd1\u7684\u65f6\u5019\u5728\u673a\u573a\u5403\u4e86\u7897\u8d8a\u5357\u7c89\u5f53\u65e9\u996d\uff0c\u53d1\u51fa\u6765\u662f\u60f3\u8bf4\u5b83\u4e0d\u592a\u597d\u5403\uff0c\u53c8\u8fd8\u633a\u8d35\u7684\uff0c\u5982\u679c\u6709\u522b\u7684\u9009\u62e9\uff0c\u6700\u597d\u522b\u5403\ud83d\ude10 \uff08\u56e0\u4e3a\u8d8a\u5357\u7c89\u5e94\u8be5\u662f\u5f88\u8584\u7684\uff0c\u8fd9\u5bb6\u5e97\u505a\u5f97\u975e\u5e38\u4e0d\u6b63\u5b97\uff0c\u7c89\u5f88\u539a\uff0c\u66f4\u50cf\u7cbf\u6761\uff09<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1107-Shanghai%20-%2045.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5f53\u5730\u65f6\u95f4\u662f\u5927\u6982 12 \u70b9\u591a\u5f88\u51c6\u65f6\u7684\u5230\u8fbe\u4e86\u672d\u5e4c\uff0c\u5165\u5883\u4e4b\u7c7b\u7684\u4e5f\u90fd\u4e0d\u592a\u591a\u6392\u961f\uff0c\u975e\u5e38\u987a\u5229\u7684\u5927\u6982 2 \u70b9\u534a\u5c31\u5148\u5230\u9152\u5e97\u628a\u884c\u674e\u653e\u4e0b\u4e86\u3002\u7b2c\u4e00\u5929\u7684\u9152\u5e97\u662f\u8ba2\u5728\u4e86\u672d\u5e4c\u7ad9\u6b65\u884c\u7684\u8ddd\u79bb\uff0c\u79bb\u5317\u6d77\u9053\u5927\u5b66\u4e5f\u975e\u5e38\u8fd1\uff0c\u8fd9\u4e2a\u9152\u5e97\u662f\u59b9\u59b9\u9009\u7684\uff0c\u5979\u975e\u5e38\u671f\u5f85\u53bb\u5317\u6d77\u9053\u5927\u5b66\u901b\u901b\u3002<\/p>\n<h3 id=\"\u672d\u5e4c\u65f6\u8ba1\u53f0\">\u672d\u5e4c\u65f6\u8ba1\u53f0<\/h3>\n<p>\u63d0\u524d\u9884\u7ea6\u4e865\u70b9\u534a\u53bb\u4e70\u63a7\u7684\u5468\u8fb9\uff0c\u6240\u4ee5\u65f6\u95f4\u8fd8\u65e9\uff0c\u4e8e\u662f\u5148\u53bb\u4e86\u6211\u4e0a\u6b21\u6765\u672d\u5e4c\u5c31\u6709\u70b9\u60f3\u53bb\u4f46\u6ca1\u6709\u53bb\u6210\u7684\u5c0f\u666f\u70b9\uff0c\u672d\u5e4c\u65f6\u8ba1\u53f0\uff0c\u662f\u5c11\u6570\u4fdd\u5b58\u81f3\u4eca\u7684\u7f8e\u5f0f\u5efa\u7b51\uff0c\u6700\u521d\u5176\u5b9e\u662f\u5317\u6d77\u9053\u5927\u5b66\uff08\u5f53\u65f6\u53eb\u672d\u5e4c\u519c\u5b66\u6821\uff09\u7684\u6f14\u6b66\u573a\uff0c\u4e5f\u5c31\u662f\u7ec3\u4e60\u6b66\u827a\u7684\u5730\u65b9\uff0c\u73b0\u5df2\u5217\u4e3a\u91cd\u8981\u6587\u5316\u8d22\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2017.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2019.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2020.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2022.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5728\u65f6\u8ba1\u53f0\u91cc\u901b\u7684\u65f6\u5019\u62cd\u5230\u4e86\u4e00\u4e9b\u96ea\u666f\u2744\ufe0f\u4e2d\u7684\u7ea2\u53f6\ud83c\udf41\u5f88\u6f02\u4eae\u3002<\/p>\n<p>\u8bf4\u8d77\u6765\u611f\u89c9\u8fd9\u6b21\u4e5f\u7b97\u5f88\u6709\u8fd0\u6c14\uff0c\u672c\u6765\u89c9\u5f9711\u6708\u4e0a\u65ec\u8fd9\u79cd\u65f6\u95f4\uff0c\u672d\u5e4c\u80af\u5b9a\u8fd8\u6ca1\u4e0b\u96ea\uff0c\u5e76\u4e14\u67e5\u5f80\u5e74\u7684\u7ea2\u53f6\u65f6\u95f4\u4e5f\u662f10\u6708\u5e95\u66f4\u4f73\uff0c\u6240\u4ee5\u9884\u671f\u8fd9\u4e2a\u65f6\u671f\u7684\u672d\u5e4c\u5e94\u8be5\u6ca1\u6709\u96ea\u4e5f\u6ca1\u6709\u7ea2\u53f6\uff0c\u6b63\u597d\u5904\u4e8e\u4e24\u4e2a\u5b63\u8282\u4ea4\u66ff\u7684\u4e2d\u95f4\uff0c\u5927\u6982\u4ec0\u4e48\u90fd\u6ca1\u6709\uff0c\u5f88\u5e73\u5e38\u5f88\u666e\u901a\u7684\u6837\u5b50\u3002<\/p>\n<p>\u51fa\u53d1\u4e4b\u524d\u4e00\u76f4\u5728\u5173\u6ce8\u672d\u5e4c\u5929\u6c14\uff0c\u603b\u5e0c\u671b\u81f3\u5c11\u7ea2\u53f6\u518d\u665a\u4e00\u70b9\u518d\u6162\u4e00\u70b9\u8d70\u3002\u4ee4\u4eba\u610f\u5916\u7684\u662f\u4eca\u5e74\u672d\u5e4c\u7684\u521d\u96ea\u51fa\u73b0\u5728\u4e8610\u6708\u5e95\uff0c\u4e0d\u7981\u8ba9\u4eba\u53c8\u591a\u4e86\u4e00\u4efd\u671f\u5f85\uff0c\u96be\u905311\u6708\u4e0a\u65ec\u4e5f\u80fd\u770b\u5230\u96ea\u3002<\/p>\n<p>\u65b0\u95fb\u62a5\u9053\u672d\u5e4c\u521d\u96ea\u867d\u7136\u6bd4\u53bb\u5e74\u65e9\u4e8620\u5929\uff0c\u4f46\u53ef\u80fd\u66f4\u50cf\u662f\u51b0\u96f9\uff0c\u800c\u4e14\u4e3b\u8981\u662f\u5e02\u90ca\u7684\u5c71\u4e0a\u3002\u5c31\u5728\u51fa\u53d1\u524d\u4e24\u5929\u768411\u67085\u53f7\uff0c\u672d\u5e4c\u5e02\u533a\u4e0b\u8d77\u4e86\u5f88\u5927\u7684\u96ea\uff0c\u6211\u4f1a\u8ba4\u4e3a\u8fd9\u624d\u662f\u672d\u5e4c\u7684\u521d\u96ea\u3002\u9ed8\u9ed8\u671f\u5f85\u96ea\u8fd8\u4e0d\u8981\u592a\u5feb\u5316\uff0c\u7b49\u62118\u53f7\u5230\u8fbe\u80fd\u770b\u4e24\u773c\u5c31\u597d\u3002<\/p>\n<p>\u6700\u521d\u7684\u671f\u671b\u662f\u6ca1\u6709\u96ea\u6ca1\u6709\u67ab\u53f6\uff0c\u6ca1\u60f3\u5230\u7adf\u7136\u80fd\u770b\u5230\u96ea\u666f\u91cc\u7684\u67ab\u53f6\uff0c\u5df2\u7ecf\u89c9\u5f97\u975e\u5e38\u5e78\u8fd0\u3002\uff08\u751a\u81f3\u4f1a\u6d6a\u6f2b\u5730\u60f3\uff0c\u26c4\ufe0f\u7ed9\u672d\u5e4c\u5e26\u6765\u4e86\u8fd9\u573a\u521d\u96eawww\uff09<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2021.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2024.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2025.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u5927\u901a\u516c\u56ed\">\u5927\u901a\u516c\u56ed<\/h3>\n<p>\u65f6\u8ba1\u53f0\u4e0d\u82b1\u592a\u591a\u65f6\u95f4\uff0c\u65f6\u95f4\u4f9d\u7136\u8fd8\u7b97\u65e9\uff0c\u5c31\u6253\u7b97\u53bb\u627e\u5730\u65b9\u5403\u4e2a\u996d\u4e4b\u540e\u518d\u53bb\u672d\u5e4c\u86cb\u4e70\u5468\u8fb9\u3002\u4e2d\u996d\u5176\u5b9e\u6ca1\u6709\u5403\u3002<\/p>\n<p>\u9014\u7ecf\u5927\u901a\u516c\u56ed\u7684\u65f6\u5019\uff0c\u53d1\u73b0\u5f88\u6f02\u4eae\uff0c\u53c8\u662f\u4e00\u901a\u62cd\u7167wwww<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2013.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2028.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2029.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2031.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2032.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2033.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2034.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6709\u4eba\u5806\u4e86\u4e2a\u5c0f\u96ea\u4eba\u26c4\ufe0f\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2035.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2037.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2039.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2040.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2041.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6ee1\u5730\u9ec4\u53f6\u4e5f\u975e\u5e38\u6f02\u4eae\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2042.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u867d\u7136\u4e0b\u8fc7\u96ea\u7684\u8def\u9762\u5f88\u5bb9\u6613\u6253\u6ed1\uff0c\u4f46\u8fd9\u4e00\u5e26\u516c\u56ed\u7684\u96ea\u666f\u771f\u7684\u633a\u6f02\u4eae\u7684\u3002\u8fc7\u4e24\u5929\u96ea\u5316\u4e86\u4e4b\u540e\uff0c\u8fd9\u4e2a\u5927\u901a\u516c\u56ed\u4e5f\u5f88\u597d\u770b\uff0c\u57ce\u5e02\u4e2d\u5fc3\u6709\u8fd9\u4e48\u4e00\u4e2a\u5927\u516c\u56ed\u8fd8\u633a\u60ec\u610f\u7684\ud83d\ude0c<\/p>\n<h3 id=\"\u997a\u5b50\u5236\u9020\u6240\">\u997a\u5b50\u5236\u9020\u6240<\/h3>\n<p>\u6b65\u884c\u53bb\u4e86\u72f8\u5c0f\u8def\u8857\u627e\u5403\u7684\uff0c\u5927\u6982\u5dee\u4e0d\u591a4\u70b9\u624d\u7ec8\u4e8e\u8fdb\u4e86\u4e00\u5bb6\u5e97\uff0c\u53eb\u997a\u5b50\u5236\u9020\u6240\u3002\u867d\u7136\u6709\u70b9\u5947\u602a\u5728\u5317\u6d77\u9053\u7b2c\u4e00\u9910\u5403\u997a\u5b50\ud83d\ude02\uff0c\u4f46\u6211\u89c9\u5f97\u8fd9\u5bb6\u5e97\u7684\u997a\u5b50\u771f\u633a\u597d\u5403\u7684\uff0c\u5f88\u5927\u4e00\u4e2a\uff0c\u76ae\u8fd8\u8584\uff0c\u9985\u6599\u5145\u8db3\uff0c\u53e6\u5916\u70b9\u7684\u70b8\u9e21\u4e5f\u975e\u5e38\u597d\u5403\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2044.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8d34\u4e00\u4e2a\u997a\u5b50\u5236\u9020\u6240\u7684\u7f51\u7ad9\uff1a <a href=\"https:\/\/sapporo-gyoza.jp\/shop_tnk.php\">https:\/\/sapporo-gyoza.jp\/shop_tnk.php<\/a><\/p>\n<p>\u63d2\u5165\u8bf4\u4e00\u4e0b\uff0c\u4e0b\u5348\u672c\u6765\u770b\u5230\u67d0\u4f50\u5728\u63a8\u4e0a\u53d1\u4e86\u4e00\u5f20\u6d77\u9c9c\u4e3c\u7684\u7167\u7247\uff0c\u5f53\u65f6\u7684\u60f3\u6cd5\u53ea\u662f\uff1a\u54e6\uff0c\u770b\u8d77\u6765\u4f60\u4eec\u96ea\u4eba\u5df2\u7ecf\u5230\u672d\u5e4c\u4e86\u3002\u2b07\ufe0f<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e00\u76f4\u5230\u665a\u4e0a\u624d\u540e\u77e5\u540e\u89c9\u53d1\u73b0\u8fd9\u5bb6\u6d77\u9c9c\u4e3c\u4e13\u5356\u5e97\u5c31\u5728\u997a\u5b50\u5236\u9020\u6240\u7684\u659c\u5bf9\u9762\uff0c\u5403\u5b8c\u997a\u5b50\u51fa\u6765\u7684\u65f6\u5019\u6211\u770b\u5230\u8fc7\uff0c\u4f46\u662f\u6ca1\u5bf9\u4e0a\u53f7\u3002<\/p>\n<p>\u665a\u4e0a\u518d\u6b21\u7ecf\u8fc7\u8fd9\u5bb6\u5e97\u7684\u65f6\u5019\uff0c\u53d1\u73b0\u5927\u6392\u957f\u961f\uff0c\u8fd9\u4e2a\u60c5\u51b5\u6301\u7eed\u4e86\u597d\u591a\u5929\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2060.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u9519\u5931\u4e86\u4e00\u4e2a\u63d0\u524d\u6253\u5361\u7231\u8c46\u540c\u6b3e\u7684\u673a\u4f1awwww\ud83e\udd23<\/p>\n<h3 id=\"\u4e70\u63a7\u5468\">\u4e70\u63a7\u5468<\/h3>\n<p>\u5403\u5b8c\u997a\u5b50\u5c31\u5750\u5730\u94c1\u53bb\u4e86\u672d\u5e4c\u86cb\uff0c\u5176\u5b9e\u603b\u5171\u4e5f\u53ea\u9700\u8981\u534a\u4e2a\u5c0f\u65f6\u5c31\u80fd\u5230\u8fbe\uff0c\u867d\u7136\u5176\u4e2d\u670910-15\u5206\u949f\u662f\u4ece\u5730\u94c1\u7ad9\u51fa\u6765\u6b65\u884c\u5230\u86cb\u3002<\/p>\n<p>\u5927\u6982\u662f\u63d0\u524d\u4e00\u5468\u5f00\u59cb\u9884\u7ea6\u65f6\u95f4\uff0c\u6bcf\u4e2a\u4eba\u6bcf\u5929\u53ea\u80fd\u9884\u7ea6\u4e00\u4e2a\u65f6\u95f4\u6bb5\uff0830\u5206\u949f\uff09\uff0c\u6211\u4e3a\u4e86\u4fdd\u9669\uff0c8\u53f7\u548c9\u53f7\u5404\u9884\u7ea6\u4e86\u4e00\u4e2a\u65f6\u95f4\u6bb5\uff0c\u662f\u62c5\u5fc38\u53f7\u98de\u673a\u665a\u70b9\u6216\u8005\u53d1\u751f\u5176\u4ed6\u4e8b\u60c5\u6211\u8d76\u4e0d\u4e0a\uff0c\u90a3\u62119\u53f7\u4e00\u5b9a\u53ef\u4ee5\u8d76\u4e0a\u30028\u53f7\u4e70\u6210\u529f\u4e86\uff0c9\u53f7\u53ef\u4ee5\u4e0d\u53bb\u6216\u8005\u60f3\u8ffd\u52a0\u4e5f\u53ef\u4ee5\u518d\u6b21\u8fdb\u573a\u3002<\/p>\n<p>\u672d\u5e4c\u5df2\u7ecf4\u70b9\u5c31\u5929\u9ed1\u4e86\uff0c\u6240\u4ee5\u5403\u5b8c\u997a\u5b50\u51fa\u6765\u5b8c\u5168\u662f\u665a\u4e0a\u4e86\uff0c\u5230\u672d\u5e4c\u86cb\u7684\u65f6\u5019\uff0c\u5929\u8272\u8001\u4ee5\u4e3a\u662f7\u30018\u70b9\u4e86\uff0c\u5176\u5b9e\u624d5\u70b9\u591a\ud83d\ude02<\/p>\n<p>\u6709\u70b9\u96ea\u666f\u7684\u672d\u5e4c\u86cb\u4e5f\u8fd8\u633a\u597d\u770b\u7684\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2046.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2047.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2049.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5468\u8fb9\u552e\u5356\u573a\u8fd9\u5929\u53ea\u5f00\u4e86\u4e09\u5206\u4e4b\u4e00\uff0c\u4ed8\u94b1\u662f\u51e0\u4e4e\u6240\u6709\u652f\u4ed8\u65b9\u5f0f\u90fd\u652f\u6301\u3002\u4ee5\u53ca\u5b83\u5356\u7684\u65b9\u5f0f\u662f\u4f60\u76f4\u63a5\u7ed9staff \u4e00\u4e2a\u4e00\u4e2a\u62a5\u4f60\u8981\u4ec0\u4e48\uff0c\u5979\u4e00\u4ef6\u4e00\u4ef6\u53d6\uff0c\u786e\u8ba4\u6570\u91cf\u6700\u540e\u624d\u4ed8\u6b3e\u3002\u4e00\u4e2a\u4eba\u7684\u8d2d\u4e70\u65f6\u95f4\u5176\u5b9e\u4f1a\u82b1\u5f97\u6709\u70b9\u957f\uff0c\u6240\u4ee5\u624d\u5f00\u4e86\u5f88\u591a\u4e2acounter\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2051.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7ea2\u8272\u5361\u8f66\u4ece\u4e1c\u4eac\u5f00\u6765\u672d\u5e4c\uff0c\u540e\u9762\u53c8\u5f00\u53bb\u4e86\u540d\u53e4\u5c4b\uff0c\u539f\u6765\u771f\u7684\u662f\u4e00\u8def\u5f00\u5230\u5404\u4e2a\u5de1\u6f14\u7684\u5730\u65b9\uff0c\u771f\u7684\u662f\u7ed9\u7c89\u4e1d\u6253\u5361\u73a9\u7684\uff08\u5e94\u8be5\u4e5f\u540c\u65f6\u5728\u8fd0\u8f93\u6f14\u5531\u4f1a\u76f8\u5173\u7684\u7269\u8d44\u5427\uff09\uff0c\u6709\u70b9\u571f\u53c8\u6709\u70b9\u597d\u7b11wwww\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2053.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u4e70\u7684\u4e1c\u897f\u5982\u56fe\u2b07\ufe0f \u5176\u5b9e\u540e\u6765\u89c9\u5f97\u6211\u4e0d\u592a\u9700\u8981\u4e70\u6247\u5b50\uff0c\u5e94\u8be5\u591a\u4e70\u4e00\u4e2a\u624b\u706f\u3002\u518d\u4ee5\u53ca\u8fd8\u6709\u4e00\u4ef6\u536b\u8863\u6ca1\u62cd\u8fdb\u6765\uff0c\u56de\u5bb6\u540e\u6df1\u5733\u964d\u6e29\u4e86\u5728\u5bb6\u7a7f\uff0c\u89c9\u5f97\u8fd8\u633a\u597d\u7a7f\u7684\u3002\u603b\u4e4b\u73b0\u5728\u89c9\u5f97\u80fd\u5728\u751f\u6d3b\u91cc\u7528\u7684\u5468\u8fb9\u6700\u597d\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2055.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u626d\u86cb\u5e97\u6210\u5409\u601d\u6c57\u70e4\u8089\">\u626d\u86cb\u5e97+\u6210\u5409\u601d\u6c57\u70e4\u8089<\/h3>\n<p>\u4e70\u5b8c\u5468\u8fb9\u5148\u56de\u4e86\u9152\u5e97 checkin \u4ee5\u53ca\u653e\u4e0b\u624b\u91cc\u591a\u4f59\u7684\u4e1c\u897f\u3002\u4f11\u606f\u4e86\u4e00\u9635\u52307\u70b9\u591a\u53c8\u51fa\u95e8\uff0c\u6253\u7b97\u7ee7\u7eed\u901b\u901b\u72f8\u5c0f\u8def\u5546\u5e97\u8857\uff0c\u7136\u540e\u665a\u70b9\u53bb\u5403\u6210\u5409\u601d\u6c57\u70e4\u8089\u3002<\/p>\n<p>\u8fd9\u6b21\u662f\u59b9\u59b9\u7ed9\u6211\u79d1\u666e\u4e86\uff0c\u73b0\u5728\u6709\u5f88\u591a\u4e13\u95e8\u7684\u626d\u86cb\u5e97\uff0c\u6709\u975e\u5e38\u975e\u5e38\u591a\u54c1\u7c7b\u7684\u626d\u86cb\uff0c\u800c\u4e14\u5e94\u8be5\u65f6\u5e38\u6709\u66f4\u65b0\uff0c\u6709\u5f88\u591a\u5f88\u591a\u53ef\u7231\u7684\u5c0f\u73a9\u610f\u513f\uff0c\u771f\u7684\u975e\u5e38\u597d\u6d88\u78e8\u65f6\u95f4\u548c\u786c\u5e01www<\/p>\n<p>\u665a\u4e0a\u7ecf\u8fc7\u5927\u901a\u516c\u56ed\uff0c\u7535\u89c6\u5854\u6709\u4e00\u4e9blight up\uff0c\u4f46\u662f\u516c\u56ed\u91cc\u770b\u7740\u5f88\u660e\u663e\u662f\u706f\u9970\u7684\u533a\u57df\u90fd\u8fd8\u6ca1\u6709\u70b9\u4eae\uff0c\u5927\u6982\u662f\u898111\u6708\u4e2d\u4e0b\u65ec\u624d\u5f00\u59cb\u5723\u8bde\u88c5\u9970\u5427\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2056.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u626d\u86cb\u5e97\u91cc\u7684\u4e1c\u897f\u771f\u7684\u597d\u53ef\u7231\ud83d\ude0d<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2058.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fd9\u4e2a\u5317\u6d77\u9053\u9650\u5b9a\uff0c\u5f88\u60f3\u8981\u90a3\u53ea\u5c0f\u96ea\u4eba\uff0c\u53ef\u60dc\u53ea\u62bd\u5230\u4e86\u7b2c\u4e8c\u4e2a\u5927\u7c73\/\u7cbe\u7c73\ud83d\ude06<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2059.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8d70\u53bb\u70e4\u8089\u5e97\u7684\u65f6\u5019\u770b\u5230\u4e86\u4e0d\u5c11\u8fd9\u79cd\u65e0\u6599\u6848\u5185\u6240\u3002\u4e0d\u77e5\u9053\u662f\u4e0d\u662f\u6211\u4ee5\u524d\u6ca1\u6ce8\u610f\u8fd8\u662f\u771f\u7684\u4ee5\u524d\u6ca1\u6709\u8fd9\u4e48\u591a\u3002\u3002\u3002\u3002\u3002\uff08\u522b\u8fdb\uff0c\u662f\u98ce\u4fd7\u4e1a\u62c9\u76ae\u6761\u7684<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2061.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5173\u4e8e\u70e4\u8089\u5e97\uff0c\u6211\u7684\u529f\u8bfe\u6ca1\u505a\u8db3\uff0c\u6211\u552f\u4e00\u7684\u5370\u8c61\u6765\u81ea\u4e8e\u5b64\u72ec\u7684\u7f8e\u98df\u5bb6\uff0c\u4e94\u90ce\u66fe\u7ecf\u5728\u672d\u5e4c\u5403\u8fc7\u3002\u4ee5\u53ca\u6211\u5929\u771f\u7684\u4ee5\u4e3a\u6210\u5409\u601d\u6c57\u70e4\u8089\u662f\u5e97\u5bb6\u7684\u540d\u5b57\u3002\n\u6240\u4ee5\u751a\u81f3\u6ca1\u6709\u591a\u67e5\u67e5\u5c31\u968f\u4fbf\u5728\u5730\u56fe\u4e0a\u770b\u7740\u5b9a\u4e86\u4e00\u5bb6\u5e97\uff0c\u5c31\u662f\u90a3\u5bb6\u6700\u7f51\u7ea2\u7684\u3060\u308b\u307e\u3002\uff08<a href=\"https:\/\/sapporo-jingisukan.info\/main\">\u7f51\u5740<\/a>\uff09\n\u7ed3\u679c\u6392\u961f\u7b49\u4f4d\u7b49\u4e86\u4e00\u4e2a\u591a\u5c0f\u65f6\u624d\u5403\u4e0a\u3002<\/p>\n<p>\u8bf4\u8d77\u6765\u5b83\u7684\u5e97\u4e5f\u90fd\u4e0d\u5927\uff0c\u6240\u6709\u90fd\u662f\u67dc\u53f0\u5ea7\u4f4d\uff0c\u7136\u540e\u540e\u9762\u9760\u5899\u7684\u4e00\u6392\u5ea7\u4f4d\u5c31\u662f\u7ed9\u7b49\u4f4d\u7684\u4eba\u5750\u7684\u3002\u76f8\u5f53\u4e8e\u7b49\u4f4d\u7684\u4eba\u4e5f\u95fb\u4e86\u4e00\u4e2a\u5c0f\u65f6\u522b\u4eba\u5403\u996d\u7684\u70e4\u8089\u9999\u624d\u80fd\u5403\u4e0a\ud83d\ude02\n\u5e78\u597d\u4e0d\u662f\u5728\u5bd2\u98ce\u4e2d\u7b491\u4e2a\u5c0f\u65f6\u5427\u3002<\/p>\n<p>\u7b49\u4f4d\u7684\u90a3\u4e00\u4e2a\u5c0f\u65f6\u91cc\u6211\u624d\u5728\u5c0f\u7ea2\u4e66\u4e0a\u91cd\u65b0\u641c\u7d22\u4e86\u4e00\u4e0b\uff0c\u624d\u7a81\u7136\u604d\u7136\u5927\u609f\u6210\u5409\u601d\u6c57\u4e0d\u662f\u5e97\u5bb6\u7684\u540d\u5b57\uff0c\u662f\u4e00\u4e2a\u7c7b\u522b\uff0c\u7528\u8fd9\u79cd\u94c1\u76d8\u70e4\u8089\u7684\u5e97\u90fd\u53eb\u6210\u5409\u601d\u6c57\ud83d\ude02\ud83d\ude02\ud83d\ude02\n\u7136\u540e\u4e0d\u5c11\u4eba\u90fd\u8bf4\u3060\u308b\u307e\u4e0d\u597d\u5403\uff0c\u9700\u8981\u907f\u96f7\u5565\u7684\uff0c\u63a8\u8350\u5176\u4ed6\u7684A\/B\/C\u5e97\u3002\u5341\u5206\u5c34\u5c2c\u5730\u89c9\u5f97\u53ef\u80fd\u786e\u5b9e\u9009\u9519\u5e97\u4e86\u3002\u4f46\u662f\u90fd\u5df2\u7ecf\u5728\u6392\u961f\u4e86\uff0c\u8fd8\u662f\u8bd5\u4e00\u4e0b\u518d\u8bf4\u5427\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1108-Sapporo%20-%2064.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u5b9e\u5403\u7684\u8bdd\u6211\u89c9\u5f97\u8fd8\u633a\u597d\u5403\u7684\uff08\u5f88\u597d\u517b\u6d3b\uff0c\u5bf9\u53e3\u5473\u4e0d\u654f\u611f\uff09\uff0c\u7279\u522b\u662f\u70e4\u8fc7\u7684\u6d0b\u8471\u597d\u751c\uff0c\u5927\u8471\u597d\u9999\uff0c\u7136\u540e\u8089\u7684\u8638\u6599\u8c03\u5f97\u5f88\u597d\u5403\uff0c\u7279\u522b\u4e0b\u996d\u3002\n\u6211\u548c\u59b9\u59b9\u5927\u6982\u552f\u4e00\u4e0d\u6ee1\u7684\u662f\u8d35\u548c\u4efd\u91cf\u592a\u5c0f\u3002\u603b\u7684\n\u4e0a\u56fe\u8fd9\u4e48\u4e00\u76d8\u4e09\u7247\u8089\u5c31\u89812k\u65e5\u5143\u7684\u6837\u5b50\u3002\u4e00\u4e2a\u5927\u80c3\u4e00\u70b9\u7684\u4eba\u60f3\u8981\u5403\u9971\u611f\u89c9\u53ef\u80fd\u8981\u54031w\u65e5\u5143\u3002\n\u6211\u8ddf\u59b9\u59b9\u90fd\u89c9\u5f97\u5c1d\u5c1d\u5dee\u4e0d\u591a\u5c31\u7b97\u4e86\uff0c\u56de\u53bb\u7684\u65f6\u5019\u518d\u53bb\u4fbf\u5229\u5e97\u52a0\u9910hhhhh<\/p>\n<p>\u867d\u7136\u70e4\u8089\u4e0d\u592a\u5c3d\u5982\u4eba\u610f\uff0c\u4f46\u4e5f\u7b97\u4f53\u9a8c\u8fc7\u4e86\uff0c\u4e5f\u660e\u767d\u5230\u4e86\u4ec0\u4e48\u662f\u6210\u5409\u601d\u6c57\u70e4\u8089\ud83d\ude02<\/p>\n<p>\u771f\u7684\u60f3\u5de1\u793c\u5b64\u72ec\u7684\u7f8e\u98df\u5bb6\u91cc\u5403\u7684\u90a3\u5bb6\u5e97\uff0c\u641c\u7d22\u5230\u4e86\u4e00\u7bc7\u53ef\u4ee5\u53c2\u8003\u7684\uff1a <a href=\"https:\/\/eat2323.blogspot.com\/2023\/03\/blog-post_29.html\">https:\/\/eat2323.blogspot.com\/2023\/03\/blog-post_29.html<\/a><\/p>\n<blockquote>\n<p>\uff08\u53d1\u73b0\u4e0a\u9762\u8fd9\u4e2ablog \u91cc\u7684\u65e5\u672c\u65c5\u884c\u8bb0\u5f55\u76f8\u5f53\u4e4b\u4e30\u5bcc\uff0c\u535a\u4e3b\u662f\u53f0\u6e7e\u4eba\uff0c\u4e0d\u65f6\u8fd8\u662f\u89c9\u5f97\u53f0\u6e7e\u4eba\u5199\u7684\u653b\u7565\u53ef\u53c2\u8003\u6027\u66f4\u5f3a\uff0c\u5c0f\u7ea2\u4e66\u4e0a\u7684\u67d0\u4e9b\u63a8\u8350\u603b\u89c9\u5f97\u662f\u8425\u9500\u7684\u6982\u7387\u5927\u8fc7\u771f\u5b9e\u611f\u53d7\uff0c\u4ee5\u53ca\u7528\u8bcd\u7528\u8bed\u559c\u6b22\u5938\u5f20\u548c\u6781\u7aef\uff0c\u56e0\u4e3a\u4e00\u822c\u6765\u8bf4\u8fd9\u6837\u6bd4\u8f83\u6709\u6d41\u91cf\u3002\u3002\u3002\uff09<\/p>\n<\/blockquote>\n<h2 id=\"119-\u5317\u6d77\u9053\u5927\u5b66\u8acf\u8a2a\u795e\u793e\u770b\u63a7\">11.9 \u5317\u6d77\u9053\u5927\u5b66+\u8acf\u8a2a\u795e\u793e+\u770b\u63a7<\/h2>\n<h3 id=\"\u5317\u6d77\u9053\u5927\u5b66\">\u5317\u6d77\u9053\u5927\u5b66<\/h3>\n<p>\u65e9\u4e0a\u5927\u69829\u70b9\u5c31 checkout \u4e86\u9152\u5e97\u628a\u884c\u674e\u5148\u653e\u7740\uff0c\u7136\u540e\u6b65\u884c\u53bb\u4e86\u5317\u6d77\u9053\u5927\u5b66\u3002\u7ee7\u7eed\u770b\u2744\ufe0f+\ud83c\udf41\uff0c\u611f\u89c9\u5f97\u51fa\u6765\u59b9\u59b9\u5f88\u559c\u6b22\u5317\u6d77\u9053\u5927\u5b66\u7684\u6c1b\u56f4\uff0c\u5979\u5e94\u8be5\u5c31\u662f\u5728\u6df1\u5733\u4e0a\u7684\u5927\u5b66\uff0c\u89c9\u5f97\u6df1\u5733\u7684\u5927\u5b66\u65e0\u804a\u900f\u9876\uff0c\u4ee5\u53ca\u5927\u5b66\u56db\u5e74\u6709\u4e09\u5e74\u90fd\u662f\u75ab\u60c5\uff0c\u7b97\u662f\u6700\u60e8\u7684\u90a3\u6279\u5927\u5b66\u751f\uff0c\u5927\u5b66\u65f6\u6bb5\u91cc\u6839\u672c\u6ca1\u6709\u673a\u4f1a\u51fa\u95e8\u73a9\u4eab\u53d7\u4e16\u754c\uff0c\u5b8c\u5168\u6d6a\u8d39\u4e86\u65f6\u95f4\u548c\u673a\u4f1a\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%202.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%203.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%204.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u90a3\u8fb9\u6709\u5f88\u591a\u4eba\u6392\u961f\u7684\u662f\u5317\u6d77\u9053\u5927\u5b66\u7684\u732b\u5934\u9e70\u5496\u5561\u5385\uff0c\u53eb \u5317\u5927\u30de\u30eb\u30b7\u30a7Caf\u00e9 &amp; Labo\uff0c\u6807\u5fd7\u662f\u4e00\u53ea\u732b\u5934\u9e70\u3002\n\u8fd9\u91cc\u4f1a\u5356\u672d\u5e4c\u519c\u5b66\u6821\u7684\u5236\u54c1\uff0c\u8fd9\u4e2a\u76f8\u5f53\u53d7\u6b22\u8fce\uff0c\u540e\u6765\u5728\u673a\u573a\u770b\u5230\u4e5f\u6709\u5e97\uff0c\u4f46\u662f\u5927\u6392\u957f\u9f99\u3002\n\u8fd9\u5929\u4e5f\u4e0d\u77e5\u9053\u4e3a\u5565\u8fd9\u4e48\u591a\u4eba\uff08\u591a\u6570\u662f\u7237\u7237\u5976\u5976\uff09\u4e00\u65e9\u6765\u6392\u961f\u5496\u5561\u5385\uff0c\u5173\u952e\u662f\u5b83\u8fd8\u6ca1\u5f00\u95e8\u3002\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%205.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%207.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u8fdc\u5904\u662f\u4e00\u5bf9\u6253\u626e\u5f88\u6f6e\u7684\u7237\u7237\u5976\u5976\uff0c\u90a3\u4f4d\u5976\u5976\u7684\u4eea\u6001\u76f8\u5f53\u4f18\u96c5\uff08\u6211\u62cd\u7684\u4e0d\u597d\uff09\uff0c\u5f88\u559c\u6b22\u7237\u7237\u7ed9\u5976\u5976\u5404\u79cd\u62cd\u7167\u7684\u573a\u666f\uff0c\u7279\u522b\u6709\u7231\ud83e\udef0\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2010.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2011.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2014.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2015.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2017.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2019.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2021.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2022.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2024.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2025.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2026.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2030.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e2d\u95f4\u5728\u5927\u5b66\u91cc\u7684\u4fbf\u5229\u5e97\u91cc\u559d\u4e86\u676f\u5496\u5561\u5750\u4e86\u4e0b\uff0c\u8fd8\u4e70\u4e86\u4e00\u4e2a\u5317\u6d77\u9053\u5927\u5b66\u7684\u5468\u8fb9\uff0c\u4e00\u4e2a\u7eff\u8272\u7684\u53ef\u6536\u7d27\u7684\u9632\u6c34\u888b\u5b50\uff0c\u611f\u89c9\u50cf\u662f\u7528\u6765\u88c5\u4fbf\u5f53\u7684\uff0c\u633a\u597d\u7528\u7684\u3002<\/p>\n<p>\u603b\u5171\u4e5f\u5c31\u4e00\u4e2a\u591a\u5c0f\u65f6\u5c31\u901b\u5b8c\u4e86\uff0c\u7136\u540e\u6b65\u884c\u53bb\u4e86\u8acf\u8a2a\u795e\u793e\u3002<\/p>\n<h3 id=\"\u8acf\u8a2a\u795e\u793e\">\u8acf\u8a2a\u795e\u793e<\/h3>\n<blockquote>\n<p><a href=\"https:\/\/www.sapporo-suwajinja.com\/\">https:\/\/www.sapporo-suwajinja.com\/<\/a><\/p>\n<\/blockquote>\n<p>\u8acf\u8a2a\u795e\u793e\u662f\u59b9\u59b9\u5237\u5c0f\u7ea2\u4e66\u770b\u4eba\u63a8\u8350\u770b\u5230\u7684\uff0c\u662f\u4e00\u4e2a\u522b\u81f4\u7684\u5c0f\u795e\u793e\uff0c\u73b0\u5728\u7528\u6765\u5438\u5f15\u6e38\u5ba2\u7684\u624b\u6bb5\u662f\u7528\u5f88\u6f02\u4eae\u7684\u4f1e\u88c5\u9970\u95e8\u53e3\uff0c\u7528\u5f88\u6f02\u4eae\u7684\u82b1\u88c5\u9970\u795e\u6c34\uff0c\u7136\u540e\u5356\u7684\u5fa1\u5b88\u548c\u5fa1\u6731\u5370\u4e5f\u505a\u5f97\u975e\u5e38\u6f02\u4eae\uff0c\u603b\u4e4b\u5c31\u662f\u5973\u5b69\u5b50\u559c\u6b22\u7684\u90a3\u4e9b\u5143\u7d20\u5168\u90e8\u90fd\u8981\u6709wwww<\/p>\n<p>\u8fd9\u4e9b\u624b\u6bb5\u8bb2\u5b9e\u8bdd\u5f88\u6709\u6548\uff0c\u6bd4\u5982\u81f3\u5c11\u9a97\u6211\u53bb\u4e86\u4e00\u4e2a\u672c\u6765\u5b8c\u5168\u6ca1\u5174\u8da3\u53bb\u7684\u795e\u793e\uff0c\u8fd8\u82b1\u94b1\u4e70\u4e86\u5fa1\u6731\u5370\ud83d\ude02<\/p>\n<p>\u95e8\u53e3\u662f\u4f1e\u7684\u88c5\u9970\uff0c\u53f3\u624b\u8fb9\u5176\u5b9e\u8fd8\u6709\u4e00\u5c0f\u5757\u7528\u82b1\u74e3\u88c5\u9970\u7684\u795e\u6c34\uff0c\u5f53\u65f6\u6709\u5f88\u591a\u4eba\u6392\u961f\uff0c\u672c\u60f3\u7740\u665a\u70b9\u518d\u8fc7\u53bb\uff0c\u7ed3\u679c\u5fd8\u8bb0\u4e86hhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2033.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2034.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5f88\u4f1a\u6293\u70ed\u70b9\u8425\u9500\uff0c\u6446\u4e86\u5c0f\u96ea\u4eba\u6765\u8fce\u63a5\u7c89\u4e1dhhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2035.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u770b\uff0c\u5c31\u4f1a\u6709\u7c89\u4e1d\u62ff\u7740\u5a03\u6765\u62cd\u7167hhhhh\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2036.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2037.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4e8e\u662f\uff0c\u6211\u4e5f\u7834\u8d39\u4e86\uff0c\u641e\u4e86\u51e0\u4e2a\u304a\u307f\u304f\u3058\u548c\u4e24\u5f20\u597d\u597d\u770b\u7684\u5fa1\u6731\u5370\uff0c\u5e76\u6ca1\u6709\u4ec0\u4e48\u5375\u7528\u7684\u7eb8\u7247\u5b50\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2038.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5176\u4e2d\u4e00\u4e2a\u6700\u6709\u7279\u8272\u7684\u662f\u8fd9\u4e2a\u9542\u7a7a\u7684\uff0c\u867d\u7136\u540e\u6765\u6211\u60f3\u4e86\u4e0b\uff0c\u8fd9\u4e2a\u4e5f\u6ca1\u5565\u6210\u672c\u5427\u54c8\u54c8\u54c8\u54c8\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2039.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u5982\u679c\u5565\u88c5\u9970\u6ca1\u6709\u7684\u8bdd\uff0c\u795e\u793e\u5c31\u53ea\u662f\u8fd9\u4e2a\u6837\u5b50\u800c\u5df2\uff0c\u633a\u666e\u901a\u7684\ud83d\ude02\n\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2040.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u53e6\u5916\u8fd8\u53ef\u4ee5\u770b\u770b\u795e\u793e\u7684 ins \u8d26\u53f7\uff0c\u662f\u771f\u7684\u6709\u5f88\u4f1a\u6446\u8bbe\u5f88\u4f1a\u62cd\u7167\u7684\u4eba\u5728\u505a\uff0c\u8d26\u53f7\u7684\u56fe\u662f\u771f\u7684\u5f88\u6f02\u4eae\u3002<\/p>\n<blockquote>\n<p><a href=\"https:\/\/www.instagram.com\/sapporo_suwajinja\">https:\/\/www.instagram.com\/sapporo_suwajinja<\/a><\/p>\n<\/blockquote>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2041.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<h3 id=\"\u4e2d\u996d-minoru\">\u4e2d\u996d Minoru<\/h3>\n<p>\u795e\u793e\u51fa\u6765\u540e\u6b65\u884c\u53bb\u672d\u5e4c\u7ad9\u65c1\u8fb9\u7684 Stellar Place \u5546\u573a\u91cc\u53bb\u5403\u4e2d\u996d\u3002<\/p>\n<p>\u8fd9\u4e2a\u662f\u6211\u5237\u5c0f\u7ea2\u4e66\u770b\u5230\u63a8\u8350\u7684\u5e97\uff0c\u53eb Minoru Dining\uff0c\u5356\u70b9\u662f\u8bf4\u81ea\u5bb6\u4ea7\u7684\u852c\u83dc\u548c\u8089\uff0c\u5f88\u65b0\u9c9c\u5565\u7684\u3002\n\u5c31\u7b97\u4e0d\u5403\u8fd9\u5bb6\uff0c\u5546\u573a\u7684\u90a3\u4e00\u5c42\u90fd\u662f\u996d\u5e97\uff0c\u6709\u5f88\u591a\u9009\u62e9\u3002<\/p>\n<p>\u53ea\u662f\u6ca1\u60f3\u5230\u5230\u8fbe\u7684\u65f6\u95f4\u7a0d\u5fae\u665a\u4e86\u4e00\u70b9\uff0c\u662f\u6b63\u6b63\u597d\u7684\u996d\u70b9\uff0c\u51e0\u4e4e\u6240\u6709\u5e97\u90fd\u5728\u6392\u961f\u3002\u800c\u4e14\u591a\u6570\u5e97\u7684\u6392\u961f\u65b9\u6cd5\u662f\u81ea\u5df1\u5728\u95e8\u53e3\u7684\u672c\u5b50\u4e0a\u5199\u540d\u5b57\u548c\u4eba\u6570\u3002\n\u4ec5\u6709 Minoru \u548c\u53e6\u4e00\u5bb6\u732a\u6392\uff08\uff1f\uff09\u5e97\u662f\u53ef\u4ee5\u53d6\u53f7\u7136\u540e\u626b\u63cf\u4e8c\u7ef4\u7801\u770b\u6392\u961f\u8fdb\u5ea6\u7684\u3002<\/p>\n<p>\u53d6\u4e86\u53f7\u4e4b\u540e\u53d1\u73b0\u7ffb\u53f0\u901f\u5ea6\u5012\u4e5f\u4e0d\u7b97\u592a\u6162\uff0c\u6700\u540e\u51b3\u5b9a\u8fd8\u662f\u7b49 Minoru \u4e86\u3002\n\u4e0d\u8fc7\u8fd8\u662f\u7b49\u4e86\u5927\u698240\u5206\u949f\u624d\u8fdb\u5e97\u3002<\/p>\n<p>\u8003\u8651\u5230\u665a\u4e0a\u770b\u63a7\u5927\u69828\u70b9\u624d\u7ed3\u675f\uff0c\u4e5f\u4e0d\u77e5\u9053\u51e0\u70b9\u624d\u80fd\u56de\u5230\u4f4f\u5bbf\u3002\u4e2d\u5348\u6700\u597d\u5403\u9971\u70b9\uff0c\u6240\u4ee5\u6211\u5c3d\u91cf\u70b9\u4e86\u4e2a\u770b\u8d77\u6765\u8d35\u7684\u91cf\u591a\u7684set\uff0c\u4e0d\u8fc7\u5012\u4e5f\u6ca1\u6211\u60f3\u7684\u90a3\u4e48\u591a\uff0c\u53ef\u80fd\u7c73\u996d\u5e94\u8be5\u8981\u5927\u4efd\u7684hhhh<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2042.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4f46\u662f\u6392\u961f\u7b49\u4e8640\u5206\u949f\u7684\u996d\u89c9\u5f97\u8fd8\u633a\u503c\u7684\uff0c\u786e\u5b9e\u633a\u597d\u5403\u7684\uff0c\u66b4\u98ce\u5438\u5165\ud83d\ude0b<\/p>\n<p>\u540e\u9762\u8fd8\u52a0\u4e86\u4e2a\u81ea\u5bb6\u5236\u51b0\u6dc7\u6dcb\u6ca1\u62cd\uff0c\u4e5f\u5f88\u597d\u5403\ud83d\ude0b<\/p>\n<h3 id=\"\u79fb\u52a8\u5230\u6c11\u5bbf\">\u79fb\u52a8\u5230\u6c11\u5bbf<\/h3>\n<p>\u7136\u540e\u53bb\u9152\u5e97\u9886\u53d6\u884c\u674e\u540e\uff0c\u6253\u8f66\u53bb\u4e86\u8fd9\u5929\u7684\u4f4f\u5904\uff0c\u5728 airbnb \u4e0a\u627e\u7684\u6c11\u5bbf\u3002<\/p>\n<p>\u8fd9\u662f\u4e00\u4e2a\u795e\u5947\u7684\u306f\u306a\u3057\u3002\u6700\u521d\u5b8c\u5168\u6ca1\u6709\u60f3\u8fc7\u4f1a\u4e2d\u7968\uff0c\u6240\u4ee5\u4e0d\u4f1a\u50cf\u67d0\u4e9b\u4eba\u90a3\u6837\u63d0\u524d\u5c31\u53bb\u9884\u8ba2\u9152\u5e97\uff0c\n\u5728\u5df2\u77e5\u62bd\u4e2d\u7968\u4e86\u4e4b\u540e\u53bb\u67e5\u672d\u5e4c\u9152\u5e97\u7684\u65f6\u5019\uff0c\u51e0\u4e4e\u65e0\u6cd5\u627e\u5230\u6b63\u5e38\u53ef\u627f\u53d7\u4ef7\u683c\u7684\u9152\u5e97\u3002\u4ef7\u683c\u7ffb\u500d\u8fd8\u6ca1\u6709\u592a\u591a\u7a7a\u623f\u5565\u7684\uff0c\u5f88\u53ef\u6015\uff0c\u867d\u7136\u540e\u6765\u6211\u770b\u672c\u5730\u65b0\u95fb\u8bf4\uff0c\u6700\u7ec8\u5165\u4f4f\u7387\u5176\u5b9e\u662f\u516b\u6210\uff0c\u6709\u4e00\u4e9b\u4eba\u4f1a\u5728\u524d\u671f\u8ba2\u591a\u8fc7\u9700\u8981\u7684\u623f\u95f4\uff0c\u5728\u6700\u540e\u624d\u53d6\u6d88\u9884\u8ba2\uff0c\u6240\u4ee5\u4e00\u5b9a\u8981\u6781\u9650\u6361\u6f0f\u5e94\u8be5\u4e5f\u662f\u53ef\u4ee5\u505a\u5230\u7684\uff0c\u4f46\u592a\u8fc7\u6ca1\u6709\u4fdd\u969c\u3002\n\u672d\u5e4c\u86cb\u4e00\u76f4\u90fd\u88ab\u5f88\u591a\u4eba\u8bdf\u75c5\uff0c\u9152\u5e97\u6570\u91cf\u4e0d\u591f\u4e5f\u7b97\u5176\u4e2d\u4e00\u4e2a\u539f\u56e0\u3002\u751a\u81f3 JR \u90a3\u5929\u6709\u52a0\u5f00\u51cc\u666812\u70b9\u534a\u7684\u8f66\u53bb\u65ed\u5ddd\uff0c\u5927\u6982\u5c31\u662f\u56e0\u4e3a\u6709\u4e0d\u5c11\u5728\u672d\u5e4c\u8ba2\u4e0d\u5230\u9152\u5e97\u7684\u4eba\u8dd1\u53bb\u8ba2\u65ed\u5ddd\u7684\u9152\u5e97\u4e86\u3002<\/p>\n<p>\u5728\u5f53\u65f6\uff0c\u59b9\u59b9\u63d0\u51fa\u7684\u4e00\u4e2a\u89e3\u51b3\u65b9\u6cd5\u662f\u627eairbnb \u7684\u6c11\u5bbf\uff0c\u4f46\u662f\u5bb9\u6613\u8ba2\u7684\u6c11\u5bbf\u4e5f\u88ab\u4eba\u8ba2\u5149\u4e86\uff0c\u5979\u5f53\u65f6\u627e\u5230\u7684\u4e24\u4e2a\u4ea4\u901a\u8fd8\u4e0d\u7b97\u592a\u9ebb\u70e6\u7684\u6c11\u5bbf\u9700\u8981\u51d1\u9f5010\u621615\u4e2a\u4eba\u3002\n\u6211\u8bf4\u53ef\u4ee5\u554a\uff0c\u627e\u5f97\u5230\u4eba\u62fc\u4e00\u4e0b\u8fd9\u4e2a\u6c11\u5bbf\u7684\u8bdd\u5f53\u7136\u53ef\u4ee5\u3002\u5176\u5b9e\u6211\u4e00\u5f00\u59cb\u4e5f\u6ca1\u9884\u671f\u80fd\u627e\u5230\uff0c\u6ca1\u60f3\u5230\u7684\u662f\u4f4e\u4f30\u4e86\u8fd9\u4e2a\u9700\u6c42\uff0c\u6700\u7ec8\u8fd8\u771f\u7ed9\u51d1\u5230\u4e8615\u4e2a\uff08\u4e2d\u56fd\uff09\u4eba&hellip;<\/p>\n<p>\u8fd9\u4e2a\u62fc\u6c11\u5bbf\u7684\u548c\u623f\u4e1c\u54a8\u8be2\u3001\u627e\u4eba\u6c9f\u901a\u4ea4\u6d89\u3001\u6536\u94b1\u3001\u8fd8\u6709\u540e\u9762\u5165\u4f4f\u9000\u623f\u7b49\u7b49\u5168\u90e8\u662f\u59b9\u59b9\u6765\u505a\u7684\uff0c\u6211\u89c9\u5f97\u59b9\u59b9\u505a\u5f97\u975e\u5e38\u597d\uff0c\u7ec4\u7ec7\u5f97\u5f88\u6e05\u6670\uff0c\u505a\u4e8b\u5f88\u4e3b\u52a8\uff0c\u76f8\u5f53\u9760\u8c31\u3002\n\u8fd9\u4e2a\u4e8b\u8ba9\u6211\u6765\u505a\u7684\u8bdd\uff0c\u6211\u53ef\u80fd\u6ca1\u6709\u8fd9\u4e48\u6709\u6548\u7387\uff0c\u4e5f\u53ef\u80fd\u6c9f\u901a\u4e0d\u6765\u800c\u653e\u5f03\ud83d\ude02<\/p>\n<p>\u56de\u5230\u8fd9\u5929\u7684\u52a8\u7ebf\uff0c\u4ece\u524d\u4e00\u5929\u7684\u9152\u5e97\u51fa\u6765\u53bb\u6c11\u5bbf\uff0c\u4e0d\u662f\u5f88\u597d\u8d70\uff0c\u5176\u5b9e\u8ddd\u79bb\u4e0d\u8fdc\uff0c\u5927\u6982\u5c312.5\u516c\u91cc\uff0c\u4f46\u662f\u6ca1\u6709\u5f88\u76f4\u63a5\u7684\u516c\u5171\u4ea4\u901a\uff0c\u800c\u4e14\u5e26\u7740\u884c\u674e\uff0c\u4e5f\u4e0d\u65b9\u4fbf\u76f4\u63a5\u6b65\u884c\u7684\u8ddd\u79bb\u3002\n\u6211\u5f53\u65f6\u60f3\u7684\u662f\u5927\u4e0d\u4e86\u53ef\u4ee5\u627e\u9152\u5e97\u5e2e\u5fd9\u53ebtaxi\uff0c\u540e\u6765\u59b9\u59b9\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u5728\u65e5\u672c\u7528didi\u53eb\u8f66\uff0c\u662f\u4e00\u4f4d\u963f\u59e8\u6765\u63a5\u7684\u6211\u4eec\uff0c\u963f\u59e8\u7279\u522b\u70ed\u60c5\uff0c\u4e5f\u95ee\u4e86\u6211\u4eec\u662f\u4e0d\u662f\u6765\u770b\u63a7\u3002<\/p>\n<p>\u53ef\u60dc\u5b8c\u5168\u6ca1\u7ed9\u6c11\u5bbf\u62cd\u70b9\u7167\u7247\uff0c\u5176\u5b9e\u623f\u5b50\u672c\u8eab\u5f88\u4e0d\u9519\uff0c\u633a\u9002\u5408\u4e00\u7fa4\u670b\u53cb\u6765\u56e2\u5efa\u7684wwww<\/p>\n<h3 id=\"\u770b\u63a7\">\u770b\u63a7<\/h3>\n<p>\u5230\u6c11\u5bbf\u653e\u4e0b\u884c\u674e\uff0c\u7a0d\u5fae\u4fee\u6574\u4e86\u4e00\u4e0b\u5c31\u51fa\u53d1\u53bb\u770b\u63a7\u4e86\u3002<\/p>\n<p>\u51fa\u53d1\u5927\u6982\u662f\u4e0d\u52303\u70b9\u7684\u6837\u5b50\uff0c\u4f46\u8fd9\u4e4b\u524d\u5df2\u7ecf\u5237\u5230\u5f88\u591a\u5730\u94c1\u7ad9\u65e9\u5df2\u4eba\u6f6e\u6c79\u6d8c\u7684repo\u3002\n\u8fd9\u91cc\u59b9\u59b9\u8111\u5b50\u8f6c\u7684\u975e\u5e38\u5feb\uff0c\u8bf4\u662f\u5750\u53cd\u65b9\u5411\u7684\u5730\u94c1\u5230\u524d\u51e0\u7ad9\u770b\u770b\u80fd\u4e0d\u80fd\u5148\u4e0a\u8f66\uff0c\u4e0d\u7528\u5728\u6700\u591a\u4eba\u6392\u961f\u7b49\u4e0a\u8f66\u7684\u7ad9\u50bb\u7b49\u3002<\/p>\n<p>\u6ca1\u60f3\u5230\u8fd9\u62db\u662f\u771f\u6709\u7528\uff0c\u53cd\u65b9\u5411\u5f80\u524d\u5750\u4e862\u30013\u4e2a\u7ad9\u7ad9\u53f0\u5c31\u6ca1\u5565\u4eba\u5728\u6392\u961f\u4e86\uff0c\u8fde\u5730\u94c1\u4e0a\u4e5f\u6ca1\u5565\u4eba\uff0c\u8fd8\u53ef\u4ee5\u5750\u4e0b\uff0c\u7ecf\u8fc7\u6700\u591a\u4eba\u6392\u961f\u7684\u7ad9\u7684\u65f6\u5019\u5b8c\u5168\u662f\u6697\u723dhhhhh<\/p>\n<p>\u4f46\u662f\u4e0a\u5730\u94c1\u8fd8\u5e76\u4e0d\u662f\u591a\u5927\u7684\u95ee\u9898\uff0c\u4e0b\u5730\u94c1\u4e4b\u540e\u624d\u662f\u5de8\u5927\u7684\u95ee\u9898\u3002\u51fa\u5730\u94c1\u7ad9\u5c31\u5df2\u7ecf\u5927\u6392\u957f\u9f99\u4e86\u3002\n\u4ece\u5730\u94c1\u7ad9\u5230\u672d\u5e4c\u86cb\u7684\u4e00\u8def\u5168\u90e8\u90fd\u662f\u4eba\uff0c\u8fd9\u6761\u9f99\u662f\u771f\u7684\u6709\u591f\u957f\u7684\ud83d\ude02<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2046.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2047.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2048.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2051.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2052.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u770b\u8fd9\u4e2a\u4eba\u6d41\u975e\u5e38\u5e86\u5e78\u6628\u5929\u5df2\u7ecf\u5148\u6765\u4e70\u8fc7\u5468\u8fb9\u4e86\uff0c\u8fd9\u79cd\u4eba\u6d41\u8fd8\u8981\u518d\u53bb\u6392\u961f\u4e70\u5468\u8fb9\u7684\u8bdd\uff0c\u611f\u89c9\u6574\u4e2a\u65f6\u95f4\u4e0d\u591f\ud83d\ude02\n\u5927\u6982\u82b1\u4e8640\u5206\u949f\u7ec8\u4e8e\u662f\u8fdb\u573a\u4e86\u4e4b\u540e\uff0c\u5927\u69824\u70b9\u624d\u7ec8\u4e8e\u5f97\u77e5\u81ea\u5df1\u7684\u5ea7\u4f4d\u662f\u54ea\u91cc\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2053.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u770b\u4e86\u597d\u591a\u773c\u624d\u786e\u8ba4\u5f00\u51fa\u7684\u662farena\uff0c\u6ca1\u60f3\u5230\u8fd9\u4e2a\u8fd0\u6c14\u8fd8\u6ca1\u82b1\u5b8c\uff0c\u4eba\u751f\u7b2c\u4e00\u6b21\u62bd\u4e2d\u7968\u7adf\u7136\u8fd8\u80fd\u5f00\u51faarena\uff0c\u672d\u5e4c\u86cb\u8c22\u8c22\u4f60\ud83d\ude4f<\/p>\n<p>\u4e00\u8fdb\u573a\u5148\u5077\u62cd\u4e86\u4e00\u5f20\u3002\u90a3\u4e2a\u706f\u5149\u989c\u8272\u6211\u6ca1\u529e\u6cd5\uff08\u4f0f\u989d<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2054.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u6211\u7684\u4f4d\u7f6e\u7684\u89c6\u89d2\u662f\u5927\u6982\u8fd9\u6837\uff0c\u4e5f\u662f\u8d81\u6ca1\u4eba\u6ce8\u610f\u5077\u62cd\u7684\uff0c\u540e\u6765\u4e00\u76f4\u4f1a\u6709 staff\u76d1\u89c6\u4f60\uff0c\u5982\u679c\u770b\u5230\u4f60\u62ff\u8d77\u624b\u673a\u60f3\u62cd\u7167\uff08\u53ea\u662f\u7a7a\u573a\u5730\u6ca1\u6709\u4eba\u4e5f\u4e0d\u884c\uff09\u5c31\u4f1a\u5236\u6b62\u4f60\u3002\u3002\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2055.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u7ed3\u675f\u4e4b\u540e\u5077\u62cd\u4e86\u4e00\u4e0b\uff0c\u800c\u4e14\u706f\u5149\u90fd\u5173\u4e86\u624d\u660e\u767d\u53f0\u4e0a\u5de6\u53f3\u4e24\u4fa7\u6446\u7684\u5168\u662f\u5c4f\u5e55\u6765\u7684\ud83d\ude02\ud83d\ude02<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2059.jpeg\" alt=\"\"  \/>\n\n<\/p>\n<p>\u770b\u4e4b\u524d\u89c9\u5f97\u5f00\u51faarena \u5185\u573a\u8fd0\u6c14\u592a\u597d\u4e86\uff0c\u770b\u5b8c\u4e4b\u540e\u53c8\u89c9\u5f97\u8fd0\u6c14\u7b97\u4e0d\u4e0a\u6700\u597d\uff0c\u4e00\u4e2a\u662f\u6211\u6700\u559c\u6b22\u7684\u4e24\u4f4d\u6210\u5458\u5f88\u5c11\u5230\u5de6\u4fa7\u82b1\u9053\u6765\uff0c\u518d\u4e00\u4e2a\u662f\u6211\u53d1\u73b0\u6211\u5728 arena \u7ecf\u5e38\u4f1a\u770b\u4e0d\u89c1\u6574\u4f53\u821e\u53f0\uff0c\u7279\u522b\u662f back stage\uff0c\u51e0\u4e4e\u5565\u4e5f\u770b\u4e0d\u5230\u3002<\/p>\n<p>\u770b\u5b8c\u4e86\u4e4b\u540e\u53cd\u800c\u660e\u767d\u6211\u5e94\u8be5\u5750 stand \u770b\u6574\u4f53\uff0c\u6211\u65e0\u6240\u8c13\u662f\u5426\u80fd\u8fd1\u8ddd\u79bb\u770b\u4eba\uff08\u867d\u7136\u6709\u504f\u7231\uff0c\u4f46\u662f\u5bf9\u7231\u8c46\u672c\u4eba\u4e0d\u6267\u8457\uff09\uff0c\u6211\u4e5f\u6ca1\u60f3\u8fc7\u8981\u996d\u6492\uff08\u8fde\u6247\u5b50\u672c\u6765\u90fd\u4e0d\u60f3\u4e3e\u7684\uff0c\u4e5f\u4e0d\u4f1a\u53bb\u81ea\u5236\u6247\u5b50\u6c42\u996d\u6492\u4e4b\u7c7b\u7684\uff09\uff0c\n\u6211\u66f4\u60f3\u770b\u6e05\u695a\u821e\u53f0\uff0c\u60f3\u770b\u6e05\u5404\u4f4d\u6210\u5458\u7684\u52a8\u7ebf\uff0c\u60f3\u770b\u6574\u4e2a\u56e2\u8df3\u821e\u65f6\u7684\u961f\u5f62\u53d8\u5316\u8d70\u4f4d\u7b49\u7b49\u3002<\/p>\n<p>\u7ed9\u6211\u7684\u4e1c\u897f\u5f88\u597d\uff0c\u4f46\u5e76\u4e0d\u662f\u6211\u6700\u60f3\u8981\u7684\uff0c\u5927\u6982\u662f\u8fd9\u79cd\u611f\u89c9\u3002<\/p>\n<p>\u63a7\u662f5\u70b9\u5f00\u573a\uff0c\u5927\u6982\u662f\u665a\u4e0a7:40\u5de6\u53f3\u7ed3\u675f\u7684\u3002\u7136\u540e\u672d\u5e4c\u7684\u9000\u573a\u5730\u72f1\u6765\u4e86\uff0c\u9996\u5148\u5728arena \u7684\u4eba\u5c31\u662f\u6700\u540e\u88ab\u5b89\u6392\u9000\u573a\u7684\uff0c\u8fd9\u65f6\u5df2\u7ecf\u8fc7\u53bb\u4e86\u534a\u4e2a\u591a\u5c0f\u65f6\u7684\u6837\u5b50\ud83d\ude02\n\u7136\u540e\u6162\u6162\u6392\u961f\u51fa\u95e8\u6392\u961f\u8fdb\u5730\u94c1\u7ad9\uff0c\u6392\u961f\u4e0a\u5730\u94c1\uff0c\u5927\u6982\u662f10\u70b9\u591a\u624d\u56de\u5230\u6c11\u5bbf\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/11\/1109-Sapporo%20-%2060.jpeg\" alt=\"\u53ef\u6015\u7684\u9000\u573a\u4eba\u6d41\"  \/>\n\n<\/p>\n<p>\u53bb\u4fbf\u5229\u5e97\u4e70\u4e86\u6ce1\u9762\u56de\u6c11\u5bbf\u5403\u5f53\u665a\u996d\uff0c\u8fd9\u5929\u4e5f\u4e70\u4e86\u74f6\u6674\u98a8\u5c1d\u8bd5\u4e86\u4e00\u4e0b\uff0c\u5bf9\u6211\u6765\u8bf4\u5c31\u662f\u666e\u901a\u7684\u5564\u9152\uff0c\u548c\u522b\u7684\u5564\u9152\u6ca1\u5565\u533a\u522b\uff0c\u672c\u6765\u4e5f\u4e0d\u7231\u559d\u5564\u9152\u7684\u4eba\uff0c\u52aa\u529b\u704c\u4e86\u534a\u74f6\uff0c\u5269\u4e0b\u534a\u74f6\u5c31\u5012\u6389\u4e86\u3002<\/p>\n<p>\u4f46\u662f\u8fd9\u4e2a\u5564\u9152\u5bf9\u6211\u600e\u4e48\u6ca1\u6709\u50ac\u7720\u4f5c\u7528\uff0c\u8fd9\u5929\u665a\u4e0a\u5b8c\u5168\u6ca1\u7761\u597d\u3002<\/p>\n\n\n<p><details >\n  <summary markdown=\"span\">\u5355\u72ec\u7684\u770b\u63a7 Repo\uff0c\u5927\u6982\u53ea\u6709\u7c89\u4e1d\u624d\u80fd\u770b\u61c2\uff0c\u6240\u4ee5\u6298\u53e0\u4e86\ud83e\udd13<\/summary>\n  <p>\u5355\u72ec\u8bf4\u63a7\u7684\u8bdd\uff0c\u611f\u89c9\u53c8\u53d8\u6709\u94b1\u4e86\uff0c\u55b7\u706b\u55b7\u6c34\u70df\u82b1\u70ed\u6c14\u7403\u82b1\u8f66moving stage\u5168\u90e8\u90fd\u6709\uff0c\u4e3b\u821e\u53f0\u4e0a\u4e00\u5f00\u59cb\u4ee5\u4e3a\u662f\u6709\u4ec0\u4e48\u5927\u578b\u88c5\u7f6e\uff0c\u7ed3\u675f\u540e\u624d\u53d1\u73b0\u5176\u5b9e\u5168\u662f\u5927\u5c4f\u5e55\uff0c\u53ef\u4ee5\u6253\u9020\u5404\u79cd\u573a\u666f\u3002<\/p>\n<p>\u4e0a\u534a\u573a\u6ca1\u6709\u4e0b\u534a\u573a\u723d\uff0c\u4e0a\u534a\u573a\u5f00\u573a\u70b8\u573a\u90e8\u5206\u4e0d\u9519\u5f88\u6709\u6c14\u52bf\uff0c\u4e0d\u8fc7\u63a5\u4e0b\u6765\u7a0d\u5fae\u8212\u7f13\u7684 part \u91cc\uff0c\u6709\u65b0\u4e13\u91cc\u7684\u6211\u6700\u559c\u6b22\u7684\u4e24\u9996\u6162\u6b4c\u30ea\u30f3\u30c7\u30a3\u30fc\u30e9\u30e9 \u548c endless night\uff0c\u6b4c\u672c\u8eab\u771f\u7684\u86ee\u597d\u542c\u7684\uff0c\u4f46\u662f\u8fd9\u4e2a\u73b0\u573a\u6709\u51e0\u4f4d\u5531\u5f97\u4e0d\u592a\u597d\uff0c\u6216\u8005\u53ef\u4ee5\u8bf4\u662f\u4e0d\u592a\u9002\u5408\u8fd9\u4e2a\u7c7b\u578b\uff08\u79c1\u5bc6\u9a6c\u8d5b\uff09\u3002\uff08\u542c\u8bf4\u7b2c\u4e8c\u5929\u8fdb\u6b65\u4e86\uff09<\/p>\n<p>\u4e0b\u534a\u573a\u6574\u4f53\u5f88\u5f00\u5fc3\uff0c\u65b0\u6b4c\u91cc wachacha \u5f88\u60ca\u559c\uff0c\u63a5\u5728da bomb \u540e\u9762\uff0c\u4e24\u9996\u5370\u5ea6\u795e\u66f2\u7684\u821e\u53f0\u90fd\u633a\u6709\u610f\u601d\u633a\u597d\u770b\u7684\u3002<\/p>\n<p>\u7136\u540e\u6211\u6700\u559c\u6b22\u7684\u4f9d\u7136\u662fppp\uff0c\u592a\u597d\u4e86\u7279\u522b\u5f00\u5fc3\u7684\u66f2\u5b50\uff0c\u9a6c\u4e0a\u53ef\u4ee5\u8ddf\u7740\u8e66\u8d77\u6765 party\u3002<\/p>\n<p>\u548c\u98cepart \u7684\u8863\u670d\u86ee\u597d\u770b\u7684\uff0c\u6574\u4f53\u821e\u53f0\u4e5f\u5f88\u4e0d\u9519\uff0c\u6162\u901f+\u548c\u98ce\u7f16\u66f2\u7684\u7ec7\u9526\u867d\u7136\u4e0d\u592a\u8df3\u821e\uff0c\u4f46\u6211\u89c9\u5f97\u6bd4\u539f\u7248\u5408\u9002\uff0c\u597d\u542c\u3002\n\u4f46\u662f\u7ec7\u9526\u540e\u9762\u63a5\u7740\u7684\u662f\u548c\u98ce\u7248\u7684W\uff0c\u662f\u5b8c\u5168\u6ca1\u60f3\u5230\u7684\u3002\n\u672c\u6765\u4ee5\u4e3a\u548c\u98cepart \u4f1a\u6709\u4e4b\u524d\u51fa\u4e8b\u7684\u4e89\u8bae\u6b4c\u66f2 Katana \u7684\uff0c\u6bd5\u7adf\u8863\u670d\u770b\u4e0a\u53bb\u662f\u53ef\u4ee5\u6765\u4e00\u573a\u6b4c\u821e\u4f0e\u6740\u9635\u7684\u90a3\u79cd\uff0c\u548c Katana \u5b8c\u7f8e\u5339\u914d\u554a\u3002\n\u7ed3\u679c\u6ca1\u6709\u5531\u3002<\/p>\n<p>\u53cd\u800c\u662f\u7a81\u7136\u5531\u4e86\u9996\u65b0\u6b4c Dear\uff0c\u611f\u8c22\u7c89\u4e1d\u7684\u90a3\u4e2a\u7cfb\u5217\u7684\u66f2\u3002Dear \u5f88\u597d\u542c\uff0c\u5927\u5c4f\u5e55\u91cc\u770b\u4e86\u4e0b\u6b4c\u8bcd\uff0c\u4e5f\u5199\u5f97\u5f88\u597d\uff0c\u975e\u5e38\u50cf\u662f\u660e\u5e74\u51fa\u90535\u5468\u5e74\u51fa\u4e00\u5f20\u7cbe\u9009\u96c6\u91cc\u4f1a\u6536\u5f55\u7684\u6b4c\u90a3\u79cd\u3002\n\uff08\u4e00\u4e2a\u5f88\u51b7\u6f20\u7684\u7c89\u4e1d\u6709\u5c0f\u5c0f\u88ab\u8fd9\u9996\u6b4c\u611f\u52a8\u5230\u3002\u3002\u3002<\/p>\n<p>unit\u66f2\u7684\u8bdd\uff0cnightscape \u5f88\u597d\u542c\u7279\u522b\u559c\u6b22\uff0cabfkdt\u4e09\u4f4d\u5531\u5f97\u4e5f\u975e\u5e38\u597d\uff0c\u821e\u53f0\u80cc\u666f\u6548\u679c\u7279\u522b\u597d\uff0chot flow \u592a\u53ef\u7231\u4e86\uff0c\u6d74\u7f38\u63a8\u8f66\u7b80\u76f4\u98de\u901f\u4ece\u6211\u773c\u524d\u98de\u8fc7\uff0c\u6700\u540e\u4e00\u5c0f\u6bb5\u8ddf\u7740\u7529\u624b\u706f\uff08\u56e0\u4e3a\u6ca1\u6709\u6bdb\u5dfe\uff09\u5f88\u5f00\u5fc3\uff0cglitch\u7684\u821e\u8df3\u7684\u5f88\u4e0d\u9519\uff0c\u800c\u4e14\u4e5f\u662f\u5c11\u6570\u51e0\u4e2a\u6211\u80fd\u770b\u6e05\u695a\u821e\u7684\u821e\u53f0\uff0c\u53ea\u6709nbkj\u7684\u90a3\u9996\u661f\u306e\u3046\u305f\u6211\u89c9\u5f97\u975e\u5e38\u4e00\u822c\uff0c\u867d\u7136\u662f\u4ece\u90a3\u9996\u5f15\u51fa\u70ed\u6c14\u7403\u3002<\/p>\n<p>\u4e4b\u524d\u5b89\u5a1c\u8ddf\u6211\u8bf4\uff0c\u770b\u4e86\u63a7\u4e4b\u540e\u5c31\u53c8\u80fd\u7231\u4e86\uff0c\u770b\u4e00\u573a\u9876\u4e00\u5e74www\u3002\n\u4f46\u6211\u89c9\u5f97\u4f3c\u4e4e\u4e5f\u5c31\u90a3\u6837\uff0c\u53ea\u662f\u786e\u5b9e\u751f\u51fa\u4e86\u60f3\u518d\u91cd\u65b0\u770b\u4e00\u6b21\u975e\u5185\u573a\u7684\u63a7\u7684\u5962\u671b\uff0c\u56e0\u4e3a\u592a\u591a\u6ca1\u770b\u5230\u7684\u4e1c\u897f\uff0c\u5f88\u4e0d\u7518\u5fc3\u3002\u770b\u522b\u4eba\u7684repo\u5c31\u4f1a\u89c9\u5f97\u201c\u6709\u8fd9\u4e2a\u4e48\uff1f\u201d\u201c\u4e3a\u5565\u6211\u4ec0\u4e48\u90fd\u6ca1\u770b\u5230\u201d\u201c\u6211\u771f\u7684\u770b\u4e86\u63a7\u4e48\uff1f\u201d\u7684\u6000\u7591\ud83d\ude02<\/p>\n<p>\u5904\u4e8e\u4e00\u79cd\uff0c\u4f3c\u4e4e\u6bd4\u4e4b\u524d\u53c8\u591a\u4e86\u70b9\u7231\uff0c\u4f46\u8ddf\u6211\u6700\u4e0a\u5934\u7684\u65f6\u671f\u6bd4\uff0c\u518d\u4e5f\u56de\u4e0d\u53bb\u4e86\uff0c\u6709\u592a\u591a\u5176\u4ed6\u56e0\u7d20\u5f71\u54cd\u4e4b\u540e\uff0c\u6211\u4e0d\u518d\u60f3\u82b1\u66f4\u591a\u65f6\u95f4\u4e86\uff0c\u53ea\u60f3\u5f53\u4f5c\u4f17\u591a\u5174\u8da3\u7684\u4e00\u79cd\u3002\n\u6bd4\u5982\u6211\u559c\u6b22\u5f88\u591a\u5404\u79cd\u5404\u6837\u7684\u4e50\u961f\uff0c\u5bf9\u4ed6\u4eec\u5e73\u65f6\u5728\u5e72\u4ec0\u4e48\u4e00\u70b9\u5174\u8da3\u4e5f\u65e0\uff0c\u53ea\u5bf9\u53d1\u6b4c\u53d1\u4e13\u8f91\u548c\u5de1\u6f14 live \u611f\u5174\u8da3\u3002<\/p>\n\n<\/details><\/p>\n\n]]>"},{"title":"\u8bb0\u5f55\u4e00\u4e0b\u6574\u7406\u8ba2\u9605\u8bb0\u5f55 Notion \u8868\u683c\u7684\u8fc7\u7a0b","link":"https:\/\/zhuzi.dev\/posts\/2024-06-28-subscription-tracker\/","pubDate":"Fri, 28 Jun 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-06-28-subscription-tracker\/","description":"<p>\u5982\u6807\u9898\uff0c\u5728 Notion \u91cc\u6574\u7406\u4e86\u5927\u81f4\u7684\u8ba2\u9605\u8bb0\u5f55\u6570\u636e\u3002<\/p>\n<ol>\n<li>\u641c\u7d22\u4e86\u4e00\u4e0b\uff0c\u641c\u51fa Notion \u7684\u4e00\u7bc7\u6a21\u7248\u4ecb\u7ecd\uff1a<a href=\"https:\/\/www.notion.so\/templates\/collections\/top-10-free-subscription-tracker-templates-in-notion\">Top 10 Free Subscription Tracker Templates<\/a><\/li>\n<li>\u8fd9 10 \u4e2a\u6a21\u677f\u91cc\u9762\u5927\u81f4\u4e86\u89e3\u6216\u8005\u7b80\u5355\u8bd5\u7528\u4e86\u4e00\u4e0b\u4e4b\u540e\uff0c\u6bd4\u8f83\u559c\u6b22<a href=\"https:\/\/butternut-canid-9ad.notion.site\/Subscription-Tracker-c9f10fdaa62044eda1f75d39a8a484aa\">\u7b2c 6 \u4e2a\u6a21\u677f<\/a>\uff0c\u6240\u4ee5 Duplicate \u4e86\u5b83<\/li>\n<li>\u672c\u4ee5\u4e3a\u5c31\u7ee7\u7eed\u76f4\u63a5\u586b\u8ba2\u9605\u7684\u670d\u52a1\/\u5185\u5bb9\u548c\u4ef7\u683c\u6570\u5b57\u5c31\u53ef\u4ee5\u4e86\uff0c\u7ed3\u679c\u53d1\u73b0\u5982\u4e0b\u95ee\u9898\uff1a<\/li>\n<\/ol>\n<ul>\n<li>\u8001\u5916\u505a\u7684\u6a21\u677f\uff0c\u9996\u5148 Currency \u663e\u793a\u7684\u90fd\u9ed8\u8ba4\u662f USD\u3002\n<ul>\n<li>\u8fd9\u4e2a\u4e0d\u662f\u5927\u4e8b\uff0c\u5c31\u662f\u5f97\u6240\u6709\u548c\u6570\u5b57\u76f8\u5173\u7684\u5730\u65b9\u90fd\u5f97\u624b\u52a8\u4fee\u6539\u4e00\u4e0b format \u4e3a yuan\u3002<\/li>\n<li>\u4e0d\u8fc7\uff0c\u5176\u5b9e\u6709\u7684\u670d\u52a1\u6211\u652f\u4ed8\u7684\u5176\u5b9e\u4e5f\u662f USD\uff0c\u4f46\u5168\u90fd\u6362\u7b97\u6210\u4e86 CNY\uff0c\u662f\u4e3a\u4e86\u65b9\u4fbf\u7edf\u8ba1\u3002\u6c47\u7387\u4f1a\u5c3d\u91cf\u4f7f\u7528\u652f\u4ed8\u7684\u65f6\u95f4\u70b9\u7684\u6c47\u7387\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u51e0\u4e4e\u6240\u6709\u7684\u6a21\u677f\u90fd\u6709\u4e2a\u901a\u75c5\uff0c\u9ed8\u8ba4\u6bcf\u5e74\u90fd\u662f\u4e00\u6837\u7684\u4ef7\u94b1\u3002\u5b9e\u9645\u4e0a\uff0c\u6bcf\u5e74\u7684\u4ef7\u94b1\u90fd\u53ef\u80fd\u4e0d\u4e00\u6837\uff0c\u9047\u5230\u4f18\u60e0\u6d3b\u52a8\u662f\u4f1a\u4e0d\u4e00\u6837\u7684\u3002<\/li>\n<li>\u9ed8\u8ba4\u4e00\u5e74\u5c31\u662f\u6807\u51c6\u7684 365 \u5929\uff0c\u4eca\u5e74\u662f 10 \u6708 26 \u65e5\u5f00\u59cb\uff0c\u90a3\u4e48\u670d\u52a1\u622a\u6b62\u5c31\u662f\u660e\u5e74\u7684 10 \u6708 26 \u65e5\u3002\u5b9e\u9645\u4e0a\u4e0d\u662f\u6bcf\u5bb6\u516c\u53f8\u90fd\u662f\u8fd9\u6837\uff0c\u6709\u7684\u8ba4\u4e3a\u4e00\u5e74\u662f 372 \u5929\uff0c\u6709\u7684\u8ba4\u4e3a\u4e00\u5e74\u662f 366 \u5929\u3002\u8fd8\u6709\u4e9b\u4f1a\u56e0\u4e3a\u4f18\u60e0\u6d3b\u52a8\u989d\u5916 bonus \u4e00\u5929\u4e00\u5468\u6216\u4e00\u6708\uff0c\u8fd9\u4e9b\u5168\u90fd\u4f1a\u5bfc\u81f4\u670d\u52a1\u5230\u671f\u7684\u65f6\u95f4\u5e76\u4e0d\u662f\u53ef\u4ee5\u7b80\u5355 formula \u8ba1\u7b97\u7684\u3002<\/li>\n<li>\u6ca1\u8003\u8651\u8fc7\u4e70\u65ad\u5236\u7684\u60c5\u51b5\u3002<\/li>\n<\/ul>\n<ol start=\"4\">\n<li>\u7206\u6539\u6a21\u677f\uff0c\u4e3b\u8981\u662f\u6539\u6570\u636e\u5e93\u7ed3\u6784<\/li>\n<li>\u5728\u5404\u4e2a\u5730\u65b9\u627e\u56de\/\u641c\u96c6\u8ba2\u9605\u7684\u670d\u52a1\u7684\u76f8\u5173\u6570\u636e\uff0c\u586b\u5165\u8868\u683c<\/li>\n<\/ol>\n<p>\u603b\u7684\u6765\u8bf4\uff0c\u6211\u7684\u601d\u8def\u662f\uff0c\u57fa\u7840\u7684 Database \u5e94\u8be5\u6709 4 \u5f20\u8868\uff1a<\/p>","content":"<![CDATA[<p>\u5982\u6807\u9898\uff0c\u5728 Notion \u91cc\u6574\u7406\u4e86\u5927\u81f4\u7684\u8ba2\u9605\u8bb0\u5f55\u6570\u636e\u3002<\/p>\n<ol>\n<li>\u641c\u7d22\u4e86\u4e00\u4e0b\uff0c\u641c\u51fa Notion \u7684\u4e00\u7bc7\u6a21\u7248\u4ecb\u7ecd\uff1a<a href=\"https:\/\/www.notion.so\/templates\/collections\/top-10-free-subscription-tracker-templates-in-notion\">Top 10 Free Subscription Tracker Templates<\/a><\/li>\n<li>\u8fd9 10 \u4e2a\u6a21\u677f\u91cc\u9762\u5927\u81f4\u4e86\u89e3\u6216\u8005\u7b80\u5355\u8bd5\u7528\u4e86\u4e00\u4e0b\u4e4b\u540e\uff0c\u6bd4\u8f83\u559c\u6b22<a href=\"https:\/\/butternut-canid-9ad.notion.site\/Subscription-Tracker-c9f10fdaa62044eda1f75d39a8a484aa\">\u7b2c 6 \u4e2a\u6a21\u677f<\/a>\uff0c\u6240\u4ee5 Duplicate \u4e86\u5b83<\/li>\n<li>\u672c\u4ee5\u4e3a\u5c31\u7ee7\u7eed\u76f4\u63a5\u586b\u8ba2\u9605\u7684\u670d\u52a1\/\u5185\u5bb9\u548c\u4ef7\u683c\u6570\u5b57\u5c31\u53ef\u4ee5\u4e86\uff0c\u7ed3\u679c\u53d1\u73b0\u5982\u4e0b\u95ee\u9898\uff1a<\/li>\n<\/ol>\n<ul>\n<li>\u8001\u5916\u505a\u7684\u6a21\u677f\uff0c\u9996\u5148 Currency \u663e\u793a\u7684\u90fd\u9ed8\u8ba4\u662f USD\u3002\n<ul>\n<li>\u8fd9\u4e2a\u4e0d\u662f\u5927\u4e8b\uff0c\u5c31\u662f\u5f97\u6240\u6709\u548c\u6570\u5b57\u76f8\u5173\u7684\u5730\u65b9\u90fd\u5f97\u624b\u52a8\u4fee\u6539\u4e00\u4e0b format \u4e3a yuan\u3002<\/li>\n<li>\u4e0d\u8fc7\uff0c\u5176\u5b9e\u6709\u7684\u670d\u52a1\u6211\u652f\u4ed8\u7684\u5176\u5b9e\u4e5f\u662f USD\uff0c\u4f46\u5168\u90fd\u6362\u7b97\u6210\u4e86 CNY\uff0c\u662f\u4e3a\u4e86\u65b9\u4fbf\u7edf\u8ba1\u3002\u6c47\u7387\u4f1a\u5c3d\u91cf\u4f7f\u7528\u652f\u4ed8\u7684\u65f6\u95f4\u70b9\u7684\u6c47\u7387\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u51e0\u4e4e\u6240\u6709\u7684\u6a21\u677f\u90fd\u6709\u4e2a\u901a\u75c5\uff0c\u9ed8\u8ba4\u6bcf\u5e74\u90fd\u662f\u4e00\u6837\u7684\u4ef7\u94b1\u3002\u5b9e\u9645\u4e0a\uff0c\u6bcf\u5e74\u7684\u4ef7\u94b1\u90fd\u53ef\u80fd\u4e0d\u4e00\u6837\uff0c\u9047\u5230\u4f18\u60e0\u6d3b\u52a8\u662f\u4f1a\u4e0d\u4e00\u6837\u7684\u3002<\/li>\n<li>\u9ed8\u8ba4\u4e00\u5e74\u5c31\u662f\u6807\u51c6\u7684 365 \u5929\uff0c\u4eca\u5e74\u662f 10 \u6708 26 \u65e5\u5f00\u59cb\uff0c\u90a3\u4e48\u670d\u52a1\u622a\u6b62\u5c31\u662f\u660e\u5e74\u7684 10 \u6708 26 \u65e5\u3002\u5b9e\u9645\u4e0a\u4e0d\u662f\u6bcf\u5bb6\u516c\u53f8\u90fd\u662f\u8fd9\u6837\uff0c\u6709\u7684\u8ba4\u4e3a\u4e00\u5e74\u662f 372 \u5929\uff0c\u6709\u7684\u8ba4\u4e3a\u4e00\u5e74\u662f 366 \u5929\u3002\u8fd8\u6709\u4e9b\u4f1a\u56e0\u4e3a\u4f18\u60e0\u6d3b\u52a8\u989d\u5916 bonus \u4e00\u5929\u4e00\u5468\u6216\u4e00\u6708\uff0c\u8fd9\u4e9b\u5168\u90fd\u4f1a\u5bfc\u81f4\u670d\u52a1\u5230\u671f\u7684\u65f6\u95f4\u5e76\u4e0d\u662f\u53ef\u4ee5\u7b80\u5355 formula \u8ba1\u7b97\u7684\u3002<\/li>\n<li>\u6ca1\u8003\u8651\u8fc7\u4e70\u65ad\u5236\u7684\u60c5\u51b5\u3002<\/li>\n<\/ul>\n<ol start=\"4\">\n<li>\u7206\u6539\u6a21\u677f\uff0c\u4e3b\u8981\u662f\u6539\u6570\u636e\u5e93\u7ed3\u6784<\/li>\n<li>\u5728\u5404\u4e2a\u5730\u65b9\u627e\u56de\/\u641c\u96c6\u8ba2\u9605\u7684\u670d\u52a1\u7684\u76f8\u5173\u6570\u636e\uff0c\u586b\u5165\u8868\u683c<\/li>\n<\/ol>\n<p>\u603b\u7684\u6765\u8bf4\uff0c\u6211\u7684\u601d\u8def\u662f\uff0c\u57fa\u7840\u7684 Database \u5e94\u8be5\u6709 4 \u5f20\u8868\uff1a<\/p>\n<ul>\n<li><strong>Payments<\/strong>\n<ul>\n<li>\u7406\u89e3\u6210 Order History\u3002\u5b9e\u9645\u4e0a\u6211\u4e5f\u662f\u81ea\u5df1\u53bb\u5230\u6bcf\u4e2a\u6211\u4f7f\u7528\u7684\u670d\u52a1\uff0c\u6bd4\u5982\u7f51\u6613\u4e91\u97f3\u4e50\u91cc\u627e\u8ba2\u5355\u5386\u53f2\uff0c\u628a\u5b83\u4eec\u4e00\u4e2a\u4e2a\u586b\u5165\u8868\u683c\u3002<\/li>\n<li>\u5efa\u7acb <strong>Payments<\/strong> \u548c <strong>Subscriptions<\/strong> \u7684 Relation\uff0c\u8fd9\u6837\u5c31\u77e5\u9053\u662f\u4ec0\u4e48\u670d\u52a1\u7684\u8ba2\u5355\u6570\u636e\u3002<\/li>\n<li>\u8fc7\u5f80\u7684\u8ba2\u5355\u6211\u4e5f\u5168\u90e8\u6574\u7406\u51fa\u6765\u4e86\uff0c\u8fd9\u6837\u4e5f\u65b9\u4fbf\u770b\u6bcf\u5e74\u7684\u4ef7\u94b1\u53d8\u66f4\u3002\u6bd4\u5982\u6211\u628a\u767e\u5ea6\u76d8\u7684 SVIP \u5217\u51fa\u6765\u624d\u53d1\u73b0\u524d\u5e74\u4e70\u8d35\u4e86\uff08\u00a5298\uff09\uff0c\u53bb\u5e74\u53ea\u9700\u8981 \u00a5178 \u7684\u3002<\/li>\n<li>\u53e6\u5916\uff0c\u670d\u52a1\u7684\u622a\u6b62\u65e5\u671f\u662f\u6211\u624b\u52a8\u586b\u7684\uff0c\u5e76\u975e\u81ea\u52a8\u8ba9\u5b83\u4ece\u8d77\u59cb\u65e5\u671f\u5f80\u4e0a\u6dfb\u52a0\u6807\u51c6\u7684 365 \u5929\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>Subscriptions<\/strong>\n<ul>\n<li>\u6bcf\u4e00\u6761\u5c31\u662f\u4e00\u4e2a\u6b63\u5728\u4f7f\u7528\u6216\u8005\u4f7f\u7528\u8fc7\u7684 App\/Service\u3002<\/li>\n<li>\u540d\u5b57\u4f1a\u88ab <strong>Payments<\/strong> \u91cc\u5f15\u7528\u4e00\u6b21\u6216\u591a\u6b21\uff0c\u770b\u4f60\u4ed8\u8fc7\u591a\u5c11\u6b21\u94b1\u3002<\/li>\n<li>\u6dfb\u52a0\u4e00\u680f\u7528\u6765\u6807\u8bc6\u662f\u5426\u662f\u4e70\u65ad\u7684 Lifetime\u3002\u8fd9\u6837\uff0c\u81f3\u5c11\u6211\u80fd\u4e00\u76ee\u4e86\u7136\uff0c\u6211\u4e70\u65ad\u4e86\uff0c\u4e0d\u5b58\u5728 Next Payment Date \u4e86\u3002<\/li>\n<li>\u4e00\u4e2a\u670d\u52a1\u6709\u8fc7\u5f88\u591a\u6b21\u8ba2\u5355\u7684\u8bdd\uff0c\u53ef\u4ee5\u4f7f\u7528 Rollup \u4ec5\u83b7\u53d6\u5bf9\u5e94\u7684\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u7684\u8ba2\u5355\u3002\u4e5f\u53ef\u4ee5\u5c06\u6240\u6709\u8fc7\u5f80\u7684\u8ba2\u5355\u96c6\u4e2d\uff0c\u7136\u540e\u5c31\u53ef\u4ee5\u8ba1\u7b97\u81f3\u4eca\u4e3a\u6b62\u82b1\u8fc7\u7684\u603b\u989d\u4e86\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>Categories<\/strong>\n<ul>\n<li>\u4e5f\u5c31\u662f\u7c7b\u522b\uff0c\u81ea\u5df1\u505a\u7b80\u5355\u7684\u5206\u7c7b\uff0cEntertainment\uff0cMusic\uff0cReading\uff0cEducation, Health &amp; Fitness \u7b49\u7b49\u3002<\/li>\n<li><strong>Subscriptions<\/strong> \u91cc\u6dfb\u52a0 Category \u4e00\u680f\u6765\u5efa\u7acb Relation\uff0c\u8fd9\u6837\u53c8\u53ef\u4ee5\u8ba1\u7b97\u8fd9\u4e2a\u7c7b\u522b\u7684\u6d88\u8d39\u603b\u989d\u4e86\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>Total Cost<\/strong>\n<ul>\n<li>\u6700\u7b80\u5355\uff0c\u5c31\u662f\u8ba1\u7b97\u6240\u6709\u8ba2\u9605\u670d\u52a1\u7684\u603b\u548c\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u6211\u4e3b\u8981\u5c31\u662f\u52a0\u4e86\u4e00\u4e2a Payments \u7684\u8868\uff0c\u7136\u540e\u628a\u5f88\u591a Subscriptions \u548c Categories \u91cc\u7684 Relation \u548c Rollup \u8c03\u6574\u4e86\u4e00\u904d\uff0c\u6709\u4e00\u4e9b Formula \u4e5f\u6839\u636e\u81ea\u5df1\u7684\u9700\u6c42\u8c03\u6574\u4e86\u4e00\u4e0b\u3002<\/p>\n<p>\u7b2c\u4e00\u6b21\u7528 Notion \u8868\u683c Relation \u548c Rollup \u7684\u529f\u80fd\uff0c\u633a\u6709\u610f\u601d\u7684\uff0c\u4f46\u8fd8\u662f\u4e0d\u591f\u7075\u6d3b\uff0c<a href=\"https:\/\/www.notion.so\/help\/relations-and-rollups\">\u6587\u6863\u53c2\u8003<\/a>\u3002<\/p>\n<p>\u63d0\u4f9b\u6211\u7206\u6539\u8fc7\u540e\u7684 Template \u4f9b\u53c2\u8003\uff0c<a href=\"https:\/\/bambooo.notion.site\/Subscription-Tracker-Template-7fae482b972b499eb5cc0830b353e1e0\">\u70b9\u51fb\u6b64\u5904<\/a>\u3002<\/p>\n]]>"},{"title":"\u7c97\u7cd9\u7684\u6574\u7406\u6536\u7eb3\u5fc3\u5f97","link":"https:\/\/zhuzi.dev\/posts\/2024-06-07-tidy-up\/","pubDate":"Fri, 07 Jun 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-06-07-tidy-up\/","description":"<p>\u6628\u5929\u8ddf\u4e00\u4f4d\u670b\u53cb\u8bf4\uff08\u7b2c\u4e8c\u6b21\uff09\u5931\u4e1a\u540e\u7684\u4e0a\u4e2a\u6708\uff0c\u4e3b\u8981\u5728\u6574\u7406\u65b0\u623f\u5b50\u91cc\u7684\u4e1c\u897f\uff0c\u66f4\u51c6\u786e\u8bf4\u662f\u4e66\u623f\u3002\u5bf9\u65b9\u7684\u53cd\u5e94\u662f\u201c\u6574\u7406\u8fd9\u4e48\u4e45\u554a\u201d\u3002\u867d\u7136\u6211\u4e5f\u4e0d\u662f\u8bf4\u82b1\u4e86\u767e\u5206\u767e\u7684\u65f6\u95f4\uff08\u53ef\u80fd\u4e5f\u5c31\u4e00\u534a\u65f6\u95f4\u5427\uff09\uff0c\n\u4f46\u5c31\u60f3\u53cd\u9a73\u4ed6\u4f3c\u4e4e\u89c9\u5f97\u6574\u7406\u6536\u7eb3\u4e0d\u82b1\u65f6\u95f4\u7684\u60f3\u6cd5\uff0c\u5f53\u573a\u5927\u81f4\u603b\u7ed3\u4e86\u4e0b\u6574\u7406\u7684\u6b65\u9aa4\u56de\u590d\u7ed9\u4ed6\u3002\n\u6211\u7684\u610f\u601d\u662f\u60f3\u8bc1\u660e\u8fd9\u662f\u9700\u8981\u82b1\u65f6\u95f4\u548c\u7cbe\u529b\u7684\uff0c\u5bb6\u5ead\u4e3b\u5987\u4e5f\u662f\u6709\u6280\u672f\u542b\u91cf\u7684\uff0c\u9042\u5750\u5728\u5730\u94c1\u4e0a\u6fc0\u60c5\u8f93\u51fa\u5982\u4e0b\u6b65\u9aa4\uff0c\u4ec5\u4f9b\u53c2\u8003\u3002<\/p>","content":"<![CDATA[<p>\u6628\u5929\u8ddf\u4e00\u4f4d\u670b\u53cb\u8bf4\uff08\u7b2c\u4e8c\u6b21\uff09\u5931\u4e1a\u540e\u7684\u4e0a\u4e2a\u6708\uff0c\u4e3b\u8981\u5728\u6574\u7406\u65b0\u623f\u5b50\u91cc\u7684\u4e1c\u897f\uff0c\u66f4\u51c6\u786e\u8bf4\u662f\u4e66\u623f\u3002\u5bf9\u65b9\u7684\u53cd\u5e94\u662f\u201c\u6574\u7406\u8fd9\u4e48\u4e45\u554a\u201d\u3002\u867d\u7136\u6211\u4e5f\u4e0d\u662f\u8bf4\u82b1\u4e86\u767e\u5206\u767e\u7684\u65f6\u95f4\uff08\u53ef\u80fd\u4e5f\u5c31\u4e00\u534a\u65f6\u95f4\u5427\uff09\uff0c\n\u4f46\u5c31\u60f3\u53cd\u9a73\u4ed6\u4f3c\u4e4e\u89c9\u5f97\u6574\u7406\u6536\u7eb3\u4e0d\u82b1\u65f6\u95f4\u7684\u60f3\u6cd5\uff0c\u5f53\u573a\u5927\u81f4\u603b\u7ed3\u4e86\u4e0b\u6574\u7406\u7684\u6b65\u9aa4\u56de\u590d\u7ed9\u4ed6\u3002\n\u6211\u7684\u610f\u601d\u662f\u60f3\u8bc1\u660e\u8fd9\u662f\u9700\u8981\u82b1\u65f6\u95f4\u548c\u7cbe\u529b\u7684\uff0c\u5bb6\u5ead\u4e3b\u5987\u4e5f\u662f\u6709\u6280\u672f\u542b\u91cf\u7684\uff0c\u9042\u5750\u5728\u5730\u94c1\u4e0a\u6fc0\u60c5\u8f93\u51fa\u5982\u4e0b\u6b65\u9aa4\uff0c\u4ec5\u4f9b\u53c2\u8003\u3002<\/p>\n<ol>\n<li>\u9996\u5148\u9700\u8981\u7406\u6e05\u81ea\u5df1\u6709\u4e9b\u4ec0\u4e48\u4e1c\u897f\uff0caka \u628a\u6240\u6709\u4e1c\u897f\u90fd\u644a\u5f00\u6765\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\u5982\u679c\u53d1\u73b0\u5176\u5b9e\u6709\u4e0d\u9700\u8981\u7684\u53ef\u4ee5\u6254\u7684\u4e1c\u897f\u7684\uff0c\u5c31\u76f4\u63a5\u6254\u6389\u5427<\/li>\n<li>\u5206\u7c7b\u805a\u7c7b<\/li>\n<li>\u524d\u4e24\u6b65\u5176\u5b9e\u662f\u87ba\u65cb\u7ed3\u5408\u5728\u4e00\u8d77\u7684\u3002\u56e0\u4e3a\u628a\u4e1c\u897f\u62ff\u51fa\u6765\u644a\u5f00\u7684\u65f6\u5019\u5c31\u53ef\u4ee5\u60f3\u7740\u5206\u7c7b\u4e86\uff0c\u9664\u975e\u662f\u65e0\u6cd5\u7b80\u5355\u5206\u7c7b\u7684\u73a9\u610f\u513f\u3002\n<ul>\n<li>\u8981\u6254\u7684\u3001\u8981\u5356\u4e8c\u624b\u7684\u3001\u8981\u9001\u4eba\u7684\u90fd\u53ef\u4ee5\u5355\u72ec\u6210\u4e3a\u4e00\u7c7b\u561b\u3002<\/li>\n<li>\u518d\u8005\uff0c\u4e5f\u53ef\u80fd\u5168\u90e8\u644a\u5f00\u540e\u53d1\u73b0\u6570\u91cf\u6ca1\u591a\u5c11\uff0c\u4e0d\u5fc5\u5206\u7c7b\u4e5f\u53ef\u4ee5\u3002<\/li>\n<li>\u6216\u8005\u4e5f\u6709\u53ef\u80fd\u644a\u5f00\u6765\u53d1\u73b0\u53e6\u5916\u4e00\u79cd\u5206\u7c7b\u65b9\u5f0f\u66f4\u5408\u9002\uff0c\u6240\u4ee5\u91cd\u65b0\u6574\u7406\u5206\u7c7b\u4e5f\u53ef\u4ee5\uff0c\u8fd9\u7eaf\u7cb9\u53d6\u51b3\u4e8e  \u81ea\u5df1\u7684\u559c\u597d\u3001\u4e60\u60ef\u548c\u5224\u65ad\u3002<\/li>\n<li>\u6bd4\u5982\u6211\u6709\u4e0d\u5c11\u4e8c\u6b21\u5143\u5468\u8fb9\u624b\u529e\uff0c\u662f\u540c\u4e00\u4e2a\u7cfb\u5217\u7684\u4f5c\u54c1\u5206\u5728\u4e00\u8d77\uff0c\u8fd8\u662f\u6309\u7c7b\u522b\u5206\uff08\u7acb\u724c\/\u5851\u6599\u5c0f\u4eba\/\u626d\u86cb\uff09\uff0c\u5176\u5b9e\u90fd\u53ef\u884c\uff0c\u81ea\u5df1\u770b\u7740\u987a\u773c\u5c31\u884c\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u63a5\u4e0b\u6765\u6839\u636e\u81ea\u5df1\u5bb6\u91cc\u7684\u67dc\u5b50\u3001\u7a7a\u95f4\u7684\u5b9e\u9645\u5927\u5c0f\u5c3a\u5bf8\u518d\u6765\u5177\u4f53\u8bbe\u8ba1\u5e94\u8be5\u600e\u4e48\u6446\u653e\u6bd4\u8f83\u7b26\u5408\u81ea\u5df1\u7684\u4f7f\u7528\u4e60\u60ef\n<ul>\n<li>\u6bd4\u5982\u6211\u7684\u4e66\u7c4d\u5206\u7c7b\u5927\u81f4\u662f\uff1a\u5927\u5b66\u7b14\u8bb0\u8bb2\u4e49\/\u65e5\u8bed\u5b66\u4e60\u7c7b\/\u8ba1\u7b97\u673a\u79d1\u5b66\u6280\u672f\u7c7b\/\u91d1\u878d\u7c7b\/\u6570\u5b66\u7c7b\/\u5c0f\u8bf4\u6563\u6587\u7c7b\/\u6f2b\u753b\uff0c\u4e66\u662f\u76f4\u63a5\u5f80\u67dc\u5b50\u91cc\u653e\uff0c\u4e0d\u9700\u8981\u7279\u5b9a\u7684\u6536\u7eb3\u914d\u4ef6\uff0c\u4f46\u662f\u67dc\u5b50\u5e94\u8be5\u653e\u54ea\u4e00\u9601\u90a3\u4e00\u5c42\uff0c\u662f\u9700\u8981\u8003\u8651\u4f7f\u7528\u9891\u7387\u4f7f\u7528\u4e60\u60ef\u7684\u3002\u4e00\u5f00\u59cb\u6211\u60f3\u7740\u65e5\u8bed\u5b66\u4e60\u7c7b\u5e94\u8be5\u5f88\u5c11\u7528\u4e86\uff0c\u5c31\u5f80\u6700\u9876\u5c42\u53bb\u653e\u4e86\uff0c\u800c\u4e14\u6b63\u597d\u5168\u90e8\u585e\u8fdb\u4e86\u8fd9\u4e00\u5c42\u3002\u7ed3\u679c\u540e\u7eed\uff0c\u6211\u5988\u53c8\u4ece\u5bb6\u91cc\u5bc4\u6765\u4e86\u56db\u7bb1\u65e7\u4e66\uff0c\u91cc\u9762\u5c31\u6709\u5927\u5b66\u7684\u7b14\u8bb0\u548c\u8bb2\u4e49\uff0c\u4e5f\u5305\u62ec\u51e0\u672c\u8fd8\u6ca1\u8bfb\u8fc7\u7684\u65e5\u8bed\u8bed\u6cd5\u4e66\u4e4b\u7c7b\u7684\u3002\u610f\u8bc6\u5230\u5927\u5b66\u7b14\u8bb0\u8bb2\u4e49\u624d\u662f\u90a3\u4e2a\u66f4\u4e0d\u4f1a\u7528\u5230\u7684\uff08\u4f46\u6211\u5c31\u662f\u786c\u751f\u751f\u7559\u4e86\u5341\u51e0\u5e74\u54c8\u54c8\u54c8\u54c8\u54c8\ud83d\ude02\uff09\uff0c\u5c31\u628a\u65e5\u8bed\u4e66\u7684\u4f4d\u7f6e\u6362\u5230\u4e86\u4f4e\u5c42\u4e0d\u9700\u8981\u7528\u68af\u5b50\u5c31\u80fd\u591f\u5230\u7684\u5927\u4e00\u70b9\u7684\u9694\u95f4\uff0c\u628a\u5927\u5b66\u7b14\u8bb0\u8bb2\u4e49\u585e\u5230\u4e86\u6700\u4e0a\u5c42\uff0c\u4e5f\u5c31\u662f\u539f\u672c\u65e5\u8bed\u4e66\u7684\u4f4d\u7f6e\u4e0a\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u641c\u7d22\u6a59\u8272\u7c7b\u8f6f\u4ef6\uff0c\u5bfb\u627e\u5408\u9002\u7684\u6536\u7eb3\u5c55\u793a\u914d\u4ef6\uff0c\u5c3a\u5bf8\u975e\u5e38\u91cd\u8981\uff0c\u5185\u5f84\u5916\u5f84\u90fd\u8981\u4ed4\u7ec6\u8be2\u95ee\u5e97\u5bb6\u7b97\u8fdb\u8bbe\u8ba1\u91cc\uff0c\u9664\u975e\u4f60\u5bb6\u662f\u90a3\u79cd 5000 \u5e73\u5927\u8c6a\u5b85\uff0c\u5168\u90e8\u653e\u5728\u5730\u4e0a\u90fd\u6ca1\u4e8b<\/li>\n<li>\u4e0a\u9762\u4e24\u6b65\u5176\u5b9e\u4e5f\u662f\u76f8\u4e92\u7ea0\u7f20\u5728\u4e00\u8d77\u7684\u3002\u56e0\u4e3a\u6536\u7eb3\u7684\u79cd\u7c7b\u4e5f\u975e\u5e38\u7e41\u591a\uff0c\u53ef\u80fd\u6709\u4e9b\u4e1c\u897f\u662f\u4f60\u4e4b\u524d\u4e0d\u77e5\u9053\u6ca1\u60f3\u8fc7\u7684\uff0c\u770b\u5230\u5c31\u4f1a\u89c9\u5f97\u53d1\u73b0\u65b0\u5927\u9646\u4e86\n<ul>\n<li>\u867d\u7136\u5927\u90e8\u5206\u4e66\u90fd\u4e0d\u9700\u8981\u7279\u5b9a\u6536\u7eb3\u914d\u4ef6\uff0c\u6bd4\u8f83\u4f8b\u5916\u7684\u662f\u6f2b\u753b\u3002\u56e0\u4e3a\u6f2b\u753b\u7684\u5c3a\u5bf8\u5f88\u5c0f\uff0c\u4e66\u67dc\u7684\u4e00\u5c42\u7684\u9ad8\u5ea6\u4e00\u822c\u90fd\u662f\u7b97\u9ad8\u7684\uff0c\u4e8e\u662f\u5c31\u53ef\u4ee5\u8003\u8651\u5728\u6709\u9700\u8981\u7684\u65f6\u5019\u518d\u7ed9\u5b83\u52a0\u4e00\u5c42\u4e9a\u514b\u529b\u9694\u677f\uff0c\u8fd9\u6837\u6536\u7eb3\u5bb9\u91cf\u7acb\u9a6c\u7ffb\u500d\u3002\u7a7a\u95f4\u6709\u9650\uff0c\u8bbe\u8ba1\u4e66\u67dc\u7684\u65f6\u5019\u6ca1\u6709\u7279\u610f\u53bb\u4e3a\u4e86\u6f2b\u753b\u8003\u8651\uff0c\u539f\u56e0\u4e5f\u662f\u6211\u4e5f\u4e0d\u662f\u771f\u7684\u6709\u4e00\u9762\u5899\u90a3\u4e48\u5927\u6570\u91cf\u7684\u6f2b\u753b\u3002\u5982\u679c\u771f\u7684\u672c\u6765\u5c31\u6709\u90a3\u4e48\u5927\u7684\u6570\u91cf\uff0c\u4ece\u88c5\u4fee\u8bbe\u8ba1\u7684\u9636\u6bb5\u5c31\u4f1a\u76f4\u63a5\u8003\u8651\u4e86\u3002<\/li>\n<li>\u518d\u6bd4\u5982\u6d1e\u6d1e\u677f\uff0c\u591a\u5e74\u524d\u662f\u6ca1\u6709\u8fd9\u79cd\u4e1c\u897f\u51fa\u73b0\u7684\uff0c\u73b0\u5728\u662f\u7ecf\u5e38\u4f1a\u7eb3\u5165\u8003\u8651\u8303\u56f4\u7684\u914d\u4ef6\u4e86\u3002\u4e5f\u8bb8\u53c8\u51fa\u4e86\u4e9b\u65b0\u7684\u914d\u4ef6\u65b0\u7684\u65b9\u5f0f\uff0c\u6bd4\u5982\u6211\u524d\u5929\u624d\u77e5\u9053\u8fd8\u6709\u79cd\u6bdb\u6be1\u677f\/\u6bdb\u6be1\u6d1e\u6d1e\u677f\uff0c\u672c\u4f53\u975e\u5e38\u8f7b\uff0c\u4e5f\u662f\u8f6f\u7684\uff0c\u662f\u8d34\u5728\u5899\u4e0a\u7684\uff0c\u4e0d\u80fd\u6302\u91cd\u7684\u4e1c\u897f\uff0c\u4f46\u662f\u53ea\u662f\u653e\u88c5\u9970\u6027\u7684\u5c0f\u73a9\u610f\u513f\u7684\u8bdd\u611f\u89c9\u6bd4\u666e\u901a\u94c1\u5236\u7684\u6d1e\u6d1e\u677f\u6765\u7684\u5408\u9002\u3002\u6302\u5728\u5899\u4e0a\u7684\u6d1e\u6d1e\u677f\u8981\u7a33\u7684\u8bdd\u8fd8\u662f\u9700\u8981\u9489\u5b50\u7684\u5427\uff0c\u800c\u4e14\u672c\u4f53\u53c8\u5f88\u91cd\uff0c\u6ca1\u6302\u7a33\u6389\u4e0b\u6765\u7684\u8bdd\u611f\u89c9\u4f1a\u628a\u4e0b\u65b9\u7684\u7269\u54c1\u4e00\u8d77\u6454\u574f\ud83d\ude02<\/li>\n<li>\u9664\u5f00\u529f\u80fd\u6027\u7684\u6536\u7eb3\uff0c\u8fd8\u6709\u4e00\u4e2a\u540c\u65f6\u4f1a\u8003\u8651\u7684\u662f\u505a\u5c55\u793a\u88c5\u9970\uff0c\u6bd5\u7adf\u5f88\u591a\u4e1c\u897f\u4e70\u56de\u6765\u662f\u60f3\u6446\u51fa\u6765\u5f53\u88c5\u9970\u7684\u561b\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u4e0b\u5355\u7b49\u6536\u8d27\u4e4b\u540e\uff0c\u5f00\u59cb\u4e86\u7ec4\u88c5\u586b\u5145\u3002\n<ul>\n<li>\u4f46\u4e5f\u6709\u53ef\u80fd\u56de\u5230\u8bbe\u8ba1\u7684\u6b65\u9aa4\uff0c\u56e0\u4e3a\u4f60\u53ef\u80fd\u4e70\u5230\u624d\u53d1\u73b0\u4e86\u65b0\u95ee\u9898\uff0c\u6bd4\u5982\u62a5\u770b\u554a\uff08\u8fd9\u5f88\u91cd\u8981\uff01\uff09\uff0c\u6216\u8005\u5c3a\u5bf8\u548c\u9884\u671f\u4e0d\u7b26\uff08\u6ca1\u53d1\u73b0\u5355\u72ec\u67d0\u4e00\u683c\u67dc\u5b50\u56e0\u4e3a\u67d0\u4e9b\u539f\u56e0\u53ef\u4f7f\u7528\u8303\u56f4\u6bd4\u4f60\u4ee5\u4e3a\u7684\u5c0f\u2026\u2026\uff09\uff0c\u6b64\u65f6\u53ef\u4ee5\u9009\u62e9\u9000\u8d27\u91cd\u65b0\u4e70\uff0c\u6216\u8005\u7ed9\u8fd9\u4e2a\u6536\u7eb3\u627e\u53e6\u5916\u7684\u5730\u65b9\u6446\uff08\u4e3a\u4e86\u918b\u5305\u997a\u5b50\u662f\u4e0d\u662f\u5c31\u662f\u8fd9\u4e2a\u611f\u89c9wwwww\uff09\u3002<\/li>\n<li>\u53e6\u5916\uff0c\u6bd4\u5982\u9700\u8981\u7684\u6536\u7eb3\u914d\u4ef6\u7684\u6570\u91cf\u4e0d\u6b62\u4e00\u4e2a\uff0c\u53ef\u4ee5\u5148\u5c31\u53ea\u4e70\u4e00\u4e2a\u62ff\u56de\u6765\u8bd5\u8bd5\u6548\u679c\uff0c\u786e\u8ba4\u53ef\u4ee5\u7684\u518d\u4e70\u8db3\u591f\u6570\u91cf\u3002\u4e70\u7684\u65f6\u5019\u4e5f\u9700\u8981\u786e\u8ba4\u53ef\u4ee5\u9000\u8d27\u7684\u6761\u4ef6\uff0c\u6bd4\u5982\u5f88\u591a\u4e9a\u514b\u529b\u5236\u54c1\u662f\u6709\u5c42\u4fdd\u62a4\u819c\u7684\uff0c\u4e00\u822c\u90fd\u662f\u6495\u4e86\u819c\u5c31\u4e0d\u80fd\u9000\u8d27\u4e86\u3002\u8fd8\u6709\u6709\u7684\u65f6\u5019\u5fc5\u987b\u5b9a\u5236\u5c3a\u5bf8\uff0c\u5b9a\u5236\u7684\u4e00\u822c\u4e5f\u4e0d\u80fd\u9000\u8d27\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u4e0a\u9762\u51e0\u6b65\u53ef\u4ee5\u4e0d\u65ad\u5faa\u73af\u76f4\u5230\u6240\u6709\u7269\u54c1\u90fd\u627e\u5230\u5b83\u7684\u4f4d\u7f6e<\/li>\n<li>\u8fc7\u6bb5\u65f6\u95f4\u5982\u679c\u6709\u4e86\u65b0\u7684\u7269\u54c1\u65b0\u7684\u7231\u597d\uff0c\u8fd8\u9700\u8981\u4e0d\u65ad\u8fdb\u884c\u8c03\u6574<\/li>\n<\/ol>\n<p>\u6fc0\u60c5\u8f93\u51fa\u5b8c\u6bd5\u3002<\/p>\n<p>\u6211\u60f3\u7740\u8fd9\u4e2a\u8fc7\u7a0b\u662f\u4e2a\u5b8c\u5168\u7684\u81ea\u5b9a\u4e49\u5b9a\u5236\u8fc7\u7a0b\uff0c\u5b8c\u5168\u65e0\u6cd5\u8ba9\u5176\u4ed6\u4eba\u4ee3\u52b3\uff0c\u9664\u975e\u662f\u6ca1\u6709\u591a\u5c11\u4e1c\u897f\u9700\u8981\u6574\u7406\uff0c\u53c8\u6216\u8005\u662f\u5b8c\u5168\u65e0\u6240\u8c13\u600e\u4e48\u653e\uff0c\u6ca1\u6709\u4efb\u4f55\u4e2a\u4eba\u559c\u597d\uff08\u4e0d\u592a\u73b0\u5b9e\uff09\u3002\u6240\u4ee5\u62d6\u5ef6\u4e86\u597d\u51e0\u4e2a\u6708\u65e0\u6cd5\u5f00\u59cb\uff0c\u60f3\u7740\u5c31\u77e5\u9053\u662f\u4f53\u529b\u548c\u8111\u529b\u540c\u65f6\u9700\u8981\u6d88\u8017\u7684\u5927\u5de5\u7a0b\u3002<\/p>\n]]>"},{"title":"\u4e5f\u767d\u5ad6 Cloudflare R2 \u5f53\u56fe\u5e8a\u4e86","link":"https:\/\/zhuzi.dev\/posts\/2024-05-24-cf-r2-bucket\/","pubDate":"Fri, 24 May 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-05-24-cf-r2-bucket\/","description":"<p>\u6362\u6210 Hugo \u540e\u4e00\u76f4\u5f88\u5934\u75bc\u535a\u5ba2\u7684\u90e8\u7f72\u8017\u65f6\uff0c\u57fa\u672c\u4e0a\u7684\u7528\u65f6\u662f 5-6 \u5206\u949f\uff1a<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/05\/hugo-build-time.png\" alt=\"\"  \/>\n\n<\/p>\n<p>build \u548c upload \u662f\u6700\u8017\u65f6\u95f4\u7684\u3002<\/p>\n<p>build \u8fd9\u4e00\u6b65\u5728\u6211\u672c\u5730\u5176\u5b9e\u53ea\u9700\u8981 1-2s\uff0c\u5728 GitHub Actions \u4e2d\u8dd1 workflow \u56e0\u4e3a\u6ca1\u6709 cache \u6240\u4ee5 build \u548c upload \u90fd\u5f88\u6162\u3002\n\u6240\u4ee5\u5f88\u65e9\u5c31\u840c\u751f\u8fd8\u662f\u9700\u8981\u56fe\u5e8a\u7684\u60f3\u6cd5\u4e86\u3002<\/p>","content":"<![CDATA[<p>\u6362\u6210 Hugo \u540e\u4e00\u76f4\u5f88\u5934\u75bc\u535a\u5ba2\u7684\u90e8\u7f72\u8017\u65f6\uff0c\u57fa\u672c\u4e0a\u7684\u7528\u65f6\u662f 5-6 \u5206\u949f\uff1a<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/05\/hugo-build-time.png\" alt=\"\"  \/>\n\n<\/p>\n<p>build \u548c upload \u662f\u6700\u8017\u65f6\u95f4\u7684\u3002<\/p>\n<p>build \u8fd9\u4e00\u6b65\u5728\u6211\u672c\u5730\u5176\u5b9e\u53ea\u9700\u8981 1-2s\uff0c\u5728 GitHub Actions \u4e2d\u8dd1 workflow \u56e0\u4e3a\u6ca1\u6709 cache \u6240\u4ee5 build \u548c upload \u90fd\u5f88\u6162\u3002\n\u6240\u4ee5\u5f88\u65e9\u5c31\u840c\u751f\u8fd8\u662f\u9700\u8981\u56fe\u5e8a\u7684\u60f3\u6cd5\u4e86\u3002<\/p>\n<p>\u597d\u591a\u5e74\u524d\u4f7f\u7528\u8fc7\u4e03\u725b\u4e91\u7684\u5b58\u50a8\uff0c\u5f53\u65f6\u6211\u8fd8\u6ca1\u6709\u4e70\u57df\u540d\uff0c\u5b83\u8fd8\u63d0\u4f9b\u514d\u8d39\u7684 URL \u6240\u4ee5\u89c9\u5f97\u5f88\u597d\u7528\uff0c\u8fd8\u7ed9\u5b83\u5145\u503c\u8fc7 50 \u5757\u8fd8\u662f 200 \u5757\u3002\uff08\u6ca1\u6709\u7528\u5b8c\uff0c\u5f53\u505a\u6148\u5584\u4e86\u5427\uff09\n\u67d0\u4e00\u5e74\u5f00\u59cb\u5b83\u4e0d\u63d0\u4f9b\u957f\u671f\u514d\u8d39\u7684 URL \u4e86\uff0c\u8fd8\u8981\u6c42\u7ed1\u5b9a\u5df2\u7ecf\u5907\u6848\u7684\u57df\u540d\uff0c\u5355\u7eaf\u57df\u540d\u4e5f\u5c31\u7b97\u4e86\uff0c\u8fd8\u8981\u5907\u6848\uff0c\u4e8e\u662f\u3055\u3088\u306a\u3089\u3002\n\u5f53\u65f6\u89c9\u5f97\u597d\u50cf\u4e5f\u6ca1\u6709\u51e0\u5f20\u56fe\uff0c\u4e5f\u6ca1\u6709\u5f88\u6ee1\u610f\u7684\u514d\u8d39\u6216\u4f4e\u4ef7\u56fe\u5e8a\uff08\u5f53\u65f6\u6216\u73b0\u5728\u6d41\u884c\u7684\u65b0\u6d6a\u3001\u817e\u8baf\u4e91\u3001\u963f\u91cc\u4e91\u3001\u53c8\u62cd\u4e91\u7b49\u7b49\uff0c\u5168\u90fd\u4e0d\u559c\u6b22\uff09\uff0c\u6240\u4ee5\u957f\u671f\u90fd\u6ca1\u6709\u8bbe\u7f6e\u56fe\u5e8a\uff0c\u90fd\u662f\u76f4\u63a5\u653e\u5728 GitHub \u4ed3\u5e93\u91cc\u3002<\/p>\n<p>\u75ab\u60c5\u524d\u540e\uff0c\u53d1\u751f\u4e86\u5f88\u591a\u5f88\u591a\u4e8b\uff0c\u5ba1\u67e5\u592a\u75af\u72c2\uff0c\u6211\u4e5f\u5f00\u59cb\u4e86\u5907\u4efd\u81ea\u5df1\u7684\u8c46\u74e3\u4fe1\u606f\uff0c\u6807\u8bb0\u7684\u6761\u76ee\u5728 Notion \u4e0a\u5b58\u4e86\u8868\u683c\uff0c\u73b0\u5728\u4e5f\u540c\u6b65\u5230 <a href=\"https:\/\/neodb.social\/\">NeoDB<\/a> \u4e0a\uff0c\u5199\u4e86<a href=\"..\/douban-backup\/\">\u6559\u7a0b<\/a>\u3002\n\u6211\u5728\u8c46\u74e3\u4e5f\u5199\u8fc7\u5f88\u591a\u65e5\u8bb0\uff0c\u4e5f\u5df2\u7ecf\u628a\u5b83\u4eec\u5168\u90e8\u4e0b\u8f7d\u4e0b\u6765\u653e\u5230\u8fd9\u4e2a\u535a\u5ba2\u91cc\u4e86\uff0c\u56e0\u4e3a\u5f88\u591a\u662f\u6e38\u8bb0\uff0c\u6240\u4ee5\u6709\u5f88\u591a\u5f88\u591a\u56fe\u7247\uff0c\u535a\u5ba2\u7684\u56fe\u7247\u91cf\u77ac\u95f4\u4e0a\u6765\u4e86\u3002\n\u4ed3\u5e93\u53d8\u5f97\u975e\u5e38\u81c3\u80bf\uff0c\u7ec8\u4e8e\u53c8\u5230\u4e86\u9700\u8981\u4f7f\u7528\u56fe\u5e8a\u7684\u65f6\u523b\u4e86\u3002<\/p>\n<p>\u65e9\u5148\u5c31\u5df2\u7ecf\u5728\u7528 Cloudflare \u7684 DNS \u505a\u89e3\u6790\u4e86\uff0c\u8fd1\u51e0\u5e74 Cloudflare \u7684\u529f\u80fd\u90fd\u505a\u5f97\u5f88\u597d\uff0c\u770b\u5230\u8fc7\u5f88\u591a\u4eba\u5938\u3002\n\u8fd9\u6b21\u5c31\u6ca1\u5565\u7279\u522b\u8981\u9009\u62e9\u7684\uff0c\u76f4\u63a5\u641c\u7d22\u6559\u7a0b\u4e86\uff0c\u641c\u7d22\u7684\u65f6\u5019\u624d\u77e5\u9053\u514d\u8d39\u989d\u5ea6\u6709 10G\uff0c\u662f\u771f\u7684\u5f88\u591f\u7528\u4e86\u7684\u611f\u89c9\u3002\u73b0\u5728\u535a\u5ba2\u91cc\u5df2\u6709\u7684\u56fe\u7247\u662f\u5927\u6982 420MB \u800c\u5df2\u3002<\/p>\n<p>\u7b80\u5355\u6765\u8bf4\uff0c\u6b65\u9aa4\u5c31\u662f\uff1a<\/p>\n<ol>\n<li>\u586b\u5165\u4fe1\u7528\u5361\u4fe1\u606f\uff0c\u5f00\u901a CF R2 \u5b58\u50a8\u529f\u80fd\uff0c\u8d85\u8fc7\u514d\u8d39\u989d\u5ea6\u624d\u9700\u8981\u4ed8\u8d39<\/li>\n<li>\u521b\u5efa bucket\uff0c\u6211\u662f\u53d6\u540d\u53eb blog\uff0c\u8fd9\u4e2a bucket \u4e13\u95e8\u653e\u535a\u5ba2\u91cc\u7528\u5230\u7684\u56fe\u7247<\/li>\n<li>\u7136\u540e\u9700\u8981\u7ed9 bucket \u6dfb\u52a0\u81ea\u5b9a\u4e49\u7684\u57df\u540d\uff0c\u8fd9\u91cc\u6211\u76f4\u63a5\u8bbe\u7684\u81ea\u5df1\u4e70\u7684\u57df\u540d\u7684\u4e8c\u7ea7\u57df\u540d <code>static.zhuzi.dev<\/code>\u3002\u4e00\u7ea7\u57df\u540d\u4e5f\u662f\u8ba9 CF \u7ba1\u7406\u7684\uff0c\u6240\u4ee5\u8bbe\u7f6e\u4e8c\u7ea7\u57df\u540d CF \u4f1a\u81ea\u52a8\u6dfb\u52a0\u4e00\u6761 CNAME \u8bb0\u5f55<\/li>\n<li>\u7ed9\u5f53\u524d bucket \u8bbe\u7f6e\u5141\u8bb8\u516c\u5f00\u8bbf\u95ee\u3002\u5230\u8fd9\u4e2a\u5730\u65b9\uff0c\u5b58\u50a8\u529f\u80fd\u5c31\u7b97\u5f00\u901a\u8bbe\u7f6e\u597d\u4e86\uff0c\u7f51\u9875\u4e0a\u76f4\u63a5\u62d6\u62fd\u4e00\u4e2a\u56fe\u7247\u4e0a\u4f20\uff0c\u5c31\u53ef\u4ee5\u83b7\u53d6\u56fe\u7247\u94fe\u63a5\u4e86\u3002<\/li>\n<li>\u521b\u5efa R2 API Token\uff0c\u4fdd\u5b58\u4e00\u4e0b Access Key ID &amp; Secret Access Key &amp; endpoint \u7528\u4e8e\u4e4b\u540e\u7684\u4e0a\u4f20<\/li>\n<li>\u5b89\u88c5+\u914d\u7f6e\u4e86\u4e00\u4e0b <a href=\"https:\/\/rclone.org\">rclone<\/a><\/li>\n<li>\u5728\u672c\u5730\u6574\u7406\u4e86\u4e00\u4e0b\u56fe\u7247\u7684\u6587\u4ef6\u5939\uff0c\u7528 rclone \u76f4\u63a5\u628a\u6574\u4e2a\u6587\u4ef6\u5939\u4e0a\u4f20\u5230\u4e86 R2 bucket \u91cc\uff1a <code>rclone sync -P . r2:blog<\/code> \u4e0a\u4f20 1847 \u5f20\u56fe\u7247\u82b1\u4e86 14m19.7s<\/li>\n<li>\u76f4\u63a5 vscode \u91cc\u5168\u5c40\u641c\u7d22\u5e76 Replace All \u628a\u6240\u6709\u56fe\u7247\u7684\u5730\u5740\u66ff\u6362\u6210 <code>https:\/\/static.zhuzi.dev\/<\/code> \u7684\u524d\u7f00<\/li>\n<li>\u628a\u6240\u6709\u56fe\u7247\u4ece git \u91cc\u79fb\u9664\uff0ccommit + push<\/li>\n<\/ol>\n<p>\u8fd9\u6837\u6363\u9f13\u4e86\u4e00\u5708\u4e4b\u540e\uff0c\u4ed3\u5e93\u672c\u8eab\u4f53\u79ef\u9a6c\u4e0a\u51cf\u8f7b 99%\uff0c\u90e8\u7f72\u65f6\u95f4\u9a6c\u4e0a\u51cf\u5c11\u5230 30-40s\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/05\/hugo-build-time-after.png\" alt=\"\"  \/>\n\n<\/p>\n<p>\u518d\u65b0\u589e\u56fe\u7247\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u7ee7\u7eed\u7528 rclone\uff0c\u4e5f\u53ef\u4ee5\u548c\u5f88\u591a\u535a\u5ba2\u63a8\u8350\u7684\u4e00\u6837\u7528 <a href=\"https:\/\/picgo.github.io\/PicGo-Doc\/zh\/guide\/\">PicGo<\/a> \uff08\u642d\u914d <a href=\"https:\/\/github.com\/wayjam\/picgo-plugin-s3\">S3 \u63d2\u4ef6<\/a>\uff09\u5f53\u4e0a\u4f20\u5de5\u5177<\/p>\n<p>\u53c2\u8003\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/testerhome.com\/topics\/36077\">\u767d\u5ad6 CloudFlare R2 \u642d\u5efa\u4e2a\u4eba\u56fe\u5e8a<\/a><\/li>\n<li><a href=\"https:\/\/rclone.org\/docs\/\">rclone \u6587\u6863<\/a><\/li>\n<li><a href=\"https:\/\/docs.contabo.com\/docs\/products\/Object-Storage\/Tools\/rclone\/\">rclone config for S3<\/a><\/li>\n<li><a href=\"https:\/\/picgo.github.io\/PicGo-Doc\/zh\/guide\/\">PicGo \u6587\u6863<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/wayjam\/picgo-plugin-s3\">PicGo S3 \u63d2\u4ef6<\/a><\/li>\n<\/ul>\n]]>"},{"title":"\u6362\u6210\u7528 Hugo \u6784\u5efa\u535a\u5ba2\u4e86","link":"https:\/\/zhuzi.dev\/posts\/2024-03-06-hugo\/","pubDate":"Wed, 06 Mar 2024 00:00:00 +0000","author":"zhuzi.mn#gmail.com (bambooom)","guid":"https:\/\/zhuzi.dev\/posts\/2024-03-06-hugo\/","description":"<h2 id=\"\u4e3a\u4ec0\u4e48\u6362-hugo-\u4e86\">\u4e3a\u4ec0\u4e48\u6362 Hugo \u4e86<\/h2>\n<p>1 \u6708\u5e95\u53c8\u5f00\u59cb\u6298\u817e\uff0c\u6362\u6210 Hugo \u6765\u6784\u5efa\u535a\u5ba2\u4e86\uff0c\u539f\u56e0\u662f\u89c9\u5f97\u4e4b\u524d\u7528\u7684 astro build \u4e0d\u591f\u5feb\uff0c\u672c\u5730\u4e5f\u6162\u3002\n\u4ee5\u524d\u7ed9\u524d\u53f8\u641e\u516c\u53f8\u535a\u5ba2\u7684\u65f6\u5019\uff0c\u7528 Hugo \u5904\u7406\u8d77\u6765\u901f\u5ea6\u98de\u5feb\uff0c\u4f53\u9a8c\u6781\u597d\u3002\n\u5c31\u4e5f\u60f3\u7ed9\u81ea\u5df1\u7684\u535a\u5ba2\u6362\u6210 Hugo \u4e86\u3002<\/p>","content":"<![CDATA[<h2 id=\"\u4e3a\u4ec0\u4e48\u6362-hugo-\u4e86\">\u4e3a\u4ec0\u4e48\u6362 Hugo \u4e86<\/h2>\n<p>1 \u6708\u5e95\u53c8\u5f00\u59cb\u6298\u817e\uff0c\u6362\u6210 Hugo \u6765\u6784\u5efa\u535a\u5ba2\u4e86\uff0c\u539f\u56e0\u662f\u89c9\u5f97\u4e4b\u524d\u7528\u7684 astro build \u4e0d\u591f\u5feb\uff0c\u672c\u5730\u4e5f\u6162\u3002\n\u4ee5\u524d\u7ed9\u524d\u53f8\u641e\u516c\u53f8\u535a\u5ba2\u7684\u65f6\u5019\uff0c\u7528 Hugo \u5904\u7406\u8d77\u6765\u901f\u5ea6\u98de\u5feb\uff0c\u4f53\u9a8c\u6781\u597d\u3002\n\u5c31\u4e5f\u60f3\u7ed9\u81ea\u5df1\u7684\u535a\u5ba2\u6362\u6210 Hugo \u4e86\u3002<\/p>\n<p>\u5176\u5b9e\u4e0a\u6b21\u6253\u7b97\u6539\u6389 Jekyll \u7684\u65f6\u5019\uff0c\u5c31\u60f3\u7740\u4e86\u6362 Hugo \u4e86\uff0c\u4e5f\u4e0d\u8bb0\u5f97\u4e2d\u9014\u600e\u4e48\u88ab astro \u5438\u5f15\u8dd1\u53bb\u5148\u8bd5\u7528\u4e86\u51e0\u4e2a\u6708\u7684 astro\u3002<\/p>\n<p>astro \u7684\u597d\u5904\u662f\u5b8c\u5168\u662f JS\/TS \u7684\u5929\u4e0b\uff0c\u867d\u7136\u7a0d\u5fae\u6709\u70b9\u53d8\u4f53\uff0c\u4f46\u4e5f\u662f React \u6216\u8005 Vue \u7ec4\u4ef6\u7684\u601d\u7ef4\uff0c\u5f88\u597d\u4e0a\u624b\uff0c\n\u5bf9\u4e8e\u672c\u5c31\u719f\u6089\u7684\u524d\u7aef\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\uff0c\u4ec0\u4e48\u7ec4\u4ef6\u90fd\u80fd\u505a\u5f88\u7075\u6d3b\uff0c\u6709\u79cd\u65e0\u6240\u4e0d\u80fd\u7684\u9519\u89c9\uff08\u3002\uff09<\/p>\n<p>Hugo \u7684 templating syntax \u5c31\u660e\u663e\u590d\u6742\u5f88\u591a\uff0c\u9700\u8981\u53cd\u590d\u770b\u6587\u6863\u3002\u5b83\u548c\u4ee5\u524d Jekyll \u4f7f\u7528\u7684 Liquid \u6a21\u677f\u8bed\u6cd5\u4e5f\u6709\u5dee\u522b\u3002<\/p>\n<p>\u4f46\u4e2a\u4eba\u4f53\u611f\u91cd\u524d\u7aef JS\/TS \u7684\u9759\u6001\u751f\u6210\u5de5\u5177\u7684\u901a\u75c5\u611f\u89c9\u5c31\u662f\u6784\u5efa\u901f\u5ea6\u8fd8\u662f\u4e0d\u591f\u5feb\uff0c\u5373\u4f7f astro \u5df2\u7ecf\u662f\u7528\u5f88\u5feb\u7684 esbuild \u6765\u6784\u5efa\u4e86\uff0c\u5728\u4e4b\u524d\u7684 github actions \u91cc\u4f9d\u65e7\u8981\u6784\u5efa 210s\u3002\n\u6700\u65e9\u7ed9\u524d\u53f8\u505a\u535a\u5ba2\u7684\u65f6\u5019\u7528\u7684\u662f Hexo\uff0c\u5355\u7eaf\u4f9d\u8d56 Nodejs\uff0c\u66f4\u52a0\u662f\u5751\u7239\u8d27\u3002\u968f\u7740\u56fe\u7247\u8d44\u6e90\u7684\u589e\u591a\uff0cbuild time \u4e5f\u4e0d\u65ad\u589e\u52a0\uff0c\u5c45\u9ad8\u4e0d\u4e0b\u3002<\/p>\n<p>\u6362\u6210 Hugo \u540e\uff0c\u5373\u4f7f\u662f\u6bcf\u6b21\u90fd\u662f\u4ece\u5934\u6784\u5efa\uff0c\u4e5f\u6700\u591a\u53ea\u9700\u8981 100s\u3002\u5176\u5b9e\u6211\u672c\u5730\u5df2\u7ecf\u6709\u5904\u7406\u8fc7\u7684\u9759\u6001\u8d44\u6e90\u4e86\u4e4b\u540e\uff0c\u6bcf\u6b21\u6784\u5efa\u90fd\u53ea\u9700\u8981 1-2s\u3002<\/p>\n<p>\u867d\u7136\u4e00\u5b9a\u8981\u8bf4\u7684\u8bdd\uff0c\u6211\u4e5f\u5f88\u4e0d\u559c\u6b22 Hugo template \u7684\u8bbe\u8ba1\uff0c\u5199\u8d77\u6765\u633a\u96be\u53d7\u7684\uff0c\u8981\u4e0d\u505c\u67e5\u6587\u6863\uff0c\u8fd8\u4e0d\u65b9\u4fbf debug\u3002\n\u8ba9\u6211\u4e00\u4e2a\u524d\u7aef\u5199\u7684\u8bdd\uff0c\u5f53\u7136\u662f\u76f4\u63a5\u624b\u6413\u5404\u79cd\u7ec4\u4ef6\u6700\u8212\u723d\u3002<\/p>\n<p>\u4f46\u4e00\u5207\u90fd\u662f tradeoff\u3002<\/p>\n<p>\u6362\u6210 Hugo \u6211\u672c\u5730\u641e\u8d77\u6765\u5f88\u5e78\u798f\u3002\u53c2\u8003\u4e00\u4e9b\u535a\u5ba2\uff0c\u4e5f\u52a0\u4e86\u4e00\u4e9b\u5c0f\u529f\u80fd\u3002<\/p>\n<h2 id=\"\u653e\u5f03\u60f9\u561f\u561f-shortcode\">\u3010\u653e\u5f03\u60f9\u3011\u561f\u561f shortcode<\/h2>\n<p>\u672c\u6765\u60f3\u52a0\u4e2a shortcode \u7528\u6765\u663e\u793a\u957f\u6bdb\u8c61\u561f\u561f\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-go-html-template\" data-lang=\"go-html-template\"><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"na\">.Page.Scratch.Set<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;include_mastodon&#34;<\/span><span class=\"w\"> <\/span><span class=\"k\">true<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$server<\/span><span class=\"w\"> <\/span><span class=\"o\">:=<\/span><span class=\"w\"> <\/span><span class=\"na\">.Get<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;server&#34;<\/span><span class=\"w\"> <\/span><span class=\"o\">|<\/span><span class=\"w\"> <\/span><span class=\"nx\">default<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;m.cmx.im&#34;<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$user<\/span><span class=\"w\"> <\/span><span class=\"o\">:=<\/span><span class=\"w\"> <\/span><span class=\"na\">.Get<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;user&#34;<\/span><span class=\"w\"> <\/span><span class=\"o\">|<\/span><span class=\"w\"> <\/span><span class=\"nx\">default<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;zhuzi&#34;<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$width<\/span><span class=\"w\"> <\/span><span class=\"o\">:=<\/span><span class=\"w\"> <\/span><span class=\"na\">.Get<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;width&#34;<\/span><span class=\"w\"> <\/span><span class=\"o\">|<\/span><span class=\"w\"> <\/span><span class=\"nx\">default<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;100%&#34;<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$height<\/span><span class=\"w\"> <\/span><span class=\"o\">:=<\/span><span class=\"w\"> <\/span><span class=\"na\">.Get<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;height&#34;<\/span><span class=\"w\"> <\/span><span class=\"o\">|<\/span><span class=\"w\"> <\/span><span class=\"nx\">default<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;auto&#34;<\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$dodo<\/span><span class=\"w\"> <\/span><span class=\"o\">:=<\/span><span class=\"w\"> <\/span><span class=\"na\">.Get<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;dodo&#34;<\/span><span class=\"w\"> <\/span><span class=\"o\">|<\/span><span class=\"w\"> <\/span><span class=\"nx\">default<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;false&#34;<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"k\">if<\/span><span class=\"w\"> <\/span><span class=\"k\">eq<\/span><span class=\"w\"> <\/span><span class=\"o\">(<\/span><span class=\"nx\">$dodo<\/span><span class=\"o\">)<\/span><span class=\"w\"> <\/span><span class=\"s\">&#34;false&#34;<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"k\">else<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">iframe<\/span> <span class=\"na\">src<\/span><span class=\"o\">=<\/span> <span class=\"s\">&#34;https:\/\/<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$server<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">\/@<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$user<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">\/<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$dodo<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">\/embed&#34;<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;mastodon-embed&#34;<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;max-width: 100%; border: 0&#34;<\/span> <span class=\"na\">width<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$width<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">&#34;<\/span> <span class=\"na\">height<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$height<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">&#34;<\/span> <span class=\"na\">allowfullscreen<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;allowfullscreen&#34;<\/span> <span class=\"na\">allow<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;&#34;<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">iframe<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">script<\/span> <span class=\"na\">src<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;https:\/\/<\/span><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"nx\">$server<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span><span class=\"s\">\/embed.js&#34;<\/span> <span class=\"na\">async<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;async&#34;<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">script<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"cp\">{{<\/span><span class=\"w\"> <\/span><span class=\"k\">end<\/span><span class=\"w\"> <\/span><span class=\"cp\">}}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/03\/mastodon.png\" alt=\"\"  \/>\n\n<\/p>\n<p>\u4f46\u662f\u663e\u793a\u4e0d\u51fa\u6765\uff0cconsole \u91cc\u6709\u62a5\u9519\u663e\u793a\u957f\u6bdb\u8c61\u4e0d\u80fd\u8de8\u57df\u663e\u793a\u5728 iframe \u91cc\uff0c\u6240\u4ee5\u653e\u5f03\u4e86\u3002<\/p>\n<blockquote>\n<p>Refused to display &lsquo;<a href=\"https:\/\/m.cmx.im\/'\">https:\/\/m.cmx.im\/'<\/a> in a frame because it set &lsquo;X-Frame-Options&rsquo; to &lsquo;sameorigin&rsquo;.<\/p>\n<\/blockquote>\n<h2 id=\"neodb-\u5361\u7247\">NeoDB \u5361\u7247<\/h2>\n\n\n\n\n\n    \n\n\n\n\n\n\n\n    \n        \n        \n            \n            <div class=\"db-card\">\n                <div class=\"db-card-subject\">\n                    <div class=\"db-card-post\"><img loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/neodb.social\/m\/movie\/2021\/09\/15932a0866-4907-47b3-8ddd-05b7aca499ab.jpg\"><\/div>\n                    <div class=\"db-card-content\">\n                        <div class=\"db-card-title\"><a href=\"https:\/\/neodb.social\/movie\/4S0aPBA9MOW2sgqYAcjN6T\" class=\"cute\" target=\"_blank\" rel=\"noreferrer\">\u767e\u5143\u4e4b\u604b<\/a><\/div>\n                        <div class=\"rating\"><span class=\"allstardark\"><span class=\"allstarlight\" style=\"width: 83%\"><\/span><\/span><span class=\"rating_nums\">8.3<\/span><\/div>\n                        <div class=\"db-card-abstract\">\u65e9\u5df2\u8fc7\u4e86\u800c\u7acb\u4e4b\u5e74\u7684\u4e00\u5b50\uff08\u5b89\u85e4\u6a31 \u9970\uff09\u6574\u5929\u767e\u65e0\u804a\u8d56\uff0c\u5979\u6839\u672c\u65e0\u5fc3\u5e2e\u52a9\u6253\u7406\u81ea\u5bb6\u7684\u6599\u7406\u5e97\uff0c\u6574\u65e5\u73a9\u6e38\u620f\u8650\u6740\u5c0f\u5916\u7525\u3002\u5979\u7684\u59b9\u59b9\u4e8c\u4e09\u5b50\uff08\u65e9\u7ec7 \u9970\uff09\u79bb\u5a5a\u540e\u56de\u5230\u5a18\u5bb6\uff0c\u6781\u5ea6\u770b\u4e0d\u60ef\u59d0\u59d0\u7684\u4f5c\u4e3a\uff0c\u4e3a\u6b64\u4e24\u59d0\u59b9\u751a\u81f3\u5927\u6253\u51fa\u624b\u3002\u81ea\u611f\u4e0d\u88ab\u5bb6\u4eba\u6240\u5bb9\u7684\u4e00\u5b50\u642c\u4e86\u51fa\u53bb\uff0c\u5e76\u5728\u65e5\u5e38\u5149\u987e\u7684\u767e\u5143\u8d85\u5e02\u8c0b\u5f97\u6536\u94f6\u5458\u7684\u804c\u4f4d\u3002\u8fd9\u95f4\u5c0f\u5e97\u4e91\u96c6\u7740\u8bb8\u591a\u602a\u4eba\uff0c\u60a3\u6709\u5fe7\u90c1\u75c7\u7684\u5e97\u957f\u3001\u8bdd\u5520\u7325\u7410\u7684\u540c\u4e8b\u3001\u56e0\u76d7\u7a83\u88ab\u5f00\u9664\u5374\u8fd8\u65f6\u5e38\u56de\u6765\u62ff\u4e34\u8fc7\u671f\u98df\u54c1\u7684\u8001\u592a\u3002\u5728\u8fd9\u4e9b\u4eba\u4e2d\u95f4\uff0c\u4e00\u5b50\u7684\u5fc3\u60c5\u6108\u52a0\u82e6\u95f7\u3002\u5076\u7136\u673a\u7f18\uff0c\u5979\u548c\u540d\u4e0d\u89c1\u7ecf\u4f20\u7684\u62f3\u51fb\u624b\u72e9\u91ce\uff08\u65b0\u4e95\u6d69\u6587 \u9970\uff09\u8d70\u5230\u4e00\u8d77\uff0c\u65e0\u5948\u4ed6\u4eec\u4e4b\u95f4\u751a\u81f3\u8fde\u7231\u60c5\u90fd\u8c08\u4e0d\u4e0a\u3002\u6781\u5ea6\u538b\u6291\u4e4b\u9645\u4e00\u5b50\u9009\u62e9\u5b66\u4e60\u62f3\u51fb\uff0c\u5979\u6e34\u671b\u91ca\u653e\u5fc3\u4e2d\u4e0d\u59d4\u5c48\u548c\u4e0d\u6ee1\uff0c\u6e34\u671b\u83b7\u5f97\u54ea\u6015\u53ea\u6709\u4e00\u6b21\u7684\u8ba4\u53ef\u3002\n\u672c\u7247\u8363\u83b72014\u5e74\u65e5\u672c\u7535\u5f71\u65ec\u62a5\u5341\u4f73\u5f71\u7247\u7b2c\u516b\u540d\u3002<\/div>\n                    <\/div>\n                    <div class=\"db-card-cate\">movie<\/div>\n                <\/div>\n            <\/div>\n        \n    \n\n\n<p>\u53c2\u8003<a href=\"https:\/\/www.sleepymoon.cyou\/2023\/hugo-shortcodes\/#%E5%BC%95%E7%94%A8neodb%E6%9D%A1%E7%9B%AE\">\u8fd9\u7bc7\u6559\u7a0b<\/a>\u3002\n\u4f46\u6211\u628a\u53f3\u4e0a\u89d2\u548c\u661f\u661f\u7684\u989c\u8272\u90fd\u6539\u6210\u4e86\u7c89\u8272\u3002<\/p>\n<p>\u661f\u661f\u662f\u76f4\u63a5\u7528 svg \u5f53\u4f5c\u80cc\u666f\u7684\uff0c\u5e76\u4e14\u662f\u76f4\u63a5 base64 \u7684\u5d4c\u5165\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-css\" data-lang=\"css\"><span class=\"line\"><span class=\"cl\"><span class=\"p\">.<\/span><span class=\"nc\">rating<\/span> <span class=\"p\">.<\/span><span class=\"nc\">allstarlight<\/span><span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">position<\/span><span class=\"p\">:<\/span> <span class=\"kc\">absolute<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">color<\/span><span class=\"p\">:<\/span> <span class=\"mh\">#f9a8d4<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">height<\/span><span class=\"p\">:<\/span><span class=\"mi\">16<\/span><span class=\"kt\">px<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"kc\">hidden<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">background-size<\/span><span class=\"p\">:<\/span> <span class=\"kc\">auto<\/span> <span class=\"mi\">100<\/span><span class=\"kt\">%<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">background-repeat<\/span><span class=\"p\">:<\/span> <span class=\"kc\">repeat<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">  <span class=\"k\">background-image<\/span><span class=\"p\">:<\/span> <span class=\"nb\">url<\/span><span class=\"p\">(<\/span><span class=\"sx\">data:image\/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjlhOGQ0Ii8+PC9zdmc+<\/span><span class=\"p\">);<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>base64 decode \u5176\u5b9e\u5f88\u7b80\u5355\u3002\u6253\u5f00 console\uff0c\u76f4\u63a5\u4f7f\u7528 <code>atob()<\/code> \u51fd\u6570\u5c31\u53ef\u4ee5\u89e3\u7801\u3002\n\u8fd9\u4e2a\u662f\u6d4f\u89c8\u5668\u81ea\u5e26\u7684\u5168\u5c40\u51fd\u6570\uff0c\u8be6\u89c1 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/atob\">MDN \u6587\u6863<\/a>\u3002<\/p>\n<p>\n\n  <img loading=\"lazy\" src=\"https:\/\/static.zhuzi.dev\/2024\/03\/atob.png\" alt=\"\"  \/>\n\n<\/p>\n<p>\u89e3\u7801\u51fa\u6765\u7684\u5c31\u662f\u4e00\u4e2a SVG \u56fe\u7247\u4e86\uff0c\u5b83\u5c31\u662f\u661f\u661f\u7684\u539f\u56fe\u3002\u535a\u4e3b\u7ed9\u7684\u6559\u7a0b\u91cc\u661f\u661f\u7684\u989c\u8272\u662f\u56fa\u5b9a\u7684\u6a59\u8272\uff0c\u662f\u56e0\u4e3a\u5728\u6700\u540e path \u5143\u7d20\u4e0a\u8bbe\u7f6e\u4e86 <code>fill=&quot;#f99b01&quot;<\/code> \u4e5f\u5c31\u662f SVG \u7684\u56fe\u4e0a\u7684\u7ebf\u7684\u989c\u8272\u3002<\/p>\n<p>\u624b\u52a8\u628a\u5b83\u6539\u6210\u81ea\u5df1\u60f3\u8981\u7684\u989c\u8272\u5c31\u662f\u4e00\u4e2a\u65b0\u7684 SVG \u56fe\u7247\u4e86\u3002\n\u7136\u540e\u518d\u628a\u5b83 base64 encode \u91cd\u65b0\u586b\u56de\u539f\u6765\u7684 css \u91cc\u5373\u53ef\u3002<\/p>\n<p>decode \u51fd\u6570\u662f <code>atob()<\/code>\uff0cencode \u51fd\u6570\u4e5f\u5e94\u8be5\u5f88\u597d\u731c\u4e86\uff0c\u5c31\u662f <code>btoa()<\/code>\uff0c\u8be6\u7ec6\u53c2\u8003 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/btoa\">MDN \u6587\u6863<\/a>\u3002<\/p>\n<h2 id=\"delay-display-\u52a8\u753b\">delay display \u52a8\u753b<\/h2>\n<p>\u65e9\u5148\u662f\u6253\u5f00\u4e00\u4f4d\u5927\u795e\u7684\u535a\u5ba2 <a href=\"https:\/\/paco.me\/\">paco.me<\/a>\uff0c\u9996\u9875\u6709\u4e2a\u5f88\u7b80\u7ea6\u7684\u5ef6\u8fdf\u9010\u6b65\u663e\u793a\u7684\u52a8\u753b\u6211\u5f88\u559c\u6b22\u3002\n\u4ed4\u7ec6\u770b\u4e86\u4e0b\u5b9e\u73b0\uff0c\u5176\u5b9e\u4e5f\u5f88\u7b80\u5355\u3002\n\u5177\u4f53\u6765\u8bf4\uff0c\u5c31\u662f\u5148\u8bbe\u7f6e\u4e00\u4e2a\u7b80\u5355\u7684 fade-enter \u52a8\u753b\uff1a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-css\" data-lang=\"css\"><span class=\"line\"><span class=\"cl\"><span class=\"p\">@<\/span><span class=\"k\">keyframes<\/span> <span class=\"nt\">enter<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nt\">0<\/span><span class=\"o\">%<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">transform<\/span><span class=\"p\">:<\/span> <span class=\"nb\">translateY<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"kt\">px<\/span><span class=\"p\">)<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nt\">to<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">transform<\/span><span class=\"p\">:<\/span> <span class=\"kc\">none<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u6548\u679c\u4e5f\u5c31\u662f\u4ece\u4e0b\u5f80\u4e0a\u8fdb\u5165\uff0c\u5e76\u9010\u6e10\u663e\u73b0\u3002<\/p>\n<p>\u7136\u540e\u8bbe\u7f6e\u4e86\u4e00\u4e2a attribute selector \u7684\u57fa\u7840\u8bbe\u5b9a\u3002<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-css\" data-lang=\"css\"><span class=\"line\"><span class=\"cl\"><span class=\"o\">[<\/span><span class=\"nt\">data-animate-enter<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nv\">--stagger<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nv\">--delay<\/span><span class=\"p\">:<\/span> <span class=\"mi\">120<\/span><span class=\"kt\">ms<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"nv\">--start<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"kt\">ms<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">@<\/span><span class=\"k\">media<\/span> <span class=\"o\">(<\/span><span class=\"nt\">prefers-reduced-motion<\/span><span class=\"p\">:<\/span><span class=\"nd\">no-preference<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"o\">[<\/span><span class=\"nt\">data-animate-enter<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">animation<\/span><span class=\"p\">:<\/span> <span class=\"n\">enter<\/span> <span class=\"mf\">.6<\/span><span class=\"kt\">s<\/span> <span class=\"kc\">both<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">        <span class=\"k\">animation-delay<\/span><span class=\"p\">:<\/span> <span class=\"nb\">calc<\/span><span class=\"p\">(<\/span><span class=\"nf\">var<\/span><span class=\"p\">(<\/span><span class=\"o\">--<\/span><span class=\"n\">stagger<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"nf\">var<\/span><span class=\"p\">(<\/span><span class=\"o\">--<\/span><span class=\"n\">delay<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"nf\">var<\/span><span class=\"p\">(<\/span><span class=\"o\">--<\/span><span class=\"kc\">start<\/span><span class=\"p\">))<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">    <span class=\"p\">}<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u7136\u540e\u7ed9\u60f3\u8981\u6dfb\u52a0\u52a8\u753b\u7684\u5143\u7d20\u4e0a\u76f4\u63a5\u52a0\u4e0a <code>data-animate-enter<\/code> attribute \u5373\u53ef\uff0c\u6bd4\u5982\uff1a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-html\" data-lang=\"html\"><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;page-header&#34;<\/span> <span class=\"na\">data-animate-enter<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">...\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;\/<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u4e0d\u8fc7\u53ea\u6dfb\u52a0\u8fd9\u4e2a attribute \u53ea\u4f1a\u8ba9\u6240\u6709\u6dfb\u52a0\u7684\u5143\u7d20\u4e00\u8d77\u8fdb\u5165\uff0c\u4e0d\u4f1a\u6709\u9010\u6b65\u8fdb\u5165\u7684\u6548\u679c\u3002\n\u60f3\u8981\u5b9e\u73b0\u9010\u6b65\u7684\u6548\u679c\uff0c\u53ea\u9700\u8981\u7ed9\u4e0d\u540c\u7684\u5143\u7d20\u4f9d\u6b21\u8bbe\u7f6e <code>stagger<\/code> \u503c\u5373\u53ef\u3002\u6bd4\u5982\uff1a<\/p>\n<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-html\" data-lang=\"html\"><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span> <span class=\"na\">class<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;page-header&#34;<\/span> <span class=\"na\">data-animate-enter<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\u6700\u5148\u60f3\u8981\u663e\u793a\u7684\uff0c\u5f53\u4f5c\u7b2c 0 \u6b65\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;\/<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\">\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">data-animate-enter<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;--stagger: 1;&#34;<\/span><span class=\"p\">&gt;<\/span>\u60f3\u8981\u663e\u793a\u7684\u7b2c 1 \u6b65<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">data-animate-enter<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;--stagger: 2;&#34;<\/span><span class=\"p\">&gt;<\/span>\u60f3\u8981\u663e\u793a\u7684\u7b2c 2 \u6b65<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><span class=\"line\"><span class=\"cl\"><span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">data-animate-enter<\/span> <span class=\"na\">style<\/span><span class=\"o\">=<\/span><span class=\"s\">&#34;--stagger: 3;&#34;<\/span><span class=\"p\">&gt;<\/span>\u60f3\u8981\u663e\u793a\u7684\u7b2c 3 \u6b65<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n<\/span><\/span><\/code><\/pre><\/div><p>\u8fd9\u6837 <code>animation-delay<\/code> \u5c31\u4f1a\u6839\u636e\u4e0d\u540c\u7684 stagger \u8ba1\u7b97\u4e0d\u4e00\u6837\u7684\u5ef6\u8fdf\u65f6\u95f4\uff0c\u6574\u4f53\u4e0a\u770b\u5c31\u4f1a\u6709\u9010\u6b65\u663e\u73b0\u7684\u6548\u679c\u4e86\u3002<\/p>\n<h2 id=\"\u6062\u590d\u8bc4\u8bba\u529f\u80fd\">\u6062\u590d\u8bc4\u8bba\u529f\u80fd<\/h2>\n<p>\u4ee5\u524d\u4e00\u76f4\u662f\u7528 Disqus \u5f53\u4f5c\u8bc4\u8bba\u7cfb\u7edf\uff0c\u4f46\u65e9\u5148\u542c\u8bf4 Disqus \u597d\u50cf\u628a\u6240\u6709\u7814\u53d1\u90fd\u88c1\u4e86\uff0c\u6240\u4ee5\u603b\u89c9\u5f97\u4e0d\u592a\u4fdd\u9669\u4e86\u3002\n\u5c31\u4e00\u76f4\u60f3\u7740\u6362\u6210\u522b\u7684\uff0c\u7ecf\u8fc7\u4e00\u756a\u7814\u7a76\uff0c\u672c\u6765\u60f3\u5b8c\u5168\u6362\u6210 twikoo \u7684\u3002<\/p>\n<p>\u4f46\u914d\u7f6e\u597d\u4e86\u4e4b\u540e\uff0c\u672c\u6765\u60f3\u628a Disqus \u7684\u8bc4\u8bba\uff08\u8fd9\u51e0\u5e74\u4e0b\u6765\u7d2f\u79ef\u4e86 280 \u591a\u6761\uff0c\u867d\u7136\u6709\u4e00\u534a\u5e94\u8be5\u662f\u6211\u81ea\u5df1\u7684\u56de\u590d\ud83e\udd23\uff09\n\u5168\u90e8 import \u5230 twikoo \u7684\u3002<\/p>\n<p>\u9996\u5148\u7b2c\u4e00\u6b65\u662f<em>\u4ece Disqus \u5bfc\u51fa<\/em>\uff0c\u90a3\u6bb5\u65f6\u95f4\u6211\u600e\u4e48\u4e5f\u6536\u4e0d\u5230\u5bfc\u51fa\u7684\u90ae\u4ef6\uff0c\u4e5f\u5b8c\u5168\u627e\u4e0d\u5230 Support \u53ef\u4ee5\u6c42\u52a9\uff0c\n\u6bd5\u7adf\u6211\u4e5f\u5c31\u662f\u4e00\u4e2a\u666e\u901a free \u7528\u6237\uff0c\u6ca1\u4ed8\u94b1\u3002\u5c31\u771f\u7684\u5728\u60f3 Disqus \u662f\u4e0d\u662f\u8981\u5b8c\u5168\u5012\u95ed\u4e86\u3002<\/p>\n<p>\u867d\u7136\u8fc7\u53bb\u7684\u8bc4\u8bba\u5c31\u7b97\u5168\u90fd\u4e22\u5931\u4e86\u4e5f\u6ca1\u592a\u5927\u5173\u7cfb\uff0c\u4f46\u672c\u610f\u8fd8\u662f\u5e0c\u671b\u80fd\u4fdd\u7559\u5c31\u4fdd\u7559\u3002\n\u5728\u63a8\u4e0a\u5410\u69fd\u4e86\u4e4b\u540e\uff0c\u6709\u63a8\u53cb\u8bf4\u4ed6\u5bfc\u51fa\u6ca1\u95ee\u9898\u554a\uff0c\u4e8e\u662f\u6211\u8fc7\u4e86\u51e0\u5929\u53c8\u5c1d\u8bd5\u4e86\u4e00\u6b21\uff0c\u624d\u7ec8\u4e8e\u5bfc\u51fa\u6765\u4e86\u3002<\/p>\n<p>\u5bfc\u51fa\u7684\u4e0b\u4e00\u6b65\u662f<em>\u5728 twikoo \u4e0a import<\/em>\uff0c\u8fd9\u91cc\u6000\u7591\u662f\u54ea\u91cc\u6709 bug\u3002<\/p>\n<p>\u56e0\u4e3a\u6211\u5728\u6539\u6846\u67b6\u7684\u65f6\u5019\u6539\u8fc7\u6587\u7ae0\u8def\u5f84\uff0c\u800c Disqus \u53c8\u662f\u4ee5\u8def\u5f84\u4f5c\u4e3a identifier \u7684\u3002\n\u6240\u4ee5\u5f53\u65f6\u5728\u6539\u6846\u67b6\u65f6\u8fdb\u884c\u8fc7 migrate\uff0c\u5c31\u662f\u628a\u65e7\u7684\u8def\u5f84\u548c\u65b0\u7684\u8def\u5f84\u8fdb\u884c\u4e00\u4e2a\u4e00\u4e00\u6620\u5c04\u3002\n\u4f46\u662f\u8fd9\u4e2a\u6620\u5c04\u5173\u7cfb\u5728\u5bfc\u51fa\u7684\u6570\u636e\u91cc\u662f\u7f3a\u5931\u7684\u3002<\/p>\n<p>\u6211\u6ca1\u6709\u6ce8\u610f\u5230\u8fd9\u4e2a\u4e8b\u76f4\u63a5 import \u4e86\uff0c\u7136\u800c\u73b0\u6709\u7684\u8def\u5f84\u548c\u65e7\u7684\u8def\u5f84\u5c31\u5bf9\u4e0d\u4e0a\u4e86\uff0c\u65e7\u7684 disqus \u7684\u8bc4\u8bba\u5176\u5b9e\u90fd\u663e\u793a\u4e0d\u51fa\u6765\u3002\n\u5931\u53bb\u4e86\u6620\u5c04\u5173\u7cfb\u4e5f\u662f\u6211\u5230\u8fd9\u4e00\u6b65\u624d\u53d1\u73b0\u7684\u3002<\/p>\n<p>\u6211\u672c\u6765\u60f3\u624b\u52a8\u4fee\u6539\u6570\u636e\u6587\u4ef6\u91cc\u7684\u6570\u636e\uff0c\u7136\u540e\u518d\u5bfc\u5165\uff0c\u4f46\u662f\u7ecf\u8fc7\u4e86\u4e00\u4e9b\u624b\u52a8\u66f4\u6539\uff0c\u518d import \u5c31\u76f4\u63a5\u62a5\u9519\u683c\u5f0f\u4e0d\u6b63\u786e\u3002\n\u5177\u4f53\u662f\u54ea\u91cc\u4e0d\u6b63\u786e\u5b9e\u5728\u5f88\u96be\u627e\u51fa\u6765\uff0c\u4e8e\u662f\u6211\u5c31\u653e\u5f03\u5bfc\u5165\u8fd9\u4e2a\u64cd\u4f5c\u4e86\u3002<\/p>\n<p>\u56e0\u4e3a\u8f7b\u5fae\u7684\u5f3a\u8feb\u75c7\uff0c\u8fd8\u8dd1\u53bb MongoDB\uff08Twikoo \u7528\u7684\u6570\u636e\u5e93\uff09 \u7684 web \u540e\u53f0\u624b\u52a8\u5220\u9664\u4e86\u524d\u9762\u4e00\u6b21 import \u7684\u4e0d\u6b63\u786e\u8def\u5f84\u7684 200 \u591a\u6761\u8bc4\u8bba\u3002\n\uff08\u60b2\u50ac\u7684\u662f\u5b83\u8fd9\u4e2a web \u540e\u53f0\u6ca1\u6709\u6279\u91cf\u64cd\u4f5c\u7684\u529f\u80fd\uff0c\u6211\u662f\u6700\u7b28\u6700\u50bb\u7684\u70b9\u51fb\u4e86\u53ef\u80fd 500 \u6b21\u4e00\u6761\u4e00\u6761\u5220\u9664\u4e86\uff0c\u5220\u9664\u4e00\u6761\u8fd8\u8981\u786e\u8ba4\u4e00\u6b21\uff0c\u6240\u4ee5\u6bcf\u5220\u9664\u4e00\u6761\u8981\u70b9 2 \u6b21\ud83d\ude02\uff09<\/p>\n<p>\u73b0\u5728\u6362\u6210 Hugo \u540e\uff0c\u6211\u53c2\u8003<a href=\"https:\/\/seviche.cc\/\">\u9c7c\u8001\u5e08\u7684\u535a\u5ba2<\/a>\u6539\u6210\u652f\u6301 3 \u79cd\u8bc4\u8bba\u7cfb\u7edf\uff0c\u6700\u53e4\u65e9\u7684 <a href=\"https:\/\/disqus.com\/\">Disqus<\/a>\u3001\n\u5229\u7528 GitHub Discussions \u800c\u4e0d\u662f issue \u7684 <a href=\"https:\/\/giscus.app\/\">Giscus<\/a>\uff08\u8fd9\u4e2a\u914d\u7f6e\u8d77\u6765\u662f\u771f\u7684\u7b80\u5355\u65b9\u4fbf\uff09\n\u4ee5\u53ca <a href=\"https:\/\/twikoo.js.org\/\">Twikoo<\/a>\uff0c\u4e3b\u6253\u4e00\u4e2a\u4efb\u541b\u9009\u62e9\u3002<\/p>\n<hr>\n<p>\u4e00\u76f4\u4ee5\u6765\u535a\u5ba2\u7684\u6784\u5efa\u90fd\u662f GitHub Pages\uff0c\u4f46\u6700\u65e9\u7684 Jekyll \u662f\u5b83\u539f\u751f\u652f\u6301\u7684\uff0cBuild time \u5c31\u4e0d\u77ed\u3002\n\u540e\u6765\u6362\u7684 Astro \u548c Hugo\uff0c\u90fd\u662f\u501f\u7528 GitHub Actions \u6765\u6784\u5efa\u7684\uff0c\u65f6\u95f4\u4f9d\u7136\u5f88\u957f\u3002<\/p>\n<p>\u6700\u8fd1\u6709\u8c61\u53cb\u63a8\u8350\u7528 Cloudflare Pages\uff0c\u901f\u5ea6\u540a\u6253 GitHub\u3002\n\u7b49\u6211\u7814\u7a76\u6e05\u695a\u600e\u4e48\u7528\uff0c\u53ef\u80fd\u5c31\u4f1a\u4ece GitHub Pages \u6362\u6210 Cloudflare Pages\u3002<\/p>\n<p>\u5176\u4ed6\u7684\u529f\u80fd\u53ef\u80fd\u8fd8\u4f1a\u6dfb\u52a0\u3002Let me see see\u3002<\/p>\n]]>"}]}}