morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Morten Olsen
2022-03-30 16:10:26 +02:00
parent a549a92077
commit 6e98a16895
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/hero/background.tsx
View File

@@ -1,4 +1,4 @@
import React, { Suspense, useMemo, useRef, useState } from 'react'; import React, { Suspense, useMemo, useRef, useState, useEffect } from 'react';
import { Canvas, useFrame, useLoader } from '@react-three/fiber'; import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { Clock, Euler, Vector3 } from 'three'; import { Clock, Euler, Vector3 } from 'three';
import { TextureLoader } from 'three/src/loaders/TextureLoader' import { TextureLoader } from 'three/src/loaders/TextureLoader'
@@ -36,11 +36,18 @@ const Cloud = ({ texture }) => {
const ref = useRef<any>(); const ref = useRef<any>();
const width = window.innerWidth / 2; const width = window.innerWidth / 2;
const height = window.innerHeight / 2; const height = window.innerHeight / 2;
const [ready, setReady] = useState(false);
useFrame(() => { useFrame(() => {
if (!ref.current) return; if (!ref.current || !ready) return;
ref.current.rotation.z -= 0.003; ref.current.rotation.z -= 0.003;
}); });
useEffect(() => {
setTimeout(() => {
setReady(true);
}, 500)
}, []);
return ( return (
<mesh <mesh