Pada tutorial kali ini, kita akan membuat situs web portfolio 3D sederhana menggunakan react-three-fiber.
Jadi sebagai developer pemula kita sering berpikir untuk membuat situs portofolio untuk diri kita sendiri dan ingin membuatnya semenarik mungkin, tetapi kita tidak tahu apa yang harus dilakukan untuk membuatnya lebih baik.
Jangan khawatir, saya akan membantu Anda. Hari ini saya akan mengajarkan Anda cara membuat portfolio dan menggunakan elemen 3d di situs web React, jadi mari kita mulai.
Pertama, buatlah sebuah proyek react sederhana dengan menggunakan perintah:
npx create-react-app myportfolio
Sekarang hapus semua file yang tidak perlu yang selalu Anda hapus dan buat tiga folder: CSS, komponen, dan aset di dalam folder src.
Sekarang di dalam folder komponen, buat 4 file: 3dBox.jsx, navbar.jsx, Hero.jsx dan tourus3d.jsx
Di folder CSS buat 3 file: navbar.scss, hero.scss dan animation.css
Jangan takut dengan namanya, karena ini adalah CSS dasar dalam scss. Jangan lupa untuk menginstal beberapa paket tambahan:
npm i react-three/fiber three react-three/drei sass
Pada file App.css tulis code berikut.
* {
box-sizing: border-box;
}
html,body,#root{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}Sekarang mari kita buat navbar kita terlebih dahulu. Jadi saya rasa saya tidak perlu mengajarkan kode navbar karena sudah sangat jelas.
Cukup salin-tempel ini, saya akan mengajarkan sesuatu, jadi tidak ada masalah dengan itu.
Sekarang pada file navbar.jsx akan terlihat seperti ini:
import '../CSS/animation.css'
import '../CSS/navbar.scss'
import React from 'react'
const Navbar=()=>{
return(
<div class="navbar">
<h1>LOGO<div id="nav-icon1" onClick={()=>{
let element=document.getElementById("nav-icon1")
let navs=document.getElementById("navs")
let hero=document.getElementById("hero")
if(element.className==="nav-icon1"){
element.className='nav-icon1 open'
navs.className="navigation-open"
hero.style.opacity=0
}
else{
element.className='nav-icon1'
navs.className='navigation-close'
hero.style.opacity=1
}
}}>
<span></span>
<span></span>
<span></span>
</div> </h1>
<ul id="navs" className="navigation-close">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
)
}
export default NavbarBerikut adalah kode navbar Anda. Kita cukup membuat navbar dan di tag h1 kita menambahkan toggle untuk tampilan mobile, animation.css digunakan untuk menambahkan animasi toggle, dan navbar.scss digunakan untuk menambahkan style pada navbar.
Jadi di navbar.scss:
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
body{
overflow-x: hidden;
}
.navbar{
display:grid;
grid-template-columns:1fr 3fr;
align-items:center;
overflow:hidden;
position: fixed;
// background-color:#001f3f;
// background-image:
// linear-gradient(
// #001f3f, #1b1649
// );
width:100%;
padding-left:1em;padding-right:1em;
margin-left:-0.02em;margin-top:-0.5em;
color:black;
font-family: 'Ubuntu';
}
.navbar>h1{
margin-top:0.8em;
}
.navbar ul{
list-style:none;
display:grid;
grid-template-columns:repeat(6,1fr);
justify-self:end;
margin-top:1em;
transition: 1s;
}
ul li a{
margin-left:2em;
height: auto;
align-items: center;
text-align: center ;
vertical-align: center;
padding: 1.5em;
padding-top:2.5em;
transition: 1s;
text-decoration: none;
color: black;
}
li a:hover{
background-color: brown;
}
@media (max-width:700px) {
.navbar h1{
display: flex;
}
h1 #nav-icon1{
margin-top: -3px;
margin-left:7rem;
width: 60px;
height: 50px;
}
h1{
z-index: 1;
}
.navbar{
grid-template-columns: 1fr;
width: 100%;
}
.navbar >ul{
grid-template-columns:1fr ;
margin-left: -2rem;
background-color: white;
width: 400px;
padding: 1em;
height: 100vh;
margin-top: 0;
position: fixed;
align-items: center;
}
ul>li:nth-child(1){
margin-top:5rem;
}
ul>li{
align-self: center;
border-bottom: 1px solid gray;
width: 103%;
padding-bottom: 1.5em;
padding-left: 4.5rem;
}
ul >li a:hover{
background-color: blue;
}
.navigation-close{
left: -100%;
}
.navigation-open{
left: 0%;
}
}Kita menggunakan CSS grid di sini karena saya menyukainya, mudah dimengerti dan digunakan, Anda tidak perlu menyiksa otak Anda jika menggunakan itu. Kita hanya menambahkan beberapa CSS, silakan baca karena kodenya cukup jelas.
Sekarang di animation.css:
#nav-icon1{
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span{
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #131313;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#nav-icon1{
display: none;
}
@media (max-width:700px) {
#nav-icon1{
display: block;
}
}Sekarang, ini hanya untuk menambahkan animasi pada menu hamburger Anda, ini akan mengubahnya menjadi menyilang ketika Anda membukanya.
Sekarang mari kita bahas bagian hero. Ini adalah bagian tepat di bawah navbar di mana kita akan menampilkan judul, nama, dan beberapa garis keren.
Saya ingin memperkenalkan Anda pada sebuah library yang keren, yang akan menambahkan efek pengetikan dengan cara yang paling halus, ini adalah cara yang sangat bagus untuk menambahkan animasi yang keren. Tunggu, saya tahu saya bisa melakukannya dengan CSS tetapi para pengembang selalu menemukan cara mudah untuk melakukan pekerjaan sehingga saya melakukan hal yang sama. lupakan saja dan instal library tersebut:
npm i react-typing-effect
Sekarang pada file hero.jsx tambahkan code berikut.
import '../CSS/hero.scss'
import ReactTypingEffect from 'react-typing-effect';
import Box from './3dBox';
import {Canvas} from "@react-three/fiber"
export default function Hero(){
return(
<div class="hero-main" id="hero">
<div className="heading-section">
<div className="intro">
<ReactTypingEffect
text={["Hello.", "I am ath tripathi.","I am a programmer.","I am a writer.","I am a developer."]}
speed={100}
typingDelay={1000}
eraseDelay={1000}
eraseSpeed={100}
cursorRenderer={cursor => <h1 className="cursor">{cursor}</h1>}
displayTextRenderer={(text, i) => {
return (<p className="name">{text}</p>)}}
/>
</div>
<h4 className="about">
A programmer/Writer/Student/Learner
</h4>
<div className="buttonWrap">
<button><i class="fab fa-github"></i>VISIT MY GITHUB</button>
<button>VISIT MY INSTAGRAM</button>
</div>
</div>
<Canvas className="box-object">
<Box/>
</Canvas>
</div>
)
} Jangan khawatir, kita akan membuat sebuah kotak nanti, bersabarlah. Pertama kita buat div untuk bagian hero, kemudian kita buat heading yang akan berisi objek animasi mesin tik dan subheading.
Objek mesin ketik mengambil argumen teks yang merupakan sebuah array yang berisi semua teks yang dibutuhkan sehingga ketika diketik dan dihapus, ia akan berjalan seperti pertama-tama akan menulis kalimat pertama kemudian backspace lalu menulis kalimat kedua dan seterusnya.
Kursor mengambil argumen tentang bagaimana kursor akan terlihat, pada dasarnya, ini mendefinisikan gaya dan ukuran kursor.
Renderer teks tampilan hanya mendefinisikan gaya teks seperti apa yang harus dirender.
Di bawah semua itu ada subheading dan di bawahnya ada dua tombol, nah saya rasa saya sudah cukup menjelaskannya, walaupun kalian sudah pintar jadi sudah bisa mengerti dengan membaca kode.
Ada satu hal lagi, kalian harus selalu merender objek 3d di dalam tag
Sekarang pada hero.scss tulis code dibawah:
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&family=Secular+One&display=swap');
.hero-main{
display: grid;
grid-template-columns: 60% 40%;
height: 90vh;
margin-top:3em;
}
.heading-section{
display: flex;
justify-content: center ;
align-items: center;
flex-direction: column;
}
body{
background-color: white;
}
.name{
font-size: 3em;
font-weight: bold;
margin-left: -1em;
margin-bottom: -0.9em;
margin-top:-2em;
font-family: 'Secular One', sans-serif;
}
.about{
margin-left: -4em;
font-weight: 600;
font-family: 'Hahmlet', serif;
color: rgb(95, 94, 94);
text-decoration: underline;
}
button{
margin:1em;
padding: 1em;
border-radius: 1em;
border:0.5px solid gray;
font-family: 'Ubuntu';
font-weight: 600;
background-color: white;
transition: 1s;
}
button:nth-child(2){
background-color: black;
color: white;
}
button:hover{
background-color: gray;
color: white;
}
.buttonWrap{
margin-left:-5em;
}
.cursor{
font-size: 3rem;
}
@media (max-width:700px) {
.hero-main{
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin-top: 5rem;
}
.cursor{
font-size: 2rem;
z-index: -3;
}
.box-object{
z-index: -1;
}
.name{
font-size: 1.5rem;
margin-left: 0.25em;
margin-bottom: -4em;
}
.about{
font-size: 0.75rem;
margin-left: 0.25em;
margin-top: -1em;
}
.buttonWrap{
margin-left: 2px;
}
.hero-main{
opacity: 1;
}
}Kami menggunakan grid lagi di sini, saya sangat menyukai sistem grid. Di sana kami telah melakukan penataan dasar, Anda akan memahami setiap barisnya.
Kami menambahkan desain responsif dan hal-hal seperti itu. Sekarang saatnya untuk objek 3d kita!!
Jadi di 3dBox.jsx:
import React, { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
import Cyber from '../assets/cyber.jpg'
export default function Box(props) {
const mesh = useRef()
useFrame(() => (mesh.current.rotation.x=mesh.current.rotation.y += 0.01))
const loader=new THREE.TextureLoader()
const base=loader.load(Cyber)
return (
<mesh
{...props}
ref={mesh}
>
<boxGeometry args={[3, 3, 3]} />
<meshBasicMaterial attach="material" map={base} />
</mesh>
)
}Ini adalah potongan kode terkecil yang saya kira, jadi apa yang telah kita lakukan? Tidak ada yang terlalu rumit, mari saya jelaskan.
Sebagai gantinya, kita mengembalikan elemen , yang dapat Anda pahami sebagai pembungkus objek 3d yang akan digunakan untuk melampirkan geometri dan material. Elemen ini digunakan untuk memposisikan objek 3d, menambahkan animasi pada objek tersebut dan memutarnya, hal-hal seperti itu ditangani oleh mesh.
Jadi apa itu geometri dan material?
Geometri menentukan bentuk 3d yang akan kita buat dan ukuran serta strukturnya. Material menentukan gaya, warna, dan hal-hal desain lainnya seperti itu.
Kita membuat referensi yang kita lewati di , fungsi use framer akan menggunakan referensi tersebut untuk objek Anda dan akan menambahkan animasi ke objek tersebut, seperti di sini kita memutar sumbu x dan y-nya tapi kita tidak memindahkannya, kita hanya mengubah posisinya saja, tidak mengubah lokasinya. Yah, keduanya sama dalam beberapa hal tetapi tidak apa-apa.
Sekarang tekstur, pemuat tekstur adalah fungsionalitas yang sangat bagus, ia akan memuat gambar apa pun dan menerapkannya pada semua permukaan kubus atau kotak. seperti gambar Anda akan terlihat seperti seseorang yang menempelkannya pada kubus dengan permen karet.
Kita dapat menggunakan banyak gambar juga.
Sekarang semuanya sudah selesai, satu-satunya file yang perlu kita ubah adalah tourus3d.jsx dan App.js.
Di dalam tourus3d.jsx:
import React, { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
export default function Tourus(props){
const ref=useRef(null)
useFrame(() => (ref.current.rotation.x=ref.current.rotation.y += 0.01))
return(
<mesh visible position={[0, 0, 0]} castShadow ref={ref}>
<directionalLight position={[0,5,0]}/>
<ambientLight/>
<torusGeometry args={[10, 3, 16, 100 ]}/>
<meshStandardMaterial attach="material" color={props.colors} />
</mesh>
)
}Di sini kita hanya melakukan apa yang telah kita lakukan sebelumnya, hanya mengubah geometri menjadi geometri torus sekarang dan kita menambahkan dua lampu, Untuk memahami cahaya bayangkan Anda berada di dalam komputer dan itu adalah dunia 3d. Anda berdiri di depan sebuah cincin raksasa, tetapi bisakah Anda melihat warna cincin itu tanpa cahaya?
Saya kira di dunia nyata juga demikian, jadi akan bertindak sebagai matahari untuk dunia situs web kita.
Sekarang kita tahu bahwa matahari berada di atas segalanya, jadi matahari hanya akan membuat sesuatu yang terlihat di permukaan, bayangkan Anda berada di dalam sebuah cincin raksasa, yang gelap karena cahaya matahari hanya mengenai bagian luar cincin, bukan bagian dalam, jadi?
Anda membutuhkan cahaya senter untuk itu, akan bertindak sebagai senter di situs web Anda.
Sekarang di App.js:
import './App.scss'
import Navbar from './components/navbar';
import Hero from './components/Hero';
import { Canvas } from '@react-three/fiber';
import Tourus from './components/tourus3d';
export default function App(){
return (
<>
<Canvas style={{position:'fixed'}}>
<Tourus colors={"white"}/>
</Canvas>
<div style={{position:"fixed ",width:"100%"}}>
<Navbar/>
<Hero/>
</div>
</>
);
};Selamat sekarang kita telah berhasil membuat portfolio 3D dengan menggunakan react-three-fiber. Jika ada pertanyaan silahkan tulis di kolom komentar di bawah ini.