React Three Fiber (RTF) — это мощная библиотека, сочетающая в себе декларативную природу React с возможностями Three.js для создания потрясающей 3D-графики и интерактивных возможностей в Интернете. В этой статье мы рассмотрим различные методы использования React Three Fiber, сопровождаемые примерами кода, которые помогут вам начать работу с этой захватывающей технологией.

1. Базовая настройка сцены.
   Для начала давайте изучим основы настройки базовой сцены с использованием RTF. Сначала убедитесь, что в вашем проекте установлен RTF. Вот простой фрагмент кода, настраивающий сцену с кубом:

import React from 'react';
import { Canvas } from 'react-three-fiber';
const Scene = () => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxBufferGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
  );
};
export default Scene;

1. Добавление интерактивности.
   RTF позволяет нам легко добавлять интерактивность в наши 3D-сцены. Давайте рассмотрим пример того, как повернуть куб при нажатии на него:

import React, { useRef } from 'react';
import { Canvas, useFrame } from 'react-three-fiber';
const RotatingCube = () => {
  const meshRef = useRef();
  useFrame(() => {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });
  return (
    <mesh onClick={() => console.log('Cube clicked')} ref={meshRef}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="blue" />
    </mesh>
  );
};
const Scene = () => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <RotatingCube />
    </Canvas>
  );
};
export default Scene;

1. Загрузка 3D-моделей.
   RTF обеспечивает простой способ загрузки 3D-моделей в ваши сцены. Вот пример загрузки и рендеринга модели glTF:

import React from 'react';
import { Canvas, useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const Model = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/model.gltf');
  return <primitive object={gltf.scene} />;
};
const Scene = () => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Model />
    </Canvas>
  );
};
export default Scene;

1. Системы частиц.
   Создание систем частиц — еще одна интересная особенность RTF. Давайте посмотрим пример того, как создать простую систему частиц со случайным расположением и цветом:

import React, { useMemo } from 'react';
import { Canvas } from 'react-three-fiber';
import { BufferGeometry, BufferAttribute } from 'three';
const ParticleSystem = () => {
  const count = 1000;
  const positions = useMemo(() => {
    const positions = [];
    for (let i = 0; i < count; i++) {
      positions.push(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5);
    }
    return new Float32Array(positions);
  }, [count]);
  const colors = useMemo(() => {
    const colors = [];
    for (let i = 0; i < count; i++) {
      colors.push(Math.random(), Math.random(), Math.random());
    }
    return new Float32Array(colors);
  }, [count]);
  const geometry = useMemo(() => {
    const geometry = new BufferGeometry();
    geometry.setAttribute('position', new BufferAttribute(positions, 3));
    geometry.setAttribute('color', new BufferAttribute(colors, 3));
    return geometry;
  }, [positions, colors]);
  return (
    <points geometry={geometry}>
      <pointsMaterial vertexColors={true} size={0.02} />
    </points>
  );
};
const Scene = () => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <ParticleSystem />
    </Canvas>
  );
};
export default Scene;

React Three Fiber открывает мир возможностей для создания захватывающих 3D-приложений в Интернете. В этой статье мы рассмотрели различные методы использования React Three Fiber, включая базовую настройку сцены, добавление интерактивности, загрузку 3D-моделей и создание систем частиц. Используя возможности React и Three.js, разработчики могут с легкостью создавать замечательные 3D-приложения. Начните экспериментировать с React Three Fiber и раскройте свой творческий потенциал в мире 3D-веб-разработки!