Merge pull request #114 from Kyutech-C3/feature/#4-view-avatar-model

add:アバターの描画 #4
Kyutech-C3 · Jun 30, 2023 · 432d18b · 432d18b
2 parents 1e99f31 + 79bcfd2
commit 432d18b
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 8 deletions.
diff --git a/public/models/avatar.glb b/public/models/avatar.glb
diff --git a/public/models/site.glb b/public/models/site.glb
diff --git a/public/models/site_physics.glb b/public/models/site_physics.glb
diff --git a/src/components/Map/Avatar/Avatar.stories.tsx b/src/components/Map/Avatar/Avatar.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Avatar } from "./Avatar";
+
+export default {
+  title: "Map/Avatar",
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+  },
+} as Meta<typeof Avatar>;
+
+export const Default: StoryObj<typeof Avatar> = {};
diff --git a/src/components/Map/Avatar/Avatar.tsx b/src/components/Map/Avatar/Avatar.tsx
@@ -0,0 +1,113 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] avatar.glb --types --shadows
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei'
+import { GLTF } from 'three-stdlib'
+import { useBox, useCylinder } from '@react-three/cannon'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    antenna: THREE.Mesh
+    ear_L: THREE.Mesh
+    ear_R: THREE.Mesh
+    hair_front: THREE.Mesh
+    neck: THREE.Mesh
+    hair_top: THREE.Mesh
+    bangs_in: THREE.Mesh
+    eye: THREE.Mesh
+    hair_back: THREE.Mesh
+    hair_R: THREE.Mesh
+    hair_L: THREE.Mesh
+    bangs_out: THREE.Mesh
+    hair_tail_base: THREE.Mesh
+    hair_base_top: THREE.Mesh
+    face: THREE.Mesh
+    body_line: THREE.Mesh
+    body: THREE.Mesh
+    stomach: THREE.Mesh
+    skirt_out: THREE.Mesh
+    weast: THREE.Mesh
+    skirt_in: THREE.Mesh
+    skirt_edge: THREE.Mesh
+    arm_joint_1: THREE.Mesh
+    arm_1: THREE.Mesh
+    arm_joint_2: THREE.Mesh
+    arm_2_L: THREE.Mesh
+    palm: THREE.Mesh
+    C3: THREE.Mesh
+    finger_1: THREE.Mesh
+    finger_2: THREE.Mesh
+    finger_3: THREE.Mesh
+    finger_4: THREE.Mesh
+    leg_1: THREE.Mesh
+    leg_2: THREE.Mesh
+    leg_joint_1: THREE.Mesh
+    leg_joint_2: THREE.Mesh
+    heel: THREE.Mesh
+    arm_2_R: THREE.Mesh
+  }
+  materials: {
+    マテリアル: THREE.MeshStandardMaterial
+  }
+}
+
+export const Avatar = (props: JSX.IntrinsicElements['group']) => {
+  const { nodes, materials } = useGLTF('/models/avatar.glb') as GLTFResult
+  const [ref, api] = useCylinder(
+    () => ({
+      mass: 10,
+      position: [0, 10, -10],
+      args: [1, 1, 1.5, 8],
+      type: `Dynamic`,
+    }),
+    useRef<THREE.Group>(null),
+  );
+  return (
+    <group ref={ref} onClick={() => api.velocity.set(0, 5, 0)} {...props} dispose={null}>
+      <mesh castShadow receiveShadow geometry={nodes.antenna.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.ear_L.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.ear_R.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_front.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.neck.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_top.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.bangs_in.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.eye.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_back.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_R.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_L.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.bangs_out.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_tail_base.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.hair_base_top.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.face.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.body_line.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.body.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.stomach.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.skirt_out.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.weast.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.skirt_in.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.skirt_edge.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.arm_joint_1.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.arm_1.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.arm_joint_2.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.arm_2_L.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.palm.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.C3.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.finger_1.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.finger_2.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.finger_3.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.finger_4.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.leg_1.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.leg_2.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.leg_joint_1.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.leg_joint_2.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.heel.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+      <mesh castShadow receiveShadow geometry={nodes.arm_2_R.geometry} material={materials.マテリアル} rotation={[Math.PI / 2, 0, 0]} />
+    </group>
+  )
+}
+
+useGLTF.preload('/models/avatar.glb')
diff --git a/src/components/Map/Plane.tsx b/src/components/Map/Plane.tsx
@@ -4,9 +4,9 @@ import { useBox } from "@react-three/cannon";
 export const Plane = (props: any) => {
     const ref = useRef();
     const [_, api] = useBox(() => ({
-        type: 'Static',
+        type: 'Kinematic',
         position: [0, -1, 0],
-        args: [10000, 0, 10000],
+        args: [10000, 1, 10000],
         friction: 0
     }));
 

diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx
@@ -1,7 +1,8 @@
 import { Canvas, MeshProps } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
-import { Site } from "../../components/Map/Site/Site";
-import { Plane } from "../../components/Map/Plane"
+import { Site } from "@/components/Map/Site/Site";
+import { Plane } from "@/components/Map/Plane"
+import { Avatar } from "@/components/Map/Avatar/Avatar"
 import { Physics, useBox } from "@react-three/cannon";
 import { useRef } from "react";
 import { Mesh } from "three";
@@ -11,8 +12,9 @@ function FallBox(props: MeshProps) {
     const [ref, api] = useBox(
         () => ({
             mass: 1,
-            position: [30, 10, 0.8],
+            position: [30, 100, 0.8],
             args: [1, 1, 1],
+            type: `Dynamic`,
         }),
         useRef<Mesh>(null),
     );
@@ -34,15 +36,17 @@ const Map = () => {
             m: 0,
         }}>
             <Canvas camera={{ position: [0, 2, -1] }} shadows  >
+                <ambientLight />
+                <OrbitControls />
+                <pointLight position={[10, 30, 10]} />
                 <Physics
                     broadphase="SAP"
                     gravity={[0, -2.6, 0]}
                 >
-                    <directionalLight position={[0, 10, 0]} castShadow />
                     <Plane />
                     <FallBox />
-                    <Site />
-                    <OrbitControls target={[0, 0, 0]} />
+                    {/* <Site /> */}
+                    <Avatar />
                 </Physics >
             </Canvas >
         </Box >