1分でミニマルなThree.js環境をつくる（TypeScript + React)

1分でミニマルなThree.js環境をつくる（TypeScript + React)

第１
1分でミニマルなThree.js環境をつくる（TypeScript + React)

1分でミニマルなThree.js環境をつくる（TypeScript + React)

第２　　install method
npm create vite@latest react20250123 -- --template react-ts

npm install three @react-three/fiber

npm install -D @types/three

os ubuntu 24.04

第３
css.index

body {
margin: 0;
padding: 0;
}

App.tsx

import { Canvas } from "@react-three/fiber";
function App() {
return (
<Canvas style={{ width: "100vw", height: "100vh" }}>
<ambientLight intensity={Math.PI / 2} />
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="red" />
</mesh>
</Canvas>
);
}

export default App;

directory make

ls

npm ru dev

第４
npm install @react-three/drei
App.tsx
import { OrbitControls } from "@react-three/drei";
// 省略
function App() {
return (
<Canvas style={{ width: "100vw", height: "100vh" }}>
// 省略
<OrbitControls /> // ← 追加
</Canvas>
);
}
再現されない

以上