Am lansat un nou tutorial în care învățăm ThreeJS și React!

ThreeJS

import { Materials, Nodes } from "../3d/3d.types"

export const MESH_NAMES = {
  LEFT_BATTERY: "left-battery-mesh",
  RIGHT_BATTERY: "right-battery-mesh"
};

export default function Day1_HierarchyAndAttributes({ nodes, materials }: { nodes: Nodes, materials: Materials }) {
  return (
    <>
      <group position={[-2.5, 1, 0]} rotation={[0, 0, 0]}>
        <mesh name={MESH_NAMES.LEFT_BATTERY} geometry={nodes.Battery.geometry} material={materials.Battery} />
      </group>

      <group position={[-2.5, 1, -.5]} rotation={[-Math.PI / 6, Math.PI / 6.0, 0]}>
        <mesh name={MESH_NAMES.RIGHT_BATTERY} geometry={nodes.Battery.geometry} material={materials.Battery} />
      </group>
    </>
  )
}


day1-hierarchy-attributes.tsx

Ziua 1: Bateriile

const Day2_CustomShapes: JSX.Element[] = [
  
];

export default Day2_CustomShapes;


day2-custom-shapes.tsx

Ziua 2. Generatorul de cadouri.

import { PropsWithChildren, useEffect, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { Group } from "three";
import Curve from "../3d/Curve";
import { Day3_CalculateNewPosition } from "../3d/gifts";

// For each gift we give: offset along the curve last frame, curve position sampler, and gift speed per second
// Calculate new position  
interface Props {
  curve: Curve;
  initialOffset: number;
  giftSpeedPerSecond: number;
  onRespawnCallback: () => void;
  onInit: (group: Group) => void;
}
function Day3_Gift({
  onInit,
  curve,
  children,
  initialOffset,
  giftSpeedPerSecond,
  onRespawnCallback,
}: PropsWithChildren<Props>) {
  let parent = useRef<Group>(null);

  useEffect(() => {
    if (parent.current !== null) {
      onInit(parent.current);
    }
  }, [onInit])

  useFrame(() => {
    if (parent.current === null) {
      return
    };

    // Calculeaza noul offset in functie de timp
    let newOffset = initialOffset + 0;

    let calculatedPosition: THREE.Vector3 = Day3_CalculateNewPosition(curve, newOffset, onRespawnCallback);
    parent.current.position.set(calculatedPosition.x, calculatedPosition.y, calculatedPosition.z);
  })

  return (
    <group ref={parent} position={[0, 0, 0]}>
      {children}
    </group>
  )
}

export { Day3_Gift };


day3-useFrame.tsx

Ziua 3. Să meargă banda!

const Day4_Texturing: JSX.Element[] = [

];

export default Day4_Texturing;


day4-texturing.tsx

Ziua 4. Culoarea cadourilor

import { BoxProps, PublicApi } from "@react-three/cannon";

function PaletteMoveFunction(totalTime: number, speed: number) {
  return Math.sin(totalTime * speed);
}

export const Day5_DefineUseBox: BoxProps = {
  args: [2, 1.2, .5],
  position: [-3, 1.55, 1.5],
  rotation: [0, 0, 0],
  mass: 10,
  material: {
    friction: 0
  }
}

export function Day5_UseFrameHandlePosition(
  physicsAPI: PublicApi,
  initialPosition: Array<number>,
  totalTimePast: number,
  speedPerFrame: number
) {
  physicsAPI.position.set(
    initialPosition[0],
    initialPosition[1],
    initialPosition[2] + PaletteMoveFunction(totalTimePast, speedPerFrame)
  );
}


day5-physics.tsx

Ziua 5. Împinge cadourile în sac!

// Modify these values to correctly set up the Animation
const oddPosition: number[] = [0, 0, 0];
const evenPosition: number[] = [0, 1, 0];

const oddRotation: number[] = [5, 0, 0];
const evenRotation: number[] = [5, 0, 0];

export const Day6_GetSpringAPIParameters: {
  position: {
    odd: number[],
    even: number[],
  },
  rotation: {
    odd: number[],
    even: number[],
  }
} = {
  position: {
    odd: oddPosition,
    even: evenPosition
  },
  rotation: {
    odd: oddRotation,
    even: evenRotation
  }
};


day6-spring.tsx

Ziua 6. The final step!

Christmas Advent

Apasă pe checkbox-uri pentru a vedea cum arată componenta de mai jos fără CSS sau JavaScript.

a completat <0> {{TUTORIAL}} </0> rezolvând cu succes toate cele {{COUNT}} exerciții.

Adaugă culori, spațieri, fonturi, etc. Practic, face pagina frumoasă și ușor de utilizat.

Adaugă funcționalitate: poți crea taskuri, iar apoi să le marchezi drept rezolvate.

Citești lecția

Rezolvi exercițiile

Îți evaluăm soluția

Îți trimitem feedback

Modifici soluția

O evaluăm din nou

Îți acceptăm soluția!

În programare nu contează prea mult diplomele în sine, ci ce știi să faci. De aceea, folosește această certificare ca o dovadă că ai reușit să scrii cod real, gata de producție, validat de developeri cu experiență!

Iar la final primești o certificare!

printr-un curs online, focusat pe <0>practică și feedback</0> de la developeri cu experiență

Este punctul de start în călătoria fiecărui <0>FrontEnd developer</0>.

Cursul acesta e destinat persoanelor cu zero (sau foarte puțină) experiență în FrontEnd, deci vom începe de la lucrurile de bază și apoi continua cu multă practică.

Vrei să înveți FrontEnd? Aici ai parte de tutoriale gratuite și o comunitate de developeri care te vor ajuta să devii mai bun.

FrontEnd.ro - Învață de la comunitatea open-source

Împreună cu <0>Colorful Coding</0> v-am pregătit un tutorial 100% interactiv în care-l ajutați pe <1> Moș Crăciun </1> să repare fabrica de cadouri!

Învață să programezi 3D cu Three.js și React!

Învață FrontEnd de la zero, <0>cu ajutorul comunității open source.</0>

E special făcut pentru începători, și vei învăța să înțelegi și să scrii cod ca cel de jos

Dacă vrei să înveți <0>FrontEnd</0> de la zero <1/> Începe cu <2> Modulul de HTML </2>

Ah, aproape am uitat! Avem și o <0>listă de resurse</0> care să te ajute în cariera ta de FrontEnd developer

Dacă nu te-am convins încă să începi un tutorial, dar ai vrea să te ținem la curent cu noutățile (no spam, promitem) - lasă-ți email-ul aici și hai în comunitate.

Rămâi conectat la noutăți

Iar dacă ești deja <0>programator</0>, <1/> În fiecare saptămână postăm <2>Tips & Tricks</2>

Dacă echipa nu are un designer care să vină cu sugestii, te poți inspira de aici :)

Background-uri & Culori

Pentru când vrei să te relaxezi citind despre ultimele noutăți.

Blog-uri

Merită citite pe larg căci conțin o mulțime de informații care sigur te vor ajuta.

Cărți

Inspirație pentru loaderele din proiectele tale.

CSS Spiners

Noi le avem mereu deschise într-un tab. Tu?

Esențiale

Îți îmbunătățesc întreaga experiență ca și developer.

Extra

Adaugă mai multă personalitate site-ului tău schimbând fonturile.

Fonts

Te ajută să faci interfața mai intuitivă, mai ales pe mobil unde nu avem chiar așa de mult spațiu.

Iconițe

Vin cu o licență deschisă deci let poți folosi în orice proiect.

Imagini și Video-uri

Asigură-te că aplicație rămâne performantă și respectă bunele practici.

Performanță

Sunt multe tutoriale pe net, dar acestea ne-au atras atenția căci fac învățarea mai interactivă.

Tutoriale interactive

Te ajută să faci site-ul mai prietenos și au o licență deschisă pentru a le folosi fără probleme.

Ilustrații vectoriale

Sunt atât de multe resurse gratuite încât e greu să știi care sunt cele mai bune. <0></0> <1></1> Așa că am pornit de la site-urile ce ne ajută zilnic în joburile nostre de FrontEnd developeri, le-am păstrat doar pe cele mai utile și am creat cu ele lista de mai jos.

Am pornit de la site-urile ce ne ajută zilnic în joburile nostre de FrontEnd developeri, le-am păstrat doar pe cele mai utile și am creat cu ele lista de aici.

📚 Resurse pentru fiecare FrontEnd developer

Tips & tricks vizuale despre FrontEnd development.