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

Checkout my new website🤩

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

Make resilience your competitive advantage

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

About Author

BÌNH LUẬN

chuyên mục

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

Related Stories

147 Stories To Learn About Reading Books Online

72 Stories To Learn About Adam Smith

145 Stories To Learn About Book

581 Stories To Learn About Non Fiction

147 Stories To Learn About Reading Books Online

72 Stories To Learn About Adam Smith

145 Stories To Learn About Book

581 Stories To Learn About Non Fiction

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps