Compare commits
4 Commits
main
...
f079dfa1d6
Author | SHA1 | Date | |
---|---|---|---|
f079dfa1d6
|
|||
d46df3c003
|
|||
d5d5838953
|
|||
602ffa7550
|
15
README.md
15
README.md
@ -16,21 +16,8 @@ $ yarn dev
|
|||||||
$ yarn build
|
$ yarn build
|
||||||
```
|
```
|
||||||
|
|
||||||
## planet
|
|
||||||
|
|
||||||
- deploy : [https://card.syui.ai/planet?g=sun](https://card.syui.ai/planet?g=sun)
|
|
||||||
- ref : [https://git.syui.ai/ai/star](https://git.syui.ai/ai/star/src/branch/main/galaxy-react)
|
|
||||||
|
|
||||||
```
|
|
||||||
$ cd planet
|
|
||||||
$ npm i
|
|
||||||
$ npm run start
|
|
||||||
```
|
|
||||||
|
|
||||||
## min-react
|
## min-react
|
||||||
|
|
||||||
three-vrm v3 + vrm(unity + vrm v1.0) + anim(vrma)
|
|
||||||
|
|
||||||
```
|
```
|
||||||
$ cd min-react
|
$ cd min-react
|
||||||
$ npm i
|
$ npm i
|
||||||
@ -46,5 +33,3 @@ $ cd min-ts
|
|||||||
$ yarn install
|
$ yarn install
|
||||||
$ yarn dev
|
$ yarn dev
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
2
dist/vrma
vendored
2
dist/vrma
vendored
Submodule dist/vrma updated: 1eccc36a51...12ce521873
@ -3,19 +3,19 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@pixiv/three-vrm": "^3.1.1",
|
"@pixiv/three-vrm": "^3.0.0",
|
||||||
"@pixiv/three-vrm-animation": "^3.1.1",
|
"@pixiv/three-vrm-animation": "^3.0.0",
|
||||||
"@react-three/drei": "^9.114.0",
|
"@react-three/drei": "^9.109.2",
|
||||||
"@react-three/fiber": "^8.17.9",
|
"@react-three/fiber": "^8.16.8",
|
||||||
"@react-three/postprocessing": "^2.16.3",
|
"@react-three/postprocessing": "^2.16.2",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"@types/jest": "^27.5.2",
|
"@types/jest": "^27.5.2",
|
||||||
"@types/node": "^16.18.112",
|
"@types/node": "^16.18.104",
|
||||||
"@types/react": "^18.3.10",
|
"@types/react": "^18.3.3",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
"@types/three": "^0.167.2",
|
"@types/three": "^0.167.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
@ -14,9 +14,9 @@
|
|||||||
"webpack-dev-server": "^5.0.3"
|
"webpack-dev-server": "^5.0.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@pixiv/three-vrm": "^3.1.0",
|
"@pixiv/three-vrm": "^3.0.0",
|
||||||
"@pixiv/three-vrm-animation": "^3.1.0",
|
"@pixiv/three-vrm-animation": "^3.0.0",
|
||||||
"@pixiv/three-vrm-springbone": "^3.1.0",
|
"@pixiv/three-vrm-springbone": "^3.0.0",
|
||||||
"postprocessing": "^6.35.2",
|
"postprocessing": "^6.35.2",
|
||||||
"three": "^0.167.1"
|
"three": "^0.167.1"
|
||||||
}
|
}
|
||||||
|
@ -3,9 +3,8 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@pixiv/three-vrm": "^3.1.0",
|
"@pixiv/three-vrm": "^3.0.0",
|
||||||
"@pixiv/three-vrm-animation": "^3.1.0",
|
"@pixiv/three-vrm-animation": "^3.0.0",
|
||||||
"@pixiv/three-vrm-springbone": "^3.1.0",
|
|
||||||
"@react-three/drei": "^9.109.2",
|
"@react-three/drei": "^9.109.2",
|
||||||
"@react-three/fiber": "^8.16.8",
|
"@react-three/fiber": "^8.16.8",
|
||||||
"@react-three/postprocessing": "^2.16.2",
|
"@react-three/postprocessing": "^2.16.2",
|
||||||
|
@ -5,7 +5,6 @@ import { useFrame, Canvas } from '@react-three/fiber';
|
|||||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
|
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
|
||||||
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
|
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
|
||||||
import { VRMSpringBoneManager } from '@pixiv/three-vrm-springbone';
|
|
||||||
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
|
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
|
||||||
import { SphereGeometry } from 'three';
|
import { SphereGeometry } from 'three';
|
||||||
import { GLTF } from 'three-stdlib'
|
import { GLTF } from 'three-stdlib'
|
||||||
@ -22,7 +21,6 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
|
|||||||
|
|
||||||
const [vrm, setVrm] = useState<VRM | null>(null);
|
const [vrm, setVrm] = useState<VRM | null>(null);
|
||||||
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
|
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
|
||||||
const springBoneManagerRef = useRef<VRMSpringBoneManager | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
@ -31,8 +29,6 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
|
|||||||
loader.load(url, (gltf) => {
|
loader.load(url, (gltf) => {
|
||||||
const vrmModel = gltf.userData.vrm as VRM;
|
const vrmModel = gltf.userData.vrm as VRM;
|
||||||
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
|
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
|
||||||
springBoneManagerRef.current = vrmModel.springBoneManager as VRMSpringBoneManager;
|
|
||||||
springBoneManagerRef.current?.reset();
|
|
||||||
setVrm(vrmModel);
|
setVrm(vrmModel);
|
||||||
if (vrmModel) {
|
if (vrmModel) {
|
||||||
vrmModel.scene.rotation.set(...rotation);
|
vrmModel.scene.rotation.set(...rotation);
|
||||||
@ -53,7 +49,6 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
|
|||||||
|
|
||||||
useFrame((state, delta) => {
|
useFrame((state, delta) => {
|
||||||
if (mixerRef.current) mixerRef.current.update(delta);
|
if (mixerRef.current) mixerRef.current.update(delta);
|
||||||
if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
|
|
||||||
if (vrm) vrm.update(delta);
|
if (vrm) vrm.update(delta);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -67,7 +62,7 @@ interface ModelGlbProps {
|
|||||||
scale?: number
|
scale?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system.glb", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => {
|
const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system_animation.glb", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => {
|
||||||
const { scene } = useGLTF(url)
|
const { scene } = useGLTF(url)
|
||||||
scene.scale.setScalar(scale);
|
scene.scale.setScalar(scale);
|
||||||
scene.position.set(...position);
|
scene.position.set(...position);
|
||||||
@ -160,7 +155,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
|
|||||||
<group {...props} dispose={null} ref={ref}>
|
<group {...props} dispose={null} ref={ref}>
|
||||||
<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1} rotation={rotation_custom} />
|
<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1} rotation={rotation_custom} />
|
||||||
{g === 'sun' && <GlbModel url="./models/solar-system.glb" scale={10} />}
|
{g === 'sun' && <GlbModel url="./models/solar-system.glb" scale={10} />}
|
||||||
{g === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={0.5} position={[0,0.5,2]}/>}
|
{g === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={1} position={[0,0.5,2]}/>}
|
||||||
|
|
||||||
<pointLight
|
<pointLight
|
||||||
position={[0, 0, 0]}
|
position={[0, 0, 0]}
|
||||||
|
@ -10,7 +10,6 @@ import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocess
|
|||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
|
||||||
let default_model = "/vrma/model/ai.vrm"
|
|
||||||
// vrma
|
// vrma
|
||||||
let motion_enable = false;
|
let motion_enable = false;
|
||||||
let head = null;
|
let head = null;
|
||||||
@ -108,7 +107,7 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||||||
return new VRMAnimationLoaderPlugin(parser);
|
return new VRMAnimationLoaderPlugin(parser);
|
||||||
});
|
});
|
||||||
|
|
||||||
load(default_model);
|
load("/vrma/model/ai.vrm");
|
||||||
load("/vrma/anime/fly_c.vrma");
|
load("/vrma/anime/fly_c.vrma");
|
||||||
|
|
||||||
let item = null;
|
let item = null;
|
||||||
|
@ -3,9 +3,5 @@
|
|||||||
"target": "es2016",
|
"target": "es2016",
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"skipLibCheck": true
|
"skipLibCheck": true
|
||||||
},
|
}
|
||||||
"exclude": [
|
|
||||||
"min-*",
|
|
||||||
"planet"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user