Cách kết xuất đối tượng 3D trong ứng dụng React
Sự ra đời của kết xuất 3D đã thay đổi tương tác của người dùng với các công nghệ internet. Để bắt đầu, các ứng dụng web đã trở nên phong phú hơn, cung cấp trải nghiệm tương tác và hấp dẫn thông qua trình duyệt web.
Công nghệ này đã được các lĩnh vực trò chơi và thực tế ảo tăng cường/tăng cường áp dụng một cách háo hức. Nó cung cấp một cách thực tế và nhập vai để tương tác với các yếu tố ảo.
Tìm hiểu cách hiển thị đối tượng 3D trong ứng dụng React.
Mục Lục
Khái niệm cơ bản về Lập trình và Lập trình Mô hình 3D
Trước khi bắt đầu dựng hình 3D, có một số điểm bạn cần lưu ý:
- Các đối tượng 3D chứa các điểm hoặc đỉnh riêng lẻ xác định cấu trúc của chúng theo ba chiều. Nối các điểm này sẽ tạo ra các mặt tạo nên hình dạng của đối tượng trên màn hình.
- Các trình duyệt hiện đại có khả năng tích hợp sẵn để hiển thị 3D bằng các công nghệ như WebGL. Chúng làm như vậy bằng cách sử dụng sức mạnh của bộ xử lý đồ họa trong máy của bạn để hiển thị các mô hình và cảnh 3D một cách nhanh chóng.
- Bất kỳ đối tượng 3D nào mà trình duyệt của bạn hiển thị đều bao gồm ba thành phần chính. Đây là cảnh, máy ảnh và trình kết xuất, và tất cả chúng đều đóng một vai trò quan trọng. Cảnh cung cấp nền tảng cơ bản để thiết lập tất cả các yếu tố 3D của bạn, bao gồm đèn và máy ảnh. Máy ảnh cho phép bạn xem đối tượng 3D từ nhiều góc độ khác nhau. Cuối cùng, trình kết xuất sẽ gắn kết và hiển thị cảnh trên phần tử HTML canvas.
Kết xuất 3D với Three.js và React Three Fiber
Three.js là một thư viện JavaScript mà bạn có thể sử dụng để hiển thị các đối tượng 3D trong trình duyệt web. Sử dụng các thành phần tích hợp sẵn của nó, bạn có thể dễ dàng tạo và hiển thị các đối tượng 3D trong trình duyệt của mình cùng với các tính năng khác của ứng dụng React.
Gói ba sợi phản ứng hoạt động trên Three.js. Nó đơn giản hóa quá trình sử dụng các thành phần Three.js để tạo và hiển thị các đối tượng 3D trong trình duyệt. Thật thú vị, nó cũng cung cấp các hook React tùy chỉnh có ích khi tạo các đối tượng 3D trong React.
Kết xuất đối tượng 3D trong ứng dụng React
Thực hiện theo các bước bên dưới để hiển thị hình dạng 3D đơn giản trên trình duyệt của bạn cũng như mô hình 3D do Blender tạo. Nếu bạn chưa quen với Blender, hãy học cách làm quen với người mới bắt đầu.
Tạo một ứng dụng React, kích hoạt thiết bị đầu cuối của bạn để chạy lệnh bên dưới và cài đặt các phụ thuộc cần thiết:
npm install three @react-three/fiber @react-three/drei
Cài đặt các gói Three.js, Reac-ba-fiber và Reac-ba-drei. Thư viện Reac-ba-drei hoạt động cùng với Reac-ba-fiber để tạo các cảnh và đối tượng 3D.
Kết xuất hình dạng 3D
Bạn có thể hiển thị hình hộp 3D đơn giản trong trình duyệt với rất ít mã. Mở src/app.js xóa tất cả mã React soạn sẵn và thêm vào như sau:
import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";function Box() {
return (
<mesh>
<boxBufferGeometry attach ="geometry" />
<meshLambertMaterial attach="material" color="hotpink" />
</mesh>
)
}
export default function App() {
return (
<div className="App">
<div className="App-header">
<Canvas>
<OrbitControls />
<ambientLight intensity ={0.5} />
<spotLight position={[10, 15,10]} angle={0.3} />
<Box />
</Canvas>
</div>
</div>
);
}
Mã này làm như sau:
- Các Hộp thành phần này sử dụng các thành phần lưới, boxBufferGeometry và meshLambertMaterial từ phản ứng ba sợi để hiển thị hộp 3D. Ba thành phần này hoạt động cùng nhau để tạo ra hình dạng của hộp.
- Thành phần boxBufferGeometry tạo hộp và mã này đặt thuộc tính màu của thành phần meshLambertMaterial thành màu hồng nóng.
- Sau đó, nó kết xuất phần tử Canvas chứa thành phần hộp với ánh sáng xung quanh, đèn chiếu và bộ thuộc tính thành phần Điều khiển quỹ đạo.
- Thuộc tính thành phần ánh sáng xung quanh thêm ánh sáng dịu vào canvas. Thành phần SpotLight thêm ánh sáng tập trung từ một vị trí cụ thể với góc 0,3. Cuối cùng, thành phần OrbitControls cho phép bạn điều khiển camera xung quanh đối tượng 3D.
Nhập và kết xuất thành phần app.js trong tệp index.js và khởi động một máy chủ phát triển để xem kết quả trong trình duyệt của bạn tại http://localhost:3000.
Kết xuất mô hình 3D do Blender tạo
Blender là một công cụ mã nguồn mở được các nhà sáng tạo trong các lĩnh vực khác nhau sử dụng để tạo mô hình 3D, hiệu ứng hình ảnh và ứng dụng 3D tương tác. Bạn có thể sử dụng Blender để tạo mô hình 3D cho ứng dụng web của mình.
Đối với hướng dẫn này, bạn sẽ kết xuất mô hình 3D BMW bằng hiệu suất SRT có sẵn trên Sketchfab.
Ghi công Creative Commons
Để bắt đầu, hãy tải xuống mô hình từ Sketchfab trong GLTF (Định dạng truyền GL). Định dạng này giúp dễ dàng kết xuất mô hình 3D trên trình duyệt. Khi quá trình tải xuống hoàn tất, hãy mở thư mục của mô hình và di chuyển tệp của mô hình vào thư mục chung bên trong ứng dụng React của bạn.
Bây giờ, hãy chuyển đến tệp app.js của bạn và điền mã bên dưới vào tệp đó.
- Nhập các thành phần sau:
import {useGLTF, Stage, PresentationControls} from "@react-three/drei"; - Tạo thành phần mô hình và thêm mã bên dưới:
function Model(props){
const {scene} = useGLTF("/bmw.glb");
return <primitive object={scene} {...props} />
}export default function App() {
return (
<div className="App">
<div className="App-header">
<Canvas
dpr={[1,2]}
shadows camera={{fav: 45}}
style={{"position": "absolute"}}
>
<PresentationControls
speed={1.5}
global zoom={0.5}
polar={[-0.1, Math.PI / 4]}
>
<Stage environment={null}>
<Model scale={0.01} />
</Stage>
</PresentationControls>
</Canvas>
</div>
</div>
);
} - Móc useGLTF từ thư viện React-three-drei xác định một biến cảnh và gán cho nó giá trị của tệp mô hình nằm ở đường dẫn “/bmw.glb”. Sau đó, thành phần này trả về một đối tượng nguyên thủy đặt cảnh cho mô hình 3D.
- Phần tử Canvas hiển thị các thành phần chính tạo nên mô hình, với các thuộc tính được chỉ định, chẳng hạn như tỷ lệ pixel của thiết bị (DPR), bóng đổ, góc camera và kiểu.
- Sau đó, bạn chỉ định các thuộc tính của thành phần PresentationControls chẳng hạn như tốc độ và thu phóng toàn cầu. Các thuộc tính này xác định cách bạn sẽ điều khiển mô hình trên màn hình.
- Cuối cùng, định cấu hình thành phần Giai đoạn gắn mô hình trên màn hình trình duyệt.
Quay máy chủ phát triển để cập nhật các thay đổi trên ứng dụng của bạn. Bạn sẽ thấy mô hình được hiển thị trên trình duyệt của mình.
Kết xuất mô hình 3D trong ứng dụng web của bạn
Kết xuất mô hình 3D trong các ứng dụng web của bạn có thể mang lại một số lợi ích, chẳng hạn như cải thiện trải nghiệm người dùng bằng cách mang lại cảm giác 3D chân thực và tương tác hơn. Do đó, người dùng có thể tương tác tốt hơn với sản phẩm.
Tuy nhiên, kết xuất các phần tử 3D có thể có nhược điểm của nó, chẳng hạn như ảnh hưởng tiêu cực đến hiệu suất của ứng dụng. Các mô hình 3D yêu cầu nhiều tài nguyên hơn để hiển thị, điều này có thể khiến ứng dụng của bạn tải chậm hơn.