xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 17:21:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

load gltf model

Browse Source
This commit is contained in:
DefectingCat
2023-05-16 11:42:44 +08:00
parent 3eeff2efd9
commit 19ff3b7f58
4 changed files with 363 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/home-modle.tsx
View File

@ -1,14 +1,40 @@
'use client';
import { Canvas } from '@react-three/fiber';
import { Canvas, useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { Environment, OrbitControls } from '@react-three/drei';
const HomeModle = () => {
const Model = () => {
const gltf = useLoader(
GLTFLoader,
'./models/just_a_hungry_cat/modelDraco.gltf',
(loader) => {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./libs/draco/');
loader.setDRACOLoader(dracoLoader);
}
);
return (
<>
<primitive object={gltf.scene} />
</>
);
};
const HomeModel = () => {
return (
<Canvas>
<spotLight color={0xffffff} intensity={2} distance={100} angle={15} />
<ambientLight color={0xffffff} intensity={1} />
<Model />
{/*
<OrbitControls />
<Environment preset="sunset" background />
*/}
</Canvas>
);
};
export default HomeModle;
export default HomeModel;

6
app/page.tsx
View File

@ -7,7 +7,7 @@ import Image from 'next/image';
import { Suspense, useCallback } from 'react';
import styles from 'styles/index/index.module.css';
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
import HomeModle from './home-modle';
import HomeModel from './home-modle';
export const metadata = {
title: 'RUA - Home',
@ -31,8 +31,8 @@ export default function Page() {
</span>
</h1>
<div>
<HomeModle />
<div className="w-full h-full">
<HomeModel />
</div>
</div>
</main>