Sử dụng Three.js và React để Tạo Trải Nghiệm 3D Đặc Sắc Trên Web

Ngày nay, việc tạo ra những trải nghiệm web hấp dẫn và tương tác trở nên thiết yếu hơn bao giờ hết. Đồ họa 3D đóng vai trò quan trọng trong việc thu hút người dùng. Dù bạn đang xây dựng bản giới thiệu sản phẩm tương tác, thành phần UI sống động hay thậm chí là trò chơi, cách kết hợp Three.js với React sẽ giúp bạn tích hợp các yếu tố 3D mượt mà vào trang web một cách dễ dàng.

Giới thiệu về Three.js

Three.js là một thư viện JavaScript mạnh mẽ giúp việc kết xuất đồ họa 3D bằng WebGL trở nên dễ dàng hơn. Trong khi WebGL mạnh mẽ, việc sử dụng trực tiếp lại khá phức tạp. Three.js đơn giản hóa quy trình này, cung cấp những công cụ cần thiết để tạo ra các đối tượng 3D, đèn, máy ảnh và hoạt ảnh một cách nhanh chóng và tiện lợi.

Lợi ích của việc sử dụng Three.js cùng React

React giúp lập trình viên dễ dàng chia nhỏ giao diện người dùng thành các thành phần có thể tái sử dụng. Khi kết hợp với Three.js, bạn có thể xây dựng các cảnh 3D theo cách mà bạn đã quen thuộc — từng thành phần một. Điều này giúp mã nguồn của bạn trở nên modul và dễ bảo trì hơn.

Thư viện Hỗ Trợ: react-three-fiber

May mắn thay, có một thư viện gọi là react-three-fiber, cung cấp cầu nối giữa Three.js và React. Thư viện này cho phép bạn kết xuất trực tiếp các phần tử Three.js trong các thành phần React, giúp quy trình phát triển trở nên liền mạch hơn.

Hướng Dẫn Thiết Lập Dự Án React 3D

Để bắt đầu với Three.js và React, bạn cần cài đặt một số dependencies cần thiết. Dưới đây là danh sách các thư viện bạn sẽ cần:

• three: Thư viện Three.js cốt lõi.
• @react-three/fiber: Trình kết xuất React cho Three.js.
• @react-three/drei: Thư viện hỗ trợ với nhiều công cụ hữu ích cho các tác vụ Three.js phổ biến.

Bước 1: Cài đặt các Dependency

Mở terminal và tạo một ứng dụng React mới. Sau đó, cài đặt các thư viện cần thiết bằng lệnh sau:

npx create-react-app threejs-react-demo
cd threejs-react-demo
npm install three @react-three/fiber @react-three/drei

Bước 2: Xây dựng Thành Phần Khối Lập Phương 3D

Chúng ta sẽ tạo một khối lập phương xoay đơn giản có thể phản ứng với tương tác của người dùng như nhấp chuột và di chuột. Tạo một file có tên Scene.js trong thư mục src và dán mã nguồn dưới đây:

// Scene.js
import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';

const RotatingCube = () => {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);

  useFrame(() => {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });

  return (
    <mesh
      ref={meshRef}
      scale={clicked ? 1.5 : 1}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  );
};

const Scene = () => {
  return (
    <Canvas style={{ height: '100vh' }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <RotatingCube />
    </Canvas>
  );
};

export default Scene;

Giải thích mã nguồn trên:

• Canvas: Là container cho cảnh 3D của bạn, tương tự như phần tử <canvas> trong HTML.
• mesh: Đối tượng 3D chứa hình học và vật liệu của nó. Ở đây, chúng ta sử dụng để tạo khối lập phương.
• boxGeometry: Hình học tích hợp sẵn để tạo hình dạng khối lập phương.
• meshStandardMaterial: Vật liệu hỗ trợ ánh sáng cơ bản.
• useRef và useFrame: Các hook giúp tham chiếu và xoay khối lập phương liên tục trên mỗi khung hình.

Bước 3: Kết Xuất Thành Phần Cảnh Trong Ứng Dụng

Bây giờ bạn chỉ cần kết xuất cảnh 3D trong file App.js:

// App.js
import React from 'react';
import Scene from './Scene';

function App() {
  return (
    <div style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
      <Scene />
    </div>
  );
}

export default App;

Cải Thiện Tương Tác Cho Cảnh 3D

Chúng ta đã tạo một khối lập phương xoay đơn giản, nhưng hãy xem một số cách để nâng cao trải nghiệm tương tác:

1. Thêm Đổ Bóng

Bóng đổ làm cho các cảnh 3D của bạn trở nên chân thực hơn. Bạn có thể bật bóng đổ bằng cách sử dụng đoạn mã sau:

<Canvas shadows>
  <ambientLight intensity={0.5} />
  <spotLight position={[10, 10, 10]} angle={0.3} castShadow />
  <mesh receiveShadow>
    <planeGeometry args={[10, 10]} />
    <meshStandardMaterial color="gray" />
  </mesh>
</Canvas>

2. Nhập Mô Hình 3D

Bạn có thể nhập các mô hình 3D phức tạp hơn (như tệp GLTF/GLB) bằng cách sử dụng hook useGLTF từ @react-three/drei. Đây là một ví dụ:

import { useGLTF } from '@react-three/drei';

const Model = () => {
  const { scene } = useGLTF('/path-to-your-model/model.gltf');
  return <primitive object={scene} />;
};

Một Số Mẹo Tối Ưu Hóa Hiệu Suất

• Tối ưu hóa mô hình 3D bằng cách giảm đa giác.
• Giảm số lượng đèn để tiết kiệm tài nguyên tính toán ánh sáng.
• Sử dụng loại bỏ Frustum để tránh kết xuất những đối tượng không nằm trong khung nhìn.
• Tải nhanh các thành phần nặng bằng Suspense của React.

Kết Luận

Bạn vừa hoàn thành việc tạo khối lập phương 3D cơ bản với Three.js trong React! Với cài đặt này, bạn có thể bắt đầu thử nghiệm với những cảnh, hoạt ảnh và mô hình phức tạp hơn. Chúc bạn thành công trong việc sáng tạo trải nghiệm 3D độc đáo cho người dùng của mình!
source: viblo