99 lines
2.9 KiB
Markdown
99 lines
2.9 KiB
Markdown
+++
|
|
date = "2024-08-28"
|
|
tags = ["vrm","three"]
|
|
title = "theatre.jsを使ってみる"
|
|
+++
|
|
|
|
three.jsをGUIで調整するためのlibです。reactのexampleがあるのでreactで書きます。
|
|
|
|
ちなみに、最近は色々なprojectがreactばかりになってきたのでreactを使っています。ただ、vueのほうがわかりやすいのでvueをおすすめしておきます。jsに近いほどよいですね。最初はjs+html+cssが一番ですけど。
|
|
|
|
```sh
|
|
$ nvm use 21
|
|
|
|
# https://www.theatrejs.com/docs/latest/getting-started/with-react-three-fiber
|
|
$ npx create-react-app theatre --template typescript
|
|
$ npm install --save react three @react-three/fiber @theatre/core @theatre/studio @theatre/r3f
|
|
$ npm install --save-dev @types/three
|
|
```
|
|
|
|
```json:package.json
|
|
{
|
|
"name": "vite-react-typescript-starter",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@theatre/core": "^0.6.1",
|
|
"@theatre/r3f": "^0.7.2",
|
|
"@theatre/studio": "^0.6.1",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.9.1",
|
|
"@types/react": "^18.3.4",
|
|
"@types/react-dom": "^18.3.0",
|
|
"@vitejs/plugin-react": "^4.3.1",
|
|
"eslint": "^9.9.1",
|
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
|
"eslint-plugin-react-refresh": "^0.4.11",
|
|
"globals": "^15.9.0",
|
|
"typescript": "^5.5.3",
|
|
"typescript-eslint": "^8.3.0",
|
|
"vite": "^5.4.2"
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts:src/main.tsx
|
|
import './index.css'
|
|
import { createRoot } from 'react-dom/client'
|
|
import React, { useEffect } from 'react'
|
|
import { Canvas } from '@react-three/fiber'
|
|
import studio from '@theatre/studio'
|
|
import extension from '@theatre/r3f/dist/extension'
|
|
import { SheetProvider, editable as e, PerspectiveCamera } from '@theatre/r3f'
|
|
import { getProject } from '@theatre/core'
|
|
import demoProjectState from './state.json'
|
|
|
|
studio.initialize()
|
|
studio.extend(extension)
|
|
|
|
//const demoSheet = getProject('Demo Project', { state: demoProjectState }).sheet('Demo Sheet')
|
|
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')
|
|
const App = () => {
|
|
useEffect(() => {
|
|
demoSheet.project.ready.then(() => demoSheet.sequence.play({ iterationCount: Infinity, range: [0, 1] }))
|
|
}, [])
|
|
|
|
return (
|
|
<Canvas>
|
|
<SheetProvider sheet={demoSheet}>
|
|
<PerspectiveCamera theatreKey="Camera" makeDefault position={[0, 0, 0]} fov={75} />
|
|
<ambientLight />
|
|
<e.pointLight theatreKey="Light" position={[1, 1, 1]} />
|
|
<e.mesh theatreKey="Cube">
|
|
<boxGeometry args={[1, 1, 1]} />
|
|
<meshStandardMaterial color="orange" />
|
|
</e.mesh>
|
|
</SheetProvider>
|
|
</Canvas>
|
|
)
|
|
}
|
|
|
|
createRoot(document.getElementById('root')!).render(<App />)
|
|
```
|
|
|
|
```sh
|
|
$ npm run dev
|
|
```
|
|
|
|
https://github.com/AndrewPrifer/CodropsCameraFlyThroughTutorial/
|