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 để hiển thị một mô hình iPhone trong ứng dụng React. Three.js 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👇. https://youtu.be/cT160dOzpGY 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 (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. 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 và . @ react-three / fiber @ react-three / drei npm install @react-three/fiber @react-three/drei : Nó là một trình kết xuất React cho baj. @react-three/fiber : Đâ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. @react-three/drei Đố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👇. của DatSketch được cấp phép theo . 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ó. "Apple iPhone 13 Pro Max" Creative Commons Attribution Mở liên kết đã cho và tải xuống mô hình ở định dạng . Tại sao GLTF? Theo gltf 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 bên trong thư mục và giải nén tất cả tệp mô hình trong thư mục có tên . dung src 3D-Model Mở tệp và thay thế tất cả mã bằng css sau. App.css .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. 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. 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. 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 và nên chúng tôi không có để làm tất cả mọi thứ từ đầu. @react-three/fiber @react-three/drei Mở tệp , xóa mã mặc định và nhập phần tử từ . Kiểm tra đoạn mã sau. App.js canvas @react-three/fiber 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 thiết lập và và hiển thị mỗi khung hình. Canvas scene camera scene 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. : 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 và . <mesh> Lưới Hình học Vật liệu : Đâ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 <boxGeometry /> : Đây là vật liệu dựa trên vật lý tiêu chuẩn. <meshStandardMaterial /> 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 từ bằng cách sử dụng dòng sau. <OrbitControls /> @react-three/drei import { OrbitControls } from "@react-three/drei"; Bây giờ kết này bên trong các thành phần và sau . 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. này cho phép máy ảnh quay quanh mục tiêu. <OrbitControls /> <Canvas> <mesh> <OrbitControls /> 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 , thêm dòng sau vào trước . <Canvas /> <mesh> <ambientLight /> Ở đây, 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 <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 prop trong . kiểm tra dòng sau. color <meshStandardMaterial /> <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 . Đó 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. bajs 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ư , , , v.v. Chúng tôi sẽ chuyển đổi 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. kết cấu scene.gltf scene.bin scene.gltf 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à . Theo tài liệu, 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. gltfjsx gltfjsx 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 trong thư mục nội . Vì vậy, tôi sẽ sử dụng lệnh sau để thay đổi thư mục. 3D-Model dung 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 là thành phần JSX. Scene.js 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ư để sử dụng các phiên bản NodeJ khác nhau. nvm Quan trọng! Trước khi chúng tôi kết xuất mô hình từ tệp chúng tôi phải sao chép các tệp mô hình vào thư mục vì nếu bạn nhìn vào tệp , nó sử dụng hook để tải các nút và vật liệu từ tệp . Vì vậy, hãy sao chép , và vào mục chung của dự án của bạn. Scene.js, công khai Scene.js useGLTF /scene.gltf texture scene.bin scene.gltf thư Kết xuất mô hình 3D Mở tệp và xóa . Hãy nhập từ tệp . App.js <mesh> Model Scene.js import Model from "./assets/3D-Model/Scene"; Bây giờ kết xuất bên trong thành phần , trước . <Model /> <Canvas /> <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 là viết tắt của "trường nhìn". Sau khi thiết lập , hãy làm mới trang để xem đầu ra. Hiện tại, chúng tôi đã đặt thành 18. Bạn có thể thử các số khác nhau và xem kết quả. fov fov fov 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 từ thư viện . thành phần <Environment /> @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 của React để nó có thể tải không đồng bộ. Suspense <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 để đọc tài liệu về và 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. https://docs.pmnd.rs/ @react-three/fiber @react-three/drei 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à . Bạn có thể kiểm tra nó từ . CodeBucks đâ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! Cũng được xuất bản . ở đây

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Subscribe to Learn ReactJS by building Projects!

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Making security fun one episode at a time

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

dài quá đọc không nổi

People Mentioned

Companies Mentioned

Coin Mentioned

CodeBucks

STORY’S CREDIBILITY

DYOR

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

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

dài quá đọc không nổi

People Mentioned

Companies Mentioned

Coin Mentioned

CodeBucks

STORY’S CREDIBILITY

DYOR

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

NHỮNG BÀI VIẾT LIÊN QUAN