archiwum/j4studio-web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

repait ligh and orgin point

Browse Source
This commit is contained in:
Stanislaw
2023-10-23 22:49:36 +02:00
parent f24f70b59c
commit d2bfcd0239
3 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/models/skeleton/eye.gltf
View File

Binary file not shown.

BIN
public/models/skeleton/head.gltf
View File

Binary file not shown.

59
src/components/mesh/skeleton.tsx
View File

@@ -15,17 +15,48 @@ import { OrbitControls, useScroll } from "@react-three/drei";
function SkeletonMesh() {
const mesh = useRef<Mesh>(null!);
const head = useLoader(GLTFLoader, "/models/skeleton/head.gltf");
let head = useLoader(GLTFLoader, "/models/skeleton/head.gltf");
const eye = useLoader(GLTFLoader, "/models/skeleton/eye.gltf");
const eye2 = useLoader(GLTFLoader, "/models/skeleton/eye.gltf");
const body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
return (
<group>
<mesh ref={mesh} scale={0.5} position={[-30, 1, 0]}>
<mesh
ref={mesh}
scale={0.1}
position={[-1, 0.72, -0.91]}
rotation={[
THREE.MathUtils.degToRad(0),
THREE.MathUtils.degToRad(70),
THREE.MathUtils.degToRad(0),
]}
>
<primitive object={eye.scene} />
</mesh>
<mesh ref={mesh} scale={0.09} position={[-6.5, 0.5, 0.3]}>
<mesh
ref={mesh}
scale={0.1}
position={[-2.3, 0.5, -1]}
rotation={[
THREE.MathUtils.degToRad(0),
THREE.MathUtils.degToRad(25),
THREE.MathUtils.degToRad(0),
]}
>
<primitive object={head.scene} />
</mesh>
<mesh
ref={mesh}
scale={0.1}
position={[-2.03, 0.72, -0.91]}
rotation={[
THREE.MathUtils.degToRad(0),
THREE.MathUtils.degToRad(70),
THREE.MathUtils.degToRad(0),
]}
>
<primitive object={eye.scene} />
</mesh>
</group>
);
}
@@ -53,17 +84,21 @@ export default function Skeleton() {
rotation: [0, THREE.MathUtils.degToRad(90), 0],
}}
>
<ambientLight intensity={3} />
{/* <OrbitControls /> */}
<pointLight intensity={4} />
<gridHelper args={[99, 99, "grey", "grey"]} />
<SkeletonMesh />
{meshArray.map((el) => {
return (
<mesh position={[el.x, el.y, el.z]}>
<sphereGeometry args={[0.2 * Math.random()]} />
<meshPhysicalMaterial color="white" />
</mesh>
);
})}
<group>
<ambientLight />
{meshArray.map((el) => {
return (
<mesh position={[el.x, el.y, el.z]}>
<sphereGeometry args={[0.2 * Math.random()]} />
<meshPhysicalMaterial color="white" />
</mesh>
);
})}
</group>
</Canvas>
);
}