add planet

2024-08-05 18:40:46 +09:00 · 2024-08-05 18:40:46 +09:00 · 5c79c64679
commit 5c79c64679
parent f5fa7a9a0c
6 changed files with 175 additions and 125 deletions
--- 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
 ```
+
+
--- a/dist/vrma
+++ b/dist/vrma
@ -1 +1 @@
-Subproject commit 12ce521873fb3a4ec2fd3f5e75a0792351c8a207
+Subproject commit 1eccc36a5113246728ae8b63389c948ce1bd286f
--- 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%;
-}
--- 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<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);
@ -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) => {
@ -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);
@ -47,13 +55,27 @@ 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']) {
@ -61,112 +83,116 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 	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 [positions, colors]
+	}, [nodes, model_color])

-  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>
-  )
+	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,
@ -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;
--- 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;
--- 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"
+	]
 }