From 083c977922446df7325bef4cc893c24a440ebbe7 Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 00:18:49 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E3=82=A2=E3=82=A6=E3=83=88?= =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index 37178fe..ba6f233 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -1,9 +1,10 @@ import { OrbitControls, useGLTF } from "@react-three/drei"; -import { Canvas } from "@react-three/fiber"; +import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { Bloom, EffectComposer } from "@react-three/postprocessing"; -import { type ReactNode, useEffect, useRef } from "react"; -import type { Group, MeshStandardMaterial } from "three"; +import { type ReactNode, useEffect, useMemo, useRef } from "react"; +import type { MeshStandardMaterial } from "three"; import * as THREE from "three"; +import { OutlineEffect } from "three/addons/effects/OutlineEffect.js"; import type { Accessory, CharacterSetting } from "~/features/profile/Profile"; const HAIR_MESH_NAMES = [ @@ -131,6 +132,31 @@ export function ModelViewer({ characterSetting }: ModelProps): ReactNode { minPolarAngle={(Math.PI / 5) * 2} maxPolarAngle={(Math.PI / 5) * 2} /> + ); } + +// 参考: https://github.com/pmndrs/react-three-fiber/discussions/1045 +function OutlineRenderer(): ReactNode { + const { size, gl, scene, camera } = useThree(); + + const effect = useMemo(() => { + const effect = new OutlineEffect(gl, { + defaultThickness: 0.003, + defaultColor: new THREE.Color("#333333").toArray(), + }); + + return effect; + }, [gl]); + + useEffect(() => { + effect.setSize(size.width, size.height); + }, [effect, size]); + + useFrame(() => { + effect.render(scene, camera); + }, 1); + + return null; +} From f10c4932527f6dd72871cd893165fe1ab7b613ae Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 00:25:23 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=BD=B1=E3=81=AE=E3=82=B0?= =?UTF-8?q?=E3=83=A9=E3=83=87=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E7=94=A8?= =?UTF-8?q?=E3=83=9E=E3=83=83=E3=83=97=E3=83=86=E3=82=AF=E3=82=B9=E3=83=81?= =?UTF-8?q?=E3=83=A3=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E3=82=92?= =?UTF-8?q?=E3=83=A1=E3=83=A2=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index ba6f233..9fd2476 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -40,11 +40,15 @@ function useCharacterSetting(setting: CharacterSetting) { const { scene } = useGLTF(modelPath); - useEffect(() => { + const threeTone = useMemo(() => { const threeTone = new THREE.TextureLoader().load("/assets/threeTone.jpg"); threeTone.minFilter = THREE.NearestFilter; threeTone.magFilter = THREE.NearestFilter; + return threeTone; + }, []); + + useEffect(() => { scene.traverse((child) => { if (!(child as THREE.Mesh).isMesh) return; const mesh = child as THREE.Mesh; @@ -60,7 +64,7 @@ function useCharacterSetting(setting: CharacterSetting) { }); mesh.material = newMaterial; }); - }, [scene]); + }, [scene, threeTone]); useEffect(() => { scene.traverse((child) => { From ec94d4925573d999580a5ae97a2fca24be5456f1 Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 00:50:38 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E3=83=A2=E3=83=87=E3=83=AB?= =?UTF-8?q?=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E3=82=92Suspense=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index 9fd2476..f67bd33 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -1,7 +1,7 @@ import { OrbitControls, useGLTF } from "@react-three/drei"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { Bloom, EffectComposer } from "@react-three/postprocessing"; -import { type ReactNode, useEffect, useMemo, useRef } from "react"; +import { type ReactNode, Suspense, useEffect, useMemo, useRef } from "react"; import type { MeshStandardMaterial } from "three"; import * as THREE from "three"; import { OutlineEffect } from "three/addons/effects/OutlineEffect.js"; @@ -124,11 +124,13 @@ export function ModelViewer({ characterSetting }: ModelProps): ReactNode { {/* ポストプロセッシング */} - + - {/* GLBモデルの読み込みと表示 */} - + + {/* GLBモデルの読み込みと表示 */} + + {/* カメラコントロールの追加（ユーザーが自由にカメラを操作できるようにする） */} - + {/* アウトラインエフェクト */} + {/* */} ); } From d6e6e1395b4f1a0eed134fe705851bcc7163f3bb Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 01:24:18 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E3=83=A2=E3=83=87=E3=83=AB?= =?UTF-8?q?=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E4=B8=AD=E3=81=AE=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 16 ++++++++++++++-- public/assets/font.ttf | Bin 0 -> 4160 bytes 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 public/assets/font.ttf diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index f67bd33..a7a3edf 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -1,4 +1,4 @@ -import { OrbitControls, useGLTF } from "@react-three/drei"; +import { Billboard, OrbitControls, Text, useGLTF } from "@react-three/drei"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { Bloom, EffectComposer } from "@react-three/postprocessing"; import { type ReactNode, Suspense, useEffect, useMemo, useRef } from "react"; @@ -127,7 +127,19 @@ export function ModelViewer({ characterSetting }: ModelProps): ReactNode { - + + + 読み込み中… + + + } + > {/* GLBモデルの読み込みと表示 */} diff --git a/public/assets/font.ttf b/public/assets/font.ttf new file mode 100644 index 0000000000000000000000000000000000000000..482ea87b3d7d498f55a33b574a4dea666622339d GIT binary patch literal 4160 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 SEoKv+4&nQ^vP&T9!~O&EkphDN literal 0 HcmV?d00001 From 69ffded6ccd71bc24fb465c8e3c15bc3fda4656f Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 01:32:26 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E3=82=AB=E3=83=A1=E3=83=A9?= =?UTF-8?q?=E3=81=AE=E3=82=B3=E3=83=B3=E3=83=88=E3=83=AD=E3=83=BC=E3=83=AB?= =?UTF-8?q?=E5=88=B6=E9=99=90=E3=82=92=E5=B0=91=E3=81=97=E7=B7=A9=E5=92=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index a7a3edf..9a2b957 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -116,7 +116,7 @@ export function ModelViewer({ characterSetting }: ModelProps): ReactNode { background: new THREE.Color("#0ea5e9"), }} camera={{ - position: [0, 0, 2], + position: [1, 0, 2], fov: 30, }} // カメラの初期位置と視野角を設定 > @@ -145,10 +145,13 @@ export function ModelViewer({ characterSetting }: ModelProps): ReactNode { {/* カメラコントロールの追加（ユーザーが自由にカメラを操作できるようにする） */} {/* アウトラインエフェクト */} {/* */} From 3846e505ae7f31077d4886294a4ae4720fae1f97 Mon Sep 17 00:00:00 2001 From: NISHIZAWA Shuntaro Date: Wed, 6 Nov 2024 01:36:47 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E3=83=AC=E3=83=B3=E3=83=80=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E9=9D=A2=E3=82=92=E5=BC=95=E3=81=8D=E7=B6=99?= =?UTF-8?q?=E3=81=90=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/ModelLoad.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx index 9a2b957..6519d81 100644 --- a/app/components/ModelLoad.tsx +++ b/app/components/ModelLoad.tsx @@ -61,6 +61,7 @@ function useCharacterSetting(setting: CharacterSetting) { emissive: oldMaterial.emissive, emissiveIntensity: oldMaterial.emissiveIntensity, emissiveMap: oldMaterial.emissiveMap, + side: oldMaterial.side, }); mesh.material = newMaterial; });