Code block snippet

// 表示させたい文字
const text = “NISSY”;
// Fonts
const fontLoader = new FontLoader();
fontLoader.load(“fonts/helvetiker_bold.typeface.json”, (font) => {
const textGeometry = new TextGeometry(text, {
	font: font,
	size: 10,
	height: 5,
	curveSegments: 12,
	bevelEnabled: true,
	bevelThickness: 0.04,
	bevelSize: 0.02,
	bevelOffset: 0,
	bevelSegments: 5,
});
textGeometry.center();
// material
const textMaterial = new THREE.MeshNormalMaterial();
// mesh
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
// シーンにテキストを追加
scene.add(textMesh);
// ここから追加。
// ボックスを用意
const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshNormalMaterial();
// ボックスをランダムに配置
for (let i = 0; i < 100; i++) { const box = new THREE.Mesh(boxGeometry, material); 
// 座標の計算
box.position.x = (Math.random() – 0.5) * 200; box.position.y = (Math.random() – 0.5) * 150; box.position.z = (Math.random() – 0.5) * 100; 
// 回転の計算
box.rotation.x = Math.random() * Math.PI; box.rotation.y = Math.random() * Math.PI; 
// 大きさの計算
const scale = Math.random(); box.scale.set(scale, scale, scale); 
//シーンに追加
scene.add(box); } });

// canvasを取得

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
if (!canvas) return;

// シーン

const scene = new THREE.Scene();

// サイズ

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

// カメラ

const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  1000
);
camera.position.set(1, 0, 3);

// レンダラー

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(window.devicePixelRatio);

//メッシュ

// 2で作成。

// ブラウザのリサイズ処理

const onWindowResize = () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(window.devicePixelRatio);
};
window.addEventListener("resize", onWindowResize);

// クリーンアップ関数

return () => {
  window.removeEventListener("resize", onWindowResize);
  renderer.dispose();
};

#id .class {
  color: red;
}