Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Въвеждането на 3D изобразяване трансформира взаимодействието на потребителите с интернет технологиите. Като начало уеб приложенията станаха по-завладяващи, предоставяйки ангажиращо и интерактивно изживяване чрез уеб браузъра.

Тази технология вече е възприета с нетърпение от игрите и областите с разширена/виртуална реалност. Той предлага реалистичен и завладяващ начин за взаимодействие с виртуални елементи.

Разберете как да визуализирате 3D обекти в React приложение.

Основи на 3D моделиране и програмиране

Преди да започнете с 3D изобразяване, има няколко точки, които трябва да знаете:

  • 3D обектите съдържат отделни точки или върхове, които определят тяхната структура в три измерения. Съединяването на тези точки създава лица, които изграждат формата на обекта на екрана.
  • Съвременните браузъри имат вградена възможност за изобразяване на 3D с помощта на технологии като WebGL. Те правят това, като използват силата на графичния процесор във вашата машина, за да рендират бързо 3D модели и сцени.
    instagram viewer
  • Всеки 3D обект, който вашият браузър визуализира, се състои от три основни компонента. Това са сцената, камерата и рендърът и всички те играят решаваща роля. Сцената предоставя основната платформа за настройка на всички ваши 3D елементи, включително светлини и камери. Камерата ви позволява да гледате 3D обекта от различни ъгли. И накрая, рендерерът монтира и показва сцената върху HTML елемент на платно.

3D изобразяване с Three.js и React Three Fiber

Three.js е JavaScript библиотека, която можете да използвате за изобразяване на 3D обекти в уеб браузър. Използвайки вградените му компоненти, можете лесно да създавате и изобразявате 3D обекти във вашия браузър заедно с други функции на вашето приложение React.

Пакетът react-three-fiber работи върху Three.js. Той опростява процеса на използване на Three.js компоненти за създаване и изобразяване на 3D обекти в браузъра. Интересното е, че предоставя и персонализирани Реагирайте куките които са полезни, докато създавате 3D обекти в React.

Изобразяване на 3D обекти в React приложение

Следвайте стъпките по-долу, за да изобразите проста 3D форма в браузъра си, както и 3D модел, създаден от Blender. Ако не сте запознати с Blender, научете как да започнете като начинаещ.

Създайте приложение React, стартирайте терминала си, за да изпълните командата по-долу, и инсталирайте необходимите зависимости:

npm инсталирайте три @react-three/fiber @react-three/drei

Инсталирайте пакетите Three.js, react-three-fiber и react-three-drei. Библиотеката react-three-drei работи заедно с react-three-fiber за създаване на 3D сцени и обекти.

Изобразете 3D форма

Можете да изобразите проста 3D форма на кутия в браузър с много малко код. Отвори src/app.js файл, изтрийте целия шаблонен код на React и добавете следното:

импортиране Реагирайте от"реагира";
импортиране {Платно} от"@react-three/fiber";
импортиране {OrbitControls} от"@react-three/drei";
функцияКутия() {
връщане (
<мрежа>
<boxBufferGeometryприкачвам ="геометрия" />
<meshLambertMaterialприкачвам="материал"цвят="горещо розово" />
мрежа>
 )
}
износпо подразбиранефункцияПриложение() {
връщане (
<дивclassName="приложение">
<дивclassName=„Заглавка на приложението“>
<Платно>
<OrbitControls />
<ambientLightинтензивност ={0.5} />
<прожекторпозиция={[10,15,10]} ъгъл={0.3} />
<Кутия />
Платно>
див>
див>
 );
}

Този код прави следното:

  • The Кутия компонент използва мрежата, boxBufferGeometry и meshLambertMaterial компонентите от react-three-fiber, за да изобрази 3D кутия. Тези три компонента работят ръка за ръка, за да създадат формата на кутията.
  • Компонентът boxBufferGeometry създава полето и този код задава цветовото свойство на компонента meshLambertMaterial на горещо розово.
  • След това изобразява елемента Canvas, който съдържа компонента кутия с околна светлина, прожектор и набор от свойства на компонента Orbit Controls.
  • Свойството на компонента на околната светлина добавя мека светлина към платното. Компонентът spotLight добавя фокусирана светлина от определена позиция с ъгъл 0,3. И накрая, компонентът OrbitControls ви позволява да управлявате камерата около 3D обекта.

Импортирайте и изобразете компонента app.js във файла index.js и завъртете сървър за разработка, за да видите резултатите във вашия браузър на http://localhost: 3000.

Рендирайте 3D модел, създаден от Blender

Blender е инструмент с отворен код, използван от творци в различни области за създаване на 3D модели, визуални ефекти и интерактивни 3D приложения. Можете да използвате Blender за създаване на 3D модели за вашето уеб приложение.

За този урок ще изобразите BMW 3D модел чрез SRT изпълнение, налично на Sketchfab.

Кредит: RadeonGamer/ Sketchfab
Creative Commons Attribution

За да започнете, изтеглете модела от Sketchfab в GLTF (GL Transmission Format). Този формат улеснява изобразяването на 3D модели в браузъра. След като изтеглянето приключи, отворете папката на модела и преместете файла на модела в публичната директория във вашето приложение React.

Сега преминете към вашия файл app.js и го попълнете с кода по-долу.

  • Импортирайте следните компоненти: 
    импортиране {useGLTF, Stage, PresentationControls} от"@react-three/drei";
  • Създайте компонента на модела и добавете кода по-долу: 
    функцияМодел(реквизит){
    конст {сцена} = useGLTF("/bmw.glb");
    връщане<примитивенобект={сцена} {...реквизит} />
    }
    износпо подразбиранефункцияПриложение() {
    връщане (
    <дивclassName="приложение">
    <дивclassName=„Заглавка на приложението“>
     dpr={[1,2]} 
     камера за сенки={{fav: 45}}
     стил={{"позиция": "абсолютен"}}
     >
     скорост={1,5} 
    глобален мащабиране={0.5}
     полярен={[-0.1, математика.PI / 4]}
     >
    <сценазаобикаляща среда={нула}>
    <Моделмащаб={0.01} />
    сцена>
    PresentationControls>
    Платно>
    див>
    див>
     );
    }
  • Куката useGLTF от библиотеката React-three-drei дефинира променлива на сцената и й присвоява стойността на моделния файл, намиращ се на пътя "/bmw.glb". След това компонентът връща примитивен обект, който поставя сцената за 3D модела.
  • Елементът Canvas изобразява основните компоненти, които изграждат модела, със зададените свойства, като съотношение на пикселите на устройството (DPR), сенки, ъгъл на камерата и стил.
  • След това указвате свойствата на компонента PresentationControls като скорост и глобално мащабиране. Тези свойства определят как ще управлявате модела на екрана.
  • Накрая конфигурирайте компонента Stage, който монтира модела на екрана на браузъра.

Завъртете сървъра за разработка, за да актуализирате промените във вашето приложение. Трябва да видите модела, изобразен в браузъра ви.

Изобразяване на 3D модели във вашето уеб приложение

Изобразяването на 3D модели във вашите уеб приложения може да предложи няколко предимства, като подобряване на потребителското изживяване чрез осигуряване на по-реалистично и интерактивно 3D усещане. В резултат на това потребителите могат да се ангажират по-добре с продукта.

Рендирането на 3D елементи обаче може да има своите недостатъци, като например отрицателно въздействие върху производителността на приложението. 3D моделите изискват повече ресурси за изобразяване, което може да доведе до по-бавно зареждане на приложението ви.