import cn from 'classnames'; import dynamic from 'next/dynamic'; import Image from 'next/future/image'; import Head from 'next/head'; import { useEffect, useRef, useState } from 'react'; import { InitFn, THREE, useThree } from 'rua-three'; import styles from 'styles/index/index.module.css'; import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import type { NextPageWithLayout } from 'types'; const MainLayout = dynamic(() => import('layouts/MainLayout')); const Loading = dynamic(() => import('components/RUA/loading/RUALoading')); const manager = new THREE.LoadingManager(); const gltfLoader = new GLTFLoader(manager); const Home: NextPageWithLayout = () => { const wrapper = useRef(null); const [size, setSize] = useState({ width: 500, height: 300, }); const [loading, setLoading] = useState(true); const [showLoading, setShowLoading] = useState(true); manager.onLoad = () => { setLoading(false); setTimeout(() => { setShowLoading(false); }, 300); }; const setCanvasSize = () => { if (!wrapper.current) return; const width = wrapper.current.clientWidth; const height = wrapper.current.clientHeight; setSize({ width, height, }); }; useEffect(() => { setCanvasSize(); window.addEventListener('resize', setCanvasSize); return () => { window.removeEventListener('resize', setCanvasSize); }; }, []); const init: InitFn = ({ scene, camera, controls, frameArea }) => { controls.enablePan = false; controls.minDistance = 1; controls.minPolarAngle = Math.PI * 0.2; controls.maxPolarAngle = Math.PI * 0.5; controls.maxAzimuthAngle = Math.PI * 0.2; camera.position.set(0, 5, 5); const light = new THREE.SpotLight(0xffffff, 1.4, 100, 15); scene.add(new THREE.AmbientLight(0xffffff, 0.8)); scene.add(light); const handleLoad = (gltf: GLTF) => { const root = gltf.scene; scene.add(root); const box = new THREE.Box3().setFromObject(root); const boxSize = box.getSize(new THREE.Vector3()).length(); const boxCenter = box.getCenter(new THREE.Vector3()); light.target = root; light.position.set(0, 2, 4); light.rotateX(Math.PI * 0.4); frameArea(boxSize * 0.8, boxSize, boxCenter, camera); controls.maxDistance = boxSize * 10; controls.target.copy(boxCenter); controls.update(); }; gltfLoader.load('/models/just_a_hungry_cat/scene.gltf', handleLoad); }; const { ref } = useThree({ init, ...size, alpha: true, renderOnDemand: true, }); return ( <> RUA - HOME
{/*

Hi there 👋, I'm Arthur.

*/}

Hi there hands

{showLoading && (
)}
{/*

I'm a Front-end developer. Yes, that's mean

setShowLang(true)} onMouseLeave={() => setShowLang(false)} > I make websites{' '} (and web apps) .{' '} The{' '} JavaScript TypeScript {' '} is my favorite language.

I'm not a creator. Just a little guy standing on the shoulders of giants with a little imagination.

Open source is my passion. It's making everything be great.{' '}

*/}
); }; Home.getLayout = function getLayout(page) { return {page}; }; export default Home;