57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import "./canvas.sass";
|
|
import {motion} from "framer-motion";
|
|
import {Canvas as ThreeCanvas} from "@react-three/fiber";
|
|
import {Moon} from "./Moon";
|
|
import {AnimateFade, AnimateSpin} from "../animations";
|
|
import {Environment, OrbitControls, useTexture} from "@react-three/drei";
|
|
import Jupiter from "../img/2k_jupiter.jpg";
|
|
import Makemake from "../img/2k_makemake_fictional.jpg";
|
|
import Ceres from "../img/2k_ceres_fictional.jpg";
|
|
import Haumea from "../img/2k_haumea_fictional.jpg";
|
|
import MilkyWay from "../img/2k_stars_milky_way.jpg";
|
|
|
|
const main = AnimateFade();
|
|
export default function Canvas() {
|
|
|
|
// fade animation sync with loading
|
|
return (
|
|
<motion.main initial={main.initial} animate={main.animate} transition={{duration: 3}} className="canvas">
|
|
<section className="canvas-ctr">
|
|
<ThreeCanvas shadows>
|
|
<OrbitControls enableZoom={false} />
|
|
<Environment background files={MilkyWay}/>
|
|
<Moons/>
|
|
<Planet/>
|
|
<directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
|
|
</ThreeCanvas>
|
|
</section>
|
|
<motion.h1 className="welcome" animate={AnimateSpin().animate}>
|
|
Welcome to my blog
|
|
</motion.h1>
|
|
<h3 className="tooltip">
|
|
Drag to orbit
|
|
</h3>
|
|
</motion.main>
|
|
)
|
|
}
|
|
|
|
function Moons() {
|
|
const makemake = useTexture(Makemake);
|
|
const haumea = useTexture(Haumea);
|
|
const ceres = useTexture(Ceres);
|
|
|
|
return <>
|
|
<Moon radius={8} color="pink" map={makemake} step={0.01}/>
|
|
<Moon radius={6} color="grey" map={haumea} step={0.02}/>
|
|
<Moon radius={4} color="green" map={ceres} step={0.03}/>
|
|
</>
|
|
}
|
|
|
|
function Planet() {
|
|
const colorMap = useTexture(Jupiter);
|
|
|
|
return <mesh position={[0,0,0]}>
|
|
<sphereGeometry />
|
|
<meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
|
|
</mesh>
|
|
} |