ythk

<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="0"><span class="token function">pnpm</span> create vite
</code></pre></div><p data-line="3" class="code-line">でプロジェクトを作ったあと、cdしてから</p>
<div class="code-block-container"><pre><code class="code-line" data-line="4">pnpm add -D three @types/three @ar-js-org/ar.js-threejs
</code></pre></div>

<p data-line="0" class="code-line">ThreeSample1 - ほぼ最小構成のアニメーション</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/ythk-threesample1?embed=1&amp;file=main.ts" scrolling="no" frameborder="no" loading="lazy"></iframe></span>


<p data-line="0" class="code-line">ThreeSample2 - 曲面のアニメーション</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/ythk-threesample2?embed=1&amp;file=main.ts" scrolling="no" frameborder="no" loading="lazy"></iframe></span>


<p data-line="0" class="code-line">ThreeSample3 - Ar.jsと連動<br>
マーカはBarcode。<br>
画面が縦長の場合はずれてしまう・・・。</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/ythk-threesample3?embed=1&amp;file=main.ts" scrolling="no" frameborder="no" loading="lazy"></iframe></span>


<p data-line="0" class="code-line">ThreeSample4 - AR.jsでマルチマーカー</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/ythk-threesample4?embed=1&amp;file=main.ts" scrolling="no" frameborder="no" loading="lazy"></iframe></span>
