Skip to content

Commit

Permalink
add planet
Browse files Browse the repository at this point in the history
  • Loading branch information
@syui
syui committed Aug 6, 2024
1 parent f5fa7a9 commit 5c79c64
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 126 deletions.
15 changes: 15 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,21 @@ $ yarn dev
$ 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

three-vrm v3 + vrm(unity + vrm v1.0) + anim(vrma)

```
$ cd min-react
$ npm i
Expand All @@ -33,3 +46,5 @@ $ cd min-ts
$ yarn install
$ yarn dev
```


2 changes: 1 addition & 1 deletion dist/vrma
Submodule vrma updated from 12ce52 to 1eccc3
20 changes: 10 additions & 10 deletions planet/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
html {
height: 100%;
}

body {
background-color: #fff;
background-color: #000;
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}

div#root{
height: 100%;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

html {
height: 100%;
}
248 changes: 139 additions & 109 deletions planet/src/pages/vrm_model.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as THREE from 'three'
import React, { useState, useEffect, useRef,useMemo } from 'react';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Points, OrbitControls, useGLTF } from '@react-three/drei'
import { useFrame, Canvas } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
Expand All @@ -12,9 +12,12 @@ import { GLTF } from 'three-stdlib'
interface ModelProps {
url: string
url_anim: string
position?: [number, number, number]
rotation?: [number, number, number]
scale?: number
}

const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma" }) => {
const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 1.5, 0] }) => {

const [vrm, setVrm] = useState<VRM | null>(null);
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
Expand All @@ -27,6 +30,11 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
const vrmModel = gltf.userData.vrm as VRM;
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
setVrm(vrmModel);
if (vrmModel) {
vrmModel.scene.rotation.set(...rotation);
vrmModel.scene.position.set(...position);
vrmModel.scene.scale.setScalar(scale);
}
const mixer = new THREE.AnimationMixer(vrmModel.scene);
mixerRef.current = mixer;
loader.load(url_anim, (animGltf) => {
Expand All @@ -37,7 +45,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
}
});
});
}, [url, url_anim]);
}, [url, url_anim, position, scale, rotation]);

useFrame((state, delta) => {
if (mixerRef.current) mixerRef.current.update(delta);
Expand All @@ -47,126 +55,144 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
return vrm ? <primitive object={vrm.scene} /> : null;
};

interface ModelGlbProps {
url: string
position?: [number, number, number]
rotation?: [number, number, number]
scale?: number
}

const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system.glb", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => {
const { scene } = useGLTF(url)
scene.scale.setScalar(scale);
scene.position.set(...position);
return <primitive object={scene} />
}

type GLTFResult = GLTF & {
nodes: {
Object_2: THREE.Mesh
}
materials: {
['Scene_-_Root']: THREE.PointsMaterial
}
nodes: {
Object_2: THREE.Mesh
}
materials: {
['Scene_-_Root']: THREE.PointsMaterial
}
}

export function Galaxy(props: JSX.IntrinsicElements['group']) {
const ref = useRef<THREE.Group>(null!)
const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
const searchParams = new URLSearchParams(window.location.search);
var g = searchParams.get('g') ?? 'galaxy';
var model_path = "./models/" + g + ".glb"
var model_scale = 0.05;

const { nodes } = useGLTF(model_path) as GLTFResult
var model_galaxy = "./models/galaxy.glb"
var model_custom = "./models/ai.vrm"
var model_scale = 0.01;
var position_custom = [-0.2, -0.8, -0.3] as [number, number, number];
var rotation_custom = [0, 1.5, 0] as [number, number, number];
var sphereGeometry = new SphereGeometry(1, 332, 332);
var anim_custom = "./models/emote.vrma";
const { nodes } = useGLTF(model_galaxy) as GLTFResult
var model_color = 100;
nodes.Object_2.geometry.center()
if (g === 'sun'){
sphereGeometry = new SphereGeometry(1, 332, 332);
nodes.Object_2.geometry = sphereGeometry;
model_scale = 1;
} else if (g === 'moon'){
sphereGeometry = new SphereGeometry(1, 132, 132);
nodes.Object_2.geometry = sphereGeometry;
model_color = 1;
model_scale = 0.01;
position_custom = [-0.5,-1,0];
anim_custom = "./models/fly.vrma";
model_custom = "./models/ai_default.vrm";
} else if (g === 'earth'){
sphereGeometry = new SphereGeometry(1, 232, 232);
nodes.Object_2.geometry = sphereGeometry;
model_color = 0.5;
model_scale = 0.3;
position_custom = [-1,-1,0];
anim_custom = "./models/fly.vrma";
model_custom = "./models/ai_default.vrm";
} else if (g === 'neutron') {
model_color = 1;
}
const [positions, colors] = useMemo(() => {
nodes.Object_2.geometry.center()
const positions = new Float32Array(
nodes.Object_2.geometry.attributes.position.array.buffer
)
const colors = new Float32Array(positions.length)
const getDistanceToCenter = (x: number, y: number, z: number) =>
Math.sqrt(x * x + y * y + z * z)
var model_color = 100;
if (g === 'sun'){
const sphereGeometry = new SphereGeometry(1, 332, 332);
nodes.Object_2.geometry = sphereGeometry;
model_scale = 1;
} else if (g === 'moon'){
const sphereGeometry = new SphereGeometry(1, 132, 132);
nodes.Object_2.geometry = sphereGeometry;
model_color = 1;
model_scale = 0.1;
} else if (g === 'earth'){
const sphereGeometry = new SphereGeometry(1, 232, 232);
nodes.Object_2.geometry = sphereGeometry;
model_color = 0.5;
model_scale = 0.3;
} else if (g === 'asteroid') {
const sphereGeometry = new SphereGeometry(1, 32, 32);
nodes.Object_2.geometry = sphereGeometry;
model_color = 1;
model_scale = 0.1;
} else if (g === 'neutron') {
model_color = 1;
const positions = new Float32Array(
nodes.Object_2.geometry.attributes.position.array.buffer
)
const colors = new Float32Array(positions.length)
const getDistanceToCenter = (x: number, y: number, z: number) =>
Math.sqrt(x * x + y * y + z * z)
const color = new THREE.Color()
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i]
const y = positions[i + 1]
const z = positions[i + 1]
const distanceToCenter = getDistanceToCenter(x, y, z)
const normalizedDistanceToCenter = distanceToCenter / model_color
color.setHSL(
(0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2,
0.75,
0.6
)
color.setRGB(
Math.cos(normalizedDistanceToCenter),
THREE.MathUtils.randFloat(0, 0.8),
Math.sin(normalizedDistanceToCenter)
)
color.toArray(colors, i)
}
// make colors closer to 0,0,0 be more reddish and colors further away be more blueish
const color = new THREE.Color()
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i]
const y = positions[i + 1]
const z = positions[i + 2]
const distanceToCenter = getDistanceToCenter(x, y, z)
const normalizedDistanceToCenter = distanceToCenter / model_color
// make colors closer to 0,0,0 be more reddish and colors further away be more blueish (do not use hsl)
color.setHSL(
(0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2,
0.75,
0.6
)
color.setRGB(
Math.cos(normalizedDistanceToCenter),
THREE.MathUtils.randFloat(0, 0.8),
Math.sin(normalizedDistanceToCenter)
)
color.toArray(colors, i)
}

return [positions, colors]
}, [nodes])

useFrame(({ clock }) => {
// zoom in and out
ref.current.rotation.z = clock.getElapsedTime() / 2
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 10) + 1.2)
})

return (
<group {...props} dispose={null} ref={ref}>
<pointLight
position={[0, 0, 0]}
ref={galaxyCenterLightRef}
intensity={0.5}
/>
<Points scale={model_scale} positions={positions} colors={colors}>
<pointsMaterial
//map={starTexture}
transparent
depthWrite={false}
vertexColors
opacity={0.4}
depthTest
size={0.01}
/>
</Points>
<EffectComposer autoClear={false}>
<SelectiveBloom
intensity={5}
luminanceThreshold={0.01}
luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]}
/>
</EffectComposer>
<ambientLight intensity={1} />
</group>
)
return [positions, colors]
}, [nodes, model_color])

useFrame(({ clock }) => {
ref.current.rotation.y = clock.getElapsedTime() / 2
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2)
})

return (
<group {...props} dispose={null} ref={ref}>
<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 === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={0.5} position={[0,0.5,2]}/>}

<pointLight
position={[0, 0, 0]}
ref={galaxyCenterLightRef}
intensity={0.2}
/>
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
<pointsMaterial
//map={starTexture}
transparent
depthWrite={false}
vertexColors
opacity={0.4}
depthTest
size={0.01}
/>
</Points>
<EffectComposer autoClear={false}>
<SelectiveBloom
intensity={5}
luminanceThreshold={0.01}
luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]}
/>
</EffectComposer>
<ambientLight intensity={1} />
</group>
)
}

export const VRMModelCanvas = () => {
return (
<div style={{ height: '100vh', width: '100vw' }}>

<Canvas
shadows
gl={{
toneMapping: THREE.NeutralToneMapping,
toneMappingExposure: 1.5,
toneMappingExposure: 1.1,
alpha: true,
powerPreference: "high-performance",
antialias: true,
Expand All @@ -177,16 +203,20 @@ export const VRMModelCanvas = () => {
color="white"
castShadow
position={[0, 10, 0]}
intensity={1.5}
intensity={0.4}
shadow-mapSize={[1024, 1024]}/>

<OrbitControls />
<OrbitControls
minDistance={2} maxDistance={3}
enableZoom={true} enablePan={false} enableRotate={true}
zoomSpeed={0.5}
panSpeed={0.5}
rotateSpeed={0.5} />
<ambientLight intensity={1} />
<pointLight position={[10, 10, 10]} />
<VRMModel url="./models/ai.vrm" url_anim="./models/default.vrma" />
<Galaxy position={[0, 9, 0]} />
<Galaxy position={[0, 0, 0]} />
</Canvas>
</div>
)
}

export default VRMModelCanvas;
3 changes: 2 additions & 1 deletion src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocess

window.addEventListener("DOMContentLoaded", () => {

let default_model = "/vrma/model/test.vrm"
// vrma
let motion_enable = false;
let head = null;
Expand Down Expand Up @@ -107,7 +108,7 @@ window.addEventListener("DOMContentLoaded", () => {
return new VRMAnimationLoaderPlugin(parser);
});

load("/vrma/model/ai.vrm");
load(default_model);
load("/vrma/anime/fly_c.vrma");

let item = null;
Expand Down
Loading

0 comments on commit 5c79c64

Please sign in to comment.