tymur999/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add welcome to canvas

Browse Source
This commit is contained in:
tymur999
2026-04-12 15:53:01 -05:00
parent c0dc4eaca4
commit 3187ff439b
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/index/Canvas.tsx
View File

@@ -2,8 +2,7 @@ import "./canvas.sass";
import {motion} from "framer-motion"; import {motion} from "framer-motion";
import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber"; import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
import {Moon} from "./Moon"; import {Moon} from "./Moon";
import {AnimateSpin} from "../animations"; import {BakeShadows, Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
import {BakeShadows, Environment, OrbitControls, Preload, useTexture} from "@react-three/drei";
import Jupiter from "../img/2k_jupiter.webp"; import Jupiter from "../img/2k_jupiter.webp";
import Makemake from "../img/2k_makemake_fictional.webp"; import Makemake from "../img/2k_makemake_fictional.webp";
import Ceres from "../img/2k_ceres_fictional.webp"; import Ceres from "../img/2k_ceres_fictional.webp";
@@ -17,26 +16,27 @@ import * as THREE from "three";
useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]); useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]);
export default function Canvas() { export default function Canvas() {
// fade animation sync with loading // fade animation sync with loading
return ( return (
<motion.main className="canvas"> <motion.main className="canvas">
<section className="canvas-ctr"> <section className="canvas-ctr">
<ThreeCanvas camera={{position: [3,3,3]}} shadows dpr={[1, 2]}> <ThreeCanvas camera={{position: [0,0,10]}} shadows dpr={[1, 2]}>
<OrbitControls enablePan={false} enableZoom={false} /> <OrbitControls enablePan={false} enableZoom={false} />
<BakeShadows/> <BakeShadows/>
<Environment background files={MilkyWay}/> <Environment background files={MilkyWay}/>
<Moons/> <Moons/>
<Planet/> <Planet/>
<Rings/> <Rings/>
<Html center transform position={[0,0,2]}>
<h1 className="welcome">
Welcome to my blog
</h1>
</Html>
<ambientLight args={[1,1]} /> <ambientLight args={[1,1]} />
<directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} /> <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
<Preload all /> <Preload all />
</ThreeCanvas> </ThreeCanvas>
</section> </section>
<motion.h1 className="welcome" animate={AnimateSpin().animate}>
Welcome to my blog
</motion.h1>
<h3 className="tooltip"> <h3 className="tooltip">
Drag to orbit Drag to orbit
</h3> </h3>
@@ -61,7 +61,7 @@ function Rings() {
// To avoid seeing the backside as invisible, use DoubleSide. // To avoid seeing the backside as invisible, use DoubleSide.
// We should also use a RingGeometry rather than a CircleGeometry so it is empty in the center. // We should also use a RingGeometry rather than a CircleGeometry so it is empty in the center.
return <mesh position={[0,0,0]} rotation={[-Math.PI / 2, 0, 0]}> return <mesh rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[1.2, 1.7, 64]} /> <ringGeometry args={[1.2, 1.7, 64]} />
<meshPhysicalMaterial map={map} transparent={true} side={THREE.DoubleSide} iridescence={1}/> <meshPhysicalMaterial map={map} transparent={true} side={THREE.DoubleSide} iridescence={1}/>
</mesh> </mesh>

1
src/index/canvas.sass
View File

@@ -14,7 +14,6 @@
flex-grow: 1 flex-grow: 1
.welcome .welcome
position: absolute
font-family: Neuton, serif font-family: Neuton, serif
.tooltip .tooltip