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

introduce sun

Browse Source
This commit is contained in:
tymur999
2026-04-12 21:28:54 -05:00
parent 3187ff439b
commit 8c47404d02
3 changed files with 65 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
package-lock.json generated
View File

@@ -17,6 +17,7 @@
"@fortawesome/react-fontawesome": "^3.2.0",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@react-three/postprocessing": "^3.0.4",
"motion": "^12.34.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
@@ -3494,6 +3495,32 @@
}
}
},
"node_modules/@react-three/postprocessing": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-3.0.4.tgz",
"integrity": "sha512-e4+F5xtudDYvhxx3y0NtWXpZbwvQ0x1zdOXWTbXMK6fFLVDd4qucN90YaaStanZGS4Bd5siQm0lGL/5ogf8iDQ==",
"license": "MIT",
"dependencies": {
"maath": "^0.6.0",
"n8ao": "^1.9.4",
"postprocessing": "^6.36.6"
},
"peerDependencies": {
"@react-three/fiber": "^9.0.0",
"react": "^19.0",
"three": ">= 0.156.0"
}
},
"node_modules/@react-three/postprocessing/node_modules/maath": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz",
"integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
"license": "MIT",
"peerDependencies": {
"@types/three": ">=0.144.0",
"three": ">=0.144.0"
}
},
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -9828,6 +9855,16 @@
"multicast-dns": "cli.js"
}
},
"node_modules/n8ao": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.10.1.tgz",
"integrity": "sha512-hhI1pC+BfOZBV1KMwynBrVlIm8wqLxj/abAWhF2nZ0qQKyzTSQa1QtLVS2veRiuoBQXojxobcnp0oe+PUoxf/w==",
"license": "ISC",
"peerDependencies": {
"postprocessing": ">=6.30.0",
"three": ">=0.137"
}
},
"node_modules/nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -10948,6 +10985,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/postprocessing": {
"version": "6.39.0",
"resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.39.0.tgz",
"integrity": "sha512-/G6JY8hs426lcto/pBZlnFSkyEo1fHsh4gy7FPJtq1SaSUOzJgDW6f6f1K/+aMOYzK/eQEefyOb3++jPPIUeDA==",
"license": "Zlib",
"peerDependencies": {
"three": ">= 0.168.0 < 0.184.0"
}
},
"node_modules/potpack": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"@fortawesome/react-fontawesome": "^3.2.0",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@react-three/postprocessing": "^3.0.4",
"motion": "^12.34.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",

35
src/index/Canvas.tsx
View File

@@ -2,7 +2,7 @@ import "./canvas.sass";
import {motion} from "framer-motion";
import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
import {Moon} from "./Moon";
import {BakeShadows, Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
import {Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
import Jupiter from "../img/2k_jupiter.webp";
import Makemake from "../img/2k_makemake_fictional.webp";
import Ceres from "../img/2k_ceres_fictional.webp";
@@ -11,7 +11,7 @@ import MilkyWay from "../img/2k_stars_milky_way.jpg";
import SaturnRings from "../img/12k_jupiter_rings.webp";
import {useRef} from "react";
import type {Mesh} from "three";
import * as THREE from "three";
import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing";
useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]);
@@ -21,19 +21,20 @@ export default function Canvas() {
<motion.main className="canvas">
<section className="canvas-ctr">
<ThreeCanvas camera={{position: [0,0,10]}} shadows dpr={[1, 2]}>
<EffectComposer>
<Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
<Vignette eskil={false} offset={0.1} darkness={1.1} />
</EffectComposer>
<OrbitControls enablePan={false} enableZoom={false} />
<BakeShadows/>
<Environment background files={MilkyWay}/>
<Sun/>
<Moons/>
<Planet/>
<Rings/>
<Html center transform position={[0,0,2]}>
<h1 className="welcome">
Welcome to my blog
</h1>
</Html>
<ambientLight args={[1,1]} />
<directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
<Preload all />
</ThreeCanvas>
</section>
@@ -44,6 +45,16 @@ export default function Canvas() {
)
}
function Sun() {
return (
<mesh position={[-100, 0, -100]}>
<sphereGeometry args={[5, 32, 32]} />
<meshBasicMaterial color={[10, 7, 3]} />
<directionalLight intensity={2} position={[0, 0, 0]} />
</mesh>
)
}
function Moons() {
const makemake = useTexture(Makemake);
const haumea = useTexture(Haumea);
@@ -56,16 +67,6 @@ function Moons() {
</>
}
function Rings() {
const map = useTexture(SaturnRings);
// 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.
return <mesh rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[1.2, 1.7, 64]} />
<meshPhysicalMaterial map={map} transparent={true} side={THREE.DoubleSide} iridescence={1}/>
</mesh>
}
function Planet() {
const colorMap = useTexture(Jupiter);
@@ -78,7 +79,7 @@ function Planet() {
planetRef.current.rotation.y += 0.005;
});
return <mesh ref={planetRef} position={[0,0,0]}>
return <mesh castShadow ref={planetRef} position={[0,0,0]}>
<sphereGeometry args={[1, 32, 32]} />
<meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
</mesh>