fix
This commit is contained in:
parent
a1d4acde15
commit
eba532c3d8
GPG Key ID:
5417CFEBAD92DF56
98
content/blog/2024-08-28-three.md
Normal file
98
content/blog/2024-08-28-three.md
Normal file
@ -0,0 +1,98 @@
|
||||
+++
|
||||
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/
|
||||
@ -8,7 +8,7 @@ slug = "ue"
|
||||
|
||||
ここでは[epic games](https://www.epicgames.com/)の[unreal engine 5](https://www.unrealengine.com/ja/unreal-engine-5)の使い方をまとめます。現在はversionの`5.4.2`に追従しています。
|
||||
|
||||
- [ue 5.4.2](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/unreal-engine-5.4-release-notes)
|
||||
- [ue 5.4.4](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/unreal-engine-5.4-release-notes)
|
||||
- [ue 5.3.2](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/unreal-engine-5.3-release-notes)
|
||||
|
||||
ブログで説明しづらい部分が多いので[blueprintue](https://blueprintue.com/profile/ai/)を参考にしてください。
|
||||
@ -1212,3 +1212,33 @@ https://github.com/gtreshchev/RuntimeSpeechRecognizer/wiki/1.-How-to-use-the-plu
|
||||
|
||||
https://www.youtube.com/watch?v=xBs-nXzXwoM&list=LL&index=1
|
||||
|
||||
### [tips] city sampleのbgmをcustomする
|
||||
|
||||
[suno](https://suno.com/@syui)を使用して作ると良いでしょう。
|
||||
|
||||
https://www.youtube.com/watch?v=99uP2WuU2Jo
|
||||
|
||||
`Audio/MetaSounds/Music/music_leavebehind_New_mix_Meta`を編集して、引用されているbaseの音楽を変更します。ただし、補助楽器を鳴らしているものは変更しません。
|
||||
|
||||
基本的にはそれぞれのパターンに合わせて、baseとなるbgmを改変して複数用意して入れていきます。そこまで面倒な手間をかけていられない場合は全部同じものを入れます。
|
||||
|
||||
### [issue] build後にcity sampleの風の音が消える
|
||||
|
||||
```sh
|
||||
# [close]
|
||||
この問題は最初にPlayStartする場所が鍵でした。私は上空の家でスタートさせているのですが、これを地上でスタートさせるようにしなければなりません。
|
||||
あるいは、再度スタートさせる場所を変更、移動して読み込みましょう。
|
||||
```
|
||||
|
||||
build後にcity sampleの風の音が消えていることに気づいた。
|
||||
|
||||
いつ頃から消えていたかはよくわからないけど、多分、音声認識のpluginを入れてからだと思う。
|
||||
|
||||
しかし、おかしなところはopen levelでまずはtitle画面を読み込んでそこからmapに移行するんだけど、title画面では風の音が聞こえている。mapに移行してから消える。
|
||||
|
||||
それもただ消えるだけじゃなく、他の音は聞こえる。他の音もcity sampleの同じシステムで作成、管理されている。
|
||||
|
||||
でも風の音だけ消えているように思う。なお、これらの問題はeditorやpreviewでは確認できず、あくまでbuild後のpackage(exe)で発生している。
|
||||
|
||||
参照ビューアで辿っていると、`Script/CitySampleWorldAudioDataScript`に行き当たり、そこで`MetaSounds/Ambint/sfx_amb_Pawn_Wind_lp_meta`を追加したがbuild後に再生されていない。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user