AstroでThree.jsを動かす　手軽　合法

多分これが一番早いと思います　な Astro で Three.js を動かす方法を見つけたのでシェアします。

方法

お好きな package manager で three を Astro プロジェクトにインストールした後、.astro ファイルに script で three のコードを埋め込むだけです。 import XXX from “three”も機能していると思います。

<div id="container" />
<style>
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<script>
import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, WebGLRenderer } from 'three';

const container = document.getElementById('container');
if (!container) {
  throw new Error('Canvas Container not found');
}

const scene = new Scene();
const camera = new OrthographicCamera(-1, 1, 1, -1, 1, 1000);
camera.position.set(0, 0, 100)
camera.lookAt(scene.position)

const geometry = new PlaneGeometry(2, 2);
const material = new ShaderMaterial({
  fragmentShader: `uniform vec2 resolution;
varying vec2 vUv;
void main() {
  vec2 st = gl_FragCoord.xy / resolution.xy;
  gl_FragColor = vec4(st.x, st.y, 1.0, 1.0);
}`,
  vertexShader: `varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`,
uniforms: {
resolution: { value: new Vector2(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio) }
}
    });
const mesh = new Mesh(geometry, material);
scene.add(mesh);

const renderer = new WebGLRenderer({ antialias: true, alpha: false, stencil: false, depth: true });
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

function handleOnResize() {
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  material.uniforms.resolution.value = new Vector2(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
  camera.updateProjectionMatrix();
}
handleOnResize();
window.addEventListener('resize', handleOnResize);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
</script>

信憑性担保のため、StackBlitz にコード全体を置いています。did0es の言うことを信じられない方はぜひご覧ください。

補足: TypeScriptの扱い

script にインラインで埋め込むと、Linter で TypeScript のパースに失敗することがあります。

その場合、インラインではなく .ts ファイルに内容を切り出して、 script の src 属性で読み込むようにしてください（StackBlitz 反映済み）。

<script src="./_three.ts" />

いかがでしたか？素敵なGWをお過ごしください。