Kết hợp sức mạnh của Three.js và react để tạo ra trải nghiệm 3D tuyệt vời trên web

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

Vậy Three.js là gì?

Three.js là một thư viện JavaScript giúp việc kết xuất đồ họa 3D bằng WebGL trở nên dễ dàng hơn. WebGL cực kỳ mạnh mẽ, nhưng việc sử dụng trực tiếp lại rất phức tạp. Three.js đơn giản hóa quy trình đó, cung cấp các công cụ để xây dựng các đối tượng 3D, đèn, máy ảnh và hoạt ảnh với ít nỗ lực hơn.

Tại sao nên sử dụng Three.js với React?

React giúp 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. Nếu kết hợp với Three.js, bạn có thể xây dựng các cảnh 3D của mình theo cách tương tự — từng thành phần một. Điều này giúp cho code của bạn trở nên mô-đun hơn và dễ bảo trì hơn.

May mắn thay, có một thư viện có tên là react-three-fiber, cung cấp cầu nối giữa Three.js và React, cho phép kết xuất trực tiếp các phần tử Three.js trong các thành phần React.

Thiết lập dự án React 3D của bạn dễ dàng

Để bắt đầu với Three.js và React, chúng ta hãy cài đặt các dependency cần thiết. Chúng ta sẽ sử dụng:

• 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 các 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 của bạn và tạo một ứng dụng React mới. Sau đó, cài đặt các thư viện cần thiết:

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ẽ xây dựng một khối lập phương xoay đơn giản sẽ phản ứng với các tương tác của người dùng như nhấp chuột và di chuột. Hãy bắt đầu bằng cách tạo một file có tên Scene.js bên trong thư mục src của bạn và dán code sau:

// 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); // Rotate the cube on every frame update 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;

Đoạn mã trên hoạt động thế nào?

• Canvas: Thành phần Canvas hoạt động giống như một container cho cảnh 3D của bạn, giống như một phần tử <canvas> trong HTML.
• mesh: Một đối tượng 3D chứa hình học (hình dạng) và vật liệu (diện mạo). Ở đây, nó được sử dụng để tạo một 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: Một vật liệu hỗ trợ ánh sáng cơ bản.
• useRef: Một hook để tham chiếu đến mesh để chúng ta có thể xoay nó bằng JavaScript.
• useFrame: Một hook từ @react-three/fiber chạy trên mỗi khung hình động, cho phép chúng ta xoay khối lập phương liên tục.
• Tương tác: Khối lập phương thay đổi tỷ lệ và màu sắc khi nhấp hoặc di chuột, thêm một hình thức tương tác người dùng đơn giản.

Bước 3: Sử dụng thành phần cảnh trong ứng dụng của bạn

Bây giờ, chúng ta hãy kết xuất cảnh 3D của mình bên trong tệp App.js chính.

// 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;

Làm cho cảnh 3D của bạn trở nên tương tác tốt hơn

Chúng ta đã xây dựng một khối lập phương xoay đơn giản, nhưng hãy cùng khám phá cách chúng ta có thể cải thiện nó. Dưới đây là một số cách để làm cho cảnh của bạn trở nên tương tác hơn:

1. Thêm đổ bóng

Bóng đổ tạo thêm sự chân thực cho các cảnh 3D của bạn. Bạn có thể bật bóng bằng cách thêm các dòng này:

<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. Dưới đây là một ví dụ nhanh:

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 hữu ích về hiệu suất cho các cảnh 3D lớn

• Tối ưu hóa các mô hình 3D của bạn bằng cách giảm số lượng đa giác.
• Sử dụng ít đèn hơn vì việc tính toán ánh sáng có thể tốn kém.
• Bật tính năng loại bỏ Frustum để tránh kết xuất các đối tượng ngoài màn hình.
• Tải chậm các thành phần nặng bằng thành phần Suspense của React.

Kết luận

Bạn vừa hoàn thành việc tự tạo một khối lập phương 3D cơ bản bằng cách sử dụng Three.js trong React! Với thiết lập này, bạn có thể bắt đầu thử nghiệm với các cảnh, hoạt ảnh và mô hình phức tạp hơn. Cảm ơn các bạn đã theo dõi.