diff --git a/README.md b/README.md index 60046e33d..84db76ca5 100644 --- a/README.md +++ b/README.md @@ -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 @@ -33,3 +46,5 @@ $ cd min-ts $ yarn install $ yarn dev ``` + + diff --git a/dist/vrma b/dist/vrma index 12ce52187..1eccc36a5 160000 --- a/dist/vrma +++ b/dist/vrma @@ -1 +1 @@ -Subproject commit 12ce521873fb3a4ec2fd3f5e75a0792351c8a207 +Subproject commit 1eccc36a5113246728ae8b63389c948ce1bd286f diff --git a/planet/src/index.css b/planet/src/index.css index 4e3b2b47d..110949926 100644 --- a/planet/src/index.css +++ b/planet/src/index.css @@ -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%; -} diff --git a/planet/src/pages/vrm_model.tsx b/planet/src/pages/vrm_model.tsx index 6e6f05aef..e8432a9ab 100644 --- a/planet/src/pages/vrm_model.tsx +++ b/planet/src/pages/vrm_model.tsx @@ -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'; @@ -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 = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma" }) => { +const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 1.5, 0] }) => { const [vrm, setVrm] = useState(null); const mixerRef = useRef(null); @@ -27,6 +30,11 @@ const VRMModel: React.FC = ({ 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) => { @@ -37,7 +45,7 @@ const VRMModel: React.FC = ({ 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); @@ -47,13 +55,27 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m return vrm ? : null; }; +interface ModelGlbProps { + url: string + position?: [number, number, number] + rotation?: [number, number, number] + scale?: number +} + +const GlbModel: React.FC = ({ 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 +} + 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']) { @@ -61,112 +83,116 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { const galaxyCenterLightRef = useRef(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 [positions, colors] + }, [nodes, model_color]) - return ( - - - - - - - - - - - ) + useFrame(({ clock }) => { + ref.current.rotation.y = clock.getElapsedTime() / 2 + ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2) + }) + + return ( + + + {g === 'sun' && } + {g === 'galaxy' && } + + + + + + + + + + + ) } export const VRMModelCanvas = () => { return ( -
- { color="white" castShadow position={[0, 10, 0]} - intensity={1.5} + intensity={0.4} shadow-mapSize={[1024, 1024]}/> - + - - + -
) } + export default VRMModelCanvas; diff --git a/src/index.ts b/src/index.ts index 9391cedcc..a6f550273 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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; @@ -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; diff --git a/tsconfig.json b/tsconfig.json index 6794acd31..426d205f2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { - "compilerOptions": { - "target": "es2016", - "module": "commonjs", - "skipLibCheck": true - } + "compilerOptions": { + "target": "es2016", + "module": "commonjs", + "skipLibCheck": true + }, + "exclude": [ + "min-*", + "planet" + ] }