Skip to content

Commit 91a9a55

Browse files
davidevignozzidavidevignozzi
committed
🚚 R3f fun & simple portfolio
1 parent 547cb2c commit 91a9a55

File tree

8 files changed

+86
-127
lines changed

8 files changed

+86
-127
lines changed

‎package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
"dependencies": {
1515
"@react-three/drei": "^9.88.7",
1616
"@react-three/fiber": "^8.15.8",
17-
"@react-three/postprocessing": "2.15",
18-
"leva": "^0.9.35",
19-
"postprocessing": "6.33",
2017
"r3f-perf": "^7.1.2",
2118
"react": "18.2",
2219
"react-dom": "18.2",

‎public/bangers-v20-latin-regular.woff‎

24.5 KB
Binary file not shown.

‎src/Drunk.jsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/DrunkEffect.jsx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/Experience.jsx‎

Lines changed: 68 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,76 @@
1-
import { OrbitControls } from '@react-three/drei'
2-
import { Perf } from 'r3f-perf'
3-
import { DepthOfField, Bloom, Noise, Glitch, ToneMapping, Vignette, EffectComposer } from '@react-three/postprocessing'
4-
import { GlitchMode, BlendFunction } from 'postprocessing'
5-
import Drunk from './Drunk.jsx'
6-
import { useRef } from 'react'
7-
import { useControls } from 'leva'
1+
import {
2+
Text,
3+
Html,
4+
ContactShadows,
5+
PresentationControls,
6+
Float,
7+
Environment,
8+
useGLTF
9+
} from '@react-three/drei';
810

9-
export default function Experience()
10-
{
11-
const drunkRef = useRef()
11+
export default function Experience() {
12+
const computer = useGLTF(
13+
'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/macbook/model.gltf'
14+
);
1215

13-
const drunkProps = useControls('Drunk Effect', {
14-
frequency: { value: 2, min: 1, max: 20 },
15-
amplitude: { value: 0.1, min: 0, max: 1 }
16-
})
16+
return (
17+
<>
18+
<color args={['#241a1a']} attach="background" />
1719

18-
return <>
19-
<color args={ [ '#ffffff' ] } attach="background" />
20+
<Environment preset="city" />
2021

21-
<EffectComposer disableNormalPass>
22-
{/* <Vignette
23-
offset={ 0.3 }
24-
darkness={ 0.9 }
25-
blendFunction={ BlendFunction.NORMAL }
26-
/>
27-
<Glitch
28-
delay={ [ 0.5, 1 ] }
29-
duration={ [ 0.1, 0.3 ] }
30-
strength={ [ 0.2, 0.4 ] }
31-
mode={ GlitchMode.CONSTANT_MILD }
32-
/>
33-
<Noise
34-
premultiply
35-
blendFunction={ BlendFunction.SOFT_LIGHT }
36-
/>
37-
<Bloom
38-
mipmapBlur
39-
intensity={ 0.5 }
40-
luminanceThreshold={ 0 }
41-
/>
42-
<DepthOfField
43-
focusDistance={ 0.025 }
44-
focalLength={ 0.025 }
45-
bokehScale={ 6 }
46-
/> */}
47-
<Drunk
48-
ref={ drunkRef }
49-
{ ...drunkProps }
50-
blendFunction={ BlendFunction.DARKEN }
51-
/>
52-
<ToneMapping />
53-
</EffectComposer>
22+
<PresentationControls
23+
global
24+
rotation={[0.13, 0.1, 0]}
25+
polar={[-0.4, 0.2]}
26+
azimuth={[-1, 0.75]}
27+
config={{ mass: 2, tension: 400 }}
28+
snap={{ mass: 4, tension: 400 }}
29+
>
30+
<Float rotationIntensity={0.4}>
31+
<rectAreaLight
32+
width={2.5}
33+
height={1.65}
34+
intensity={65}
35+
color={'#ff6900'}
36+
rotation={[-0.1, Math.PI, 0]}
37+
position={[0, 0.55, -1.15]}
38+
/>
5439

55-
<Perf position="top-left" />
40+
<primitive
41+
object={computer.scene}
42+
position-y={-1.2}
43+
// rotation-x={ 0.13 }
44+
>
45+
<Html
46+
transform
47+
wrapperClass="htmlScreen"
48+
distanceFactor={1.17}
49+
position={[0, 1.56, -1.4]}
50+
rotation-x={-0.256}
51+
>
52+
<iframe src="https://bruno-simon.com/html/" />
53+
</Html>
54+
</primitive>
5655

57-
<OrbitControls makeDefault />
58-
59-
<directionalLight castShadow position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
60-
<ambientLight intensity={ 1.5 } />
61-
62-
<mesh castShadow position-x={ - 2 }>
63-
<sphereGeometry />
64-
<meshStandardMaterial color="orange" />
65-
</mesh>
66-
67-
<mesh castShadow position-x={ 2 } scale={ 1.5 }>
68-
<boxGeometry />
69-
<meshStandardMaterial color="mediumpurple" />
70-
</mesh>
71-
72-
<mesh receiveShadow position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
73-
<planeGeometry />
74-
<meshStandardMaterial color="greenyellow" />
75-
</mesh>
56+
<Text
57+
font="./bangers-v20-latin-regular.woff"
58+
fontSize={1}
59+
position={[2, 0.75, 0.75]}
60+
rotation-y={-1.25}
61+
maxWidth={2}
62+
>
63+
Davide Vignozzi
64+
</Text>
65+
</Float>
66+
</PresentationControls>
7667

68+
<ContactShadows
69+
position-y={-1.4}
70+
opacity={0.4}
71+
scale={5}
72+
blur={2.4}
73+
/>
7774
</>
78-
}
75+
);
76+
}

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>51 - Post-processing with R3F</title>
7+
<title>52 - Fun and simple portfolio with R3F</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/index.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ const root = ReactDOM.createRoot(document.querySelector('#root'))
77

88
root.render(
99
<Canvas
10+
className="r3f"
1011
camera={ {
1112
fov: 45,
1213
near: 0.1,
13-
far: 200,
14-
position: [ 4, 2, 6 ]
14+
far: 2000,
15+
position: [ -3, 1.5, 4 ]
1516
} }
1617
>
1718
<Experience />

‎src/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,17 @@ body,
99
height: 100%;
1010
background: ivory;
1111
}
12+
13+
.r3f
14+
{
15+
touch-action: none;
16+
}
17+
18+
.htmlScreen iframe
19+
{
20+
width: 1024px;
21+
height: 670px;
22+
border: none;
23+
border-radius: 20px;
24+
background: #000000;
25+
}

0 commit comments

Comments
 (0)