Cách hiển thị mô hình 3D trong ứng dụng React JS

Này đó👋,

Ngày nay, các trình duyệt ngày càng trở nên mạnh mẽ hơn trước đây và bây giờ chúng có thể hiển thị các hình ảnh động phức tạp khác nhau một cách dễ dàng. Bạn có thể đã thấy rất nhiều trang web hiển thị mô hình 3D mà không có bất kỳ vấn đề hiệu suất nào. Trong bài viết này, chúng tôi sẽ sử dụng Three.js để hiển thị một mô hình iPhone trong ứng dụng React.

Trước khi chúng tôi bắt đầu hướng dẫn này, hãy để tôi cho bạn xem một trang web demo hiển thị mô hình này. Đây là liên kết demo: https://apple-iphone14.netlify.app/

Đối với trang web này, tôi đã sử dụng Three.JS cùng với GSAP để thêm các hình ảnh động cuộn mượt mà. Nếu bạn muốn tìm hiểu cách tạo trang đích 3D đáp ứng này, bạn có thể xem hướng dẫn sau👇.

Hãy kết xuất một mô hình 3D tuyệt vời trong ứng dụng React của chúng tôi.

Thiết lập và Cài đặt

Đối với hướng dẫn này, chúng tôi sẽ sử dụng mẫu CRA (tạo-phản ứng-ứng dụng). Mở thư mục dự án của bạn và sử dụng lệnh sau để cài đặt mẫu CRA.

 npx create-react-app 3d-model-in-reactjs

Bạn có thể đặt tên ứng dụng của mình như bạn muốn vì hướng dẫn này tôi đã giữ nó là "3d-mode-in-reactjs".

Ở đây npx là một tiện ích đi kèm khi bạn cài đặt npm, Nó giúp chúng tôi chạy bất kỳ gói npm nào có sẵn trên đăng ký npm mà không cần cài đặt gói đó.

Hãy cài đặt các thư viện cần thiết để kết xuất mô hình 3D. Thay đổi thư mục thành "3d-mode-in-reactjs" bằng lệnh sau.

 cd 3d-mode-in-reactjs

Sử dụng lệnh sau để cài đặt hai thư viện @ react-three / fiber và @ react-three / drei .

 npm install @react-three/fiber @react-three/drei

• @react-three/fiber : Nó là một trình kết xuất React cho baj.

• @react-three/drei : Đây là một tập hợp những người trợ giúp hữu ích và các bản tóm tắt đầy đủ chức năng, được tạo sẵn cho @ react-three / fiber.

  
  

Đối với hướng dẫn này, chúng tôi sẽ sử dụng mô hình 3D của Apple iPhone 13 Pro Max. Bạn có thể lấy mô hình này từ liên kết sau👇.

• "Apple iPhone 13 Pro Max" của DatSketch được cấp phép theo Creative Commons Attribution . Trước khi bạn sử dụng mô hình này trong bất kỳ dự án nào, hãy đảm bảo kiểm tra giấy phép của nó.

  
  

Mở liên kết đã cho và tải xuống mô hình ở định dạng gltf . Tại sao GLTF? Theo tài liệu bajs, glTF tập trung vào phân phối tài sản thời gian chạy, nó nhỏ gọn để truyền và tải nhanh.

Sau khi bạn tải xuống tệp, hãy tạo một thư mục được gọi là nội dung bên trong thư mục src và giải nén tất cả tệp mô hình trong thư mục có tên 3D-Model .

Mở tệp App.css và thay thế tất cả mã bằng css sau.

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

Bây giờ chúng tôi đã sẵn sàng để kết xuất mô hình.

Hãy hiểu những điều cơ bản về kết xuất mô hình 3D

Bây giờ có 3 điều mà bạn phải ghi nhớ trong khi kết xuất một mô hình.

1. cảnh: Tại đây bạn có thể thiết lập tất cả các đối tượng, đèn và máy ảnh.

2. máy ảnh: Nó được sử dụng để xem mô hình 3D thông qua các thiên thần khác nhau.

3. trình kết xuất: Nó được sử dụng để hiển thị / kết xuất một cảnh trên một phần tử HTML được gọi là canvas .

   
   

Nếu bạn đang trực tiếp sử dụng baj trong một dự án JavaScript đơn thuần thì bạn có thể phải thiết lập tất cả những thứ này từ những điều cơ bản, nhưng trong hướng dẫn này, chúng tôi đang sử dụng @react-three/fiber và @react-three/drei nên chúng tôi không có để làm tất cả mọi thứ từ đầu.

Mở tệp App.js , xóa mã mặc định và nhập phần tử canvas từ @react-three/fiber . Kiểm tra đoạn mã sau.

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

Ở đây, thành phần Canvas thiết lập scene và camera và hiển thị scene mỗi khung hình.

Bây giờ sao chép mã sau bên trong thành phần <Canvas /> .

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

Hãy hiểu từng yếu tố này.

• <mesh> : Lưới là một lớp kế thừa từ Object3d và nó đại diện cho các đối tượng đa giác. Trong lưới, bạn có thể khởi tạo đối tượng đa giác bằng cách sử dụng Hình học và Vật liệu .

• <boxGeometry /> : Đây là một lớp hình học cho một hình khối hình chữ nhật với 'chiều rộng', 'chiều cao' và 'chiều sâu' cho trước

• <meshStandardMaterial /> : Đây là vật liệu dựa trên vật lý tiêu chuẩn.

  
  

Hiện tại, bạn có thể thấy một hình vuông màu đen ở giữa trông không giống vật thể 3D.

Hãy thêm các điều khiển để chúng ta có thể di chuyển góc máy ảnh xung quanh đối tượng 3D này. Nhập <OrbitControls /> từ @react-three/drei bằng cách sử dụng dòng sau.

 import { OrbitControls } from "@react-three/drei";

Bây giờ kết <OrbitControls /> này bên trong các thành phần <Canvas> và sau <mesh> . Làm mới trang máy chủ phát triển và cố gắng lấy đối tượng. Bây giờ bạn có thể xem hình vuông này như một vật thể 3D. <OrbitControls /> này cho phép máy ảnh quay quanh mục tiêu.

Bây giờ vật thể có màu đen hoàn toàn vì không có nguồn sáng. Vì vậy, hãy thêm đèn vào cảnh của chúng ta. Bên trong thành phần <Canvas /> , thêm dòng sau vào trước <mesh> .

 <ambientLight />

Ở đây, ambientLight này chiếu sáng toàn cầu cho tất cả các đối tượng trong cảnh như nhau. Bây giờ bạn có thể thấy màu trắng nhạt của vật liệu lưới. Chúng ta cũng có thể thay đổi cường độ ánh sáng xung quanh thông qua các đạo cụ như trong đoạn mã sau.

 <ambientLight intensity={1.25} />

Bạn cũng có thể thay đổi màu của đối tượng 3D bằng cách sử dụng color prop trong <meshStandardMaterial /> . kiểm tra dòng sau.

 <meshStandardMaterial color="green"/>

Bây giờ màu của đối tượng 3D là màu xanh lá cây. Có rất nhiều đèn và các yếu tố khác nhau có sẵn mà bạn có thể sử dụng để tạo ra toàn bộ mô hình. Đối với điều đó, bạn có thể tham khảo tài liệu của bajs . Đó là nó cho những điều cơ bản không chúng ta hãy kết xuất iPhone của chúng tôi.

Chuyển đổi mô hình thành thành phần JSX

Mở các tệp mô hình và bạn sẽ thấy các tệp khác nhau như kết cấu , scene.gltf , scene.bin , v.v. Chúng tôi sẽ chuyển đổi scene.gltf thành một thành phần JSX để chúng tôi có thể dễ dàng kết xuất nó trong ứng dụng React của mình.

Bây giờ để chuyển đổi bất kỳ tệp GLTF nào sang thành phần JSX, chúng ta sẽ sử dụng một công cụ dòng lệnh đơn giản được gọi là gltfjsx . Theo tài liệu, gltfjsx là một công cụ dòng lệnh nhỏ có thể biến nội dung GLTF thành các thành phần JSX ba sợi phản ứng có thể khai báo và tái sử dụng.

Bây giờ hãy mở terminal / cmd và đi tới thư mục mà bạn đã lưu trữ tất cả các tệp mô hình, trong trường hợp của tôi, nó nằm bên trong thư mục 3D-Model trong thư mục nội dung . Vì vậy, tôi sẽ sử dụng lệnh sau để thay đổi thư mục.

 cd src/assets/3D-Model

Bây giờ sử dụng lệnh sau.

 npx gltfjsx scene.gltf

Lệnh này sẽ mất vài giây và trả về tệp Scene.js là thành phần JSX.

LƯU Ý: Lệnh gltfjsx này có thể gây ra lỗi nếu bạn đang sử dụng phiên bản NodeJS mới nhất. Tôi hiện đang sử dụng 17.2.0 và lệnh này đang hoạt động tốt. Nếu bạn gặp bất kỳ lỗi nào, vui lòng hạ cấp phiên bản NodeJs của bạn và thử lại mã này. Bạn có thể sử dụng các công cụ như nvm để sử dụng các phiên bản NodeJ khác nhau.

Quan trọng!

Trước khi chúng tôi kết xuất mô hình từ tệp Scene.js, chúng tôi phải sao chép các tệp mô hình vào thư mục công khai vì nếu bạn nhìn vào tệp Scene.js , nó sử dụng hook useGLTF để tải các nút và vật liệu từ tệp /scene.gltf . Vì vậy, hãy sao chép texture , scene.bin và scene.gltf vào thư mục chung của dự án của bạn.

Kết xuất mô hình 3D

Mở tệp App.js và xóa <mesh> . Hãy nhập Model từ tệp Scene.js .

 import Model from "./assets/3D-Model/Scene";

Bây giờ kết xuất <Model /> bên trong thành phần <Canvas /> , trước <OrbitControls /> .

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

Làm mới trang đầu ra. Bây giờ bạn sẽ có thể nhìn thấy hình ảnh iphone hiển thị trên màn hình, bạn có thể phóng to và thu nhỏ và di chuyển mô hình. Hãy tăng tầm nhìn của mô hình. Bạn có thể truy cập trực tiếp vào máy ảnh từ phần tử canvas. Thêm máy ảnh bên trong canvas dưới dạng đoạn mã sau.

<Canvas camera={{fov: 18}}>

Ở đây fov là viết tắt của "trường nhìn". Sau khi thiết lập fov , hãy làm mới trang để xem đầu ra. Hiện tại, chúng tôi đã đặt fov thành 18. Bạn có thể thử các số khác nhau và xem kết quả.

Hiện tại không có phản ánh về mô hình. Để thêm phản chiếu trên mô hình, bạn phải thiết lập các hình ảnh xung quanh mô hình này để những hình ảnh này có thể phản chiếu trên bề mặt của mô hình này. Thay vì thêm những hình ảnh này, hãy sử dụng thành phần <Environment /> từ thư viện @react-three/drei .

Hãy nhập <Environment /> ,

 import { Environment, OrbitControls } from "@react-three/drei";

Bây giờ sau mô hình, hãy thêm Môi trường.

 <Environment preset="sunset" />

Ở đây cài đặt trước đặt các loại môi trường khác nhau xung quanh mô hình. Hiện tại, chúng tôi đã đặt nó thành "hoàng hôn". Bạn có thể kiểm tra các cài đặt trước khác nhau có sẵn từ đây .

Sau khi thêm môi trường này, bạn sẽ thấy hình ảnh phản chiếu tuyệt đẹp trên iPhone của chúng tôi. Hãy kết xuất mô hình bên trong thành phần Suspense của React để nó có thể tải không đồng bộ.

 <Suspense fallback={null}> <Model /> </Suspense>

Đây là mã cuối cùng.

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

Lời kết

Đó là phần cuối của hướng dẫn này. Bạn có thể sử dụng https://docs.pmnd.rs/ để đọc tài liệu về @react-three/fiber và @react-three/drei và thử các phần tử khác nhau. Nếu bạn muốn tạo trang web hoàn chỉnh bằng cách sử dụng mô hình 3D và làm sinh động màu sắc của nó thì bạn có thể làm theo video hướng dẫn được đưa ra ở đầu bài học này.

Nếu bạn thích hướng dẫn này thì bạn nên xem các hướng dẫn tuyệt vời mà tôi có trên kênh YouTube của tôi có tên là CodeBucks . Bạn có thể kiểm tra nó từ đây .

Bạn cũng có thể thích các mẫu trang web này:

• Một mẫu portfolio đẹp trong ReactJS => tại đây

• Trang đích bộ sưu tập NFT trong ReactJS => [tại đây] (- Một mẫu portfolio đẹp trong ReactJS => tại đây )

  
  

Cảm ơn bạn đã đọc hướng dẫn này. Có một ngày tuyệt vời!