Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Увођење 3Д рендеровања је трансформисало интеракцију корисника са интернет технологијама. За почетак, веб апликације су постале импресивније, пружајући занимљиво и интерактивно искуство путем веб претраживача.

Ову технологију су већ жељно усвојиле области игара и проширене/виртуелне стварности. Нуди реалистичан и импресиван начин интеракције са виртуелним елементима.

Сазнајте како да рендерујете 3Д објекте у Реацт апликацији.

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

Пре него што почнете са 3Д приказивањем, морате да знате неколико тачака:

  • 3Д објекти садрже појединачне тачке, или врхове, који дефинишу њихову структуру у три димензије. Спајањем ових тачака стварају се лица која чине облик објекта на екрану.
  • Модерни претраживачи имају уграђену могућност да рендерују 3Д користећи технологије као што је ВебГЛ. Они то раде тако што користе снагу графичке процесорске јединице у вашој машини да брзо рендерују 3Д моделе и сцене.
    • instagram viewer
  • Сваки 3Д објекат који ваш прегледач приказује састоји се од три главне компоненте. То су сцена, камера и рендерер, и сви они играју кључну улогу. Сцена пружа основну платформу за постављање свих ваших 3Д елемената, укључујући светла и камере. Камера вам омогућава да видите 3Д објекат из различитих углова. На крају, рендерер монтира и приказује сцену на врху платна ХТМЛ елемента.

3Д приказивање са Тхрее.јс и Реацт Тхрее Фибер

Тхрее.јс је ЈаваСцрипт библиотека коју можете да користите за приказивање 3Д објеката у веб прегледачу. Користећи његове уграђене компоненте, можете лако да креирате и рендерујете 3Д објекте у свом претраживачу заједно са другим функцијама ваше Реацт апликације.

Пакет реацт-тхрее-фибер ради на врху Тхрее.јс. Поједностављује процес коришћења Тхрее.јс компоненти за креирање и рендеровање 3Д објеката у претраживачу. Занимљиво је да такође пружа обичај Реаговати куке који су корисни приликом креирања 3Д објеката у Реацт-у.

Рендеровање 3Д објеката у Реацт апликацији

Пратите доле наведене кораке да бисте приказали једноставан 3Д облик у вашем претраживачу, као и 3Д модел креиран у Блендеру. Ако нисте упознати са Блендером, научите како да почнете као почетник.

Направите Реацт апликацију, покрените свој терминал да бисте покренули наредбу у наставку и инсталирајте потребне зависности:

нпм инсталира три @реацт-тхрее/фибер @реацт-тхрее/дреи

Инсталирајте пакете Тхрее.јс, реацт-тхрее-фибер и реацт-тхрее-дреи. Реацт-тхрее-дреи библиотека ради заједно са реацт-тхрее-фибер за креирање 3Д сцена и објеката.

Рендер 3Д Схапе

Можете приказати једноставан 3Д облик кутије у претраживачу са врло мало кода. Отвори срц/апп.јс датотеку, избришите сав шаблон Реацт кода и додајте следеће:

увоз Реаговати из"реаговати";
увоз {Цанвас} из„@реацт-тхрее/фибер“;
увоз {ОрбитЦонтролс} из„@реацт-тхрее/дреи“;
функцијаКутија() {
повратак (
<месх>
<бокБуфферГеометрипричврстити ="геометрија" />
<месхЛамбертМатериалпричврстити="материјал"боја="хотпинк" />
месх>
 )
}
извозУобичајенофункцијаАпликација() {
повратак (
<дивНазив класе="Апликација">
<дивНазив класе=„Заглавље апликације“>
<Цанвас>
<ОрбитЦонтролс />
<амбијенталног светлаинтензитет ={0.5} />
<спотЛигхтположај={[10,15,10]} угао={0.3} />
<Кутија />
Цанвас>
див>
див>
 );
}

Овај код ради следеће:

  • Тхе Кутија компонента користи компоненте месх, бокБуфферГеометри и месхЛамбертМатериал из реацт-тхрее-фибер за рендеровање 3Д кутије. Ове три компоненте раде руку под руку да би створиле облик кутије.
  • Компонента бокБуфферГеометри креира кутију и овај код поставља својство боје компоненте месхЛамбертМатериал на жарко ружичасту.
  • Затим приказује елемент Цанвас који садржи компоненту кутије са амбијенталним светлом, рефлектором и сетом својстава компоненте Орбит Цонтролс.
  • Својство компоненте амбијенталног светла додаје меко светло платну. Компонента спотЛигхт додаје фокусирано светло из одређене позиције са углом од 0,3. На крају, компонента ОрбитЦонтролс вам омогућава да контролишете камеру око 3Д објекта.

Увезите и рендерујте апп.јс компоненту у датотеци индек.јс и отворите развојни сервер да бисте видели резултате у свом претраживачу на http://localhost: 3000.

Рендерујте 3Д модел креиран у блендеру

Блендер је алатка отвореног кода коју користе креативци у различитим областима за креирање 3Д модела, визуелних ефеката и интерактивних 3Д апликација. Можете користити Блендер за креирање 3Д модела за своју веб апликацију.

За овај водич, приказаћете БМВ 3Д модел према СРТ перформансама доступан на Скетцхфаб.

Кредит: РадеонГамер/ Скетцхфаб
Цреативе Цоммонс Аттрибутион

Да бисте започели, преузмите модел са Скетцхфаб-а у ГЛТФ-у (ГЛ Трансмиссион Формат). Овај формат олакшава приказивање 3Д модела у претраживачу. Када се преузимање заврши, отворите фасциклу модела и преместите датотеку модела у јавни директоријум унутар ваше Реацт апликације.

Сада идите на своју апп.јс датотеку и попуните је кодом испод.

  • Увезите следеће компоненте: 
    увоз {усеГЛТФ, Стаге, ПресентатионЦонтролс} из„@реацт-тхрее/дреи“;
  • Креирајте компоненту модела и додајте код у наставку: 
    функцијаМодел(реквизити){
    конст {сцене} = усеГЛТФ("/бмв.глб");
    повратак<примитивниобјекат={сцена} {...реквизити} />
    }
    извозУобичајенофункцијаАпликација() {
    повратак (
    <дивНазив класе="Апликација">
    <дивНазив класе=„Заглавље апликације“>
     дпр={[1,2]} 
     схадовс цамера={{фав: 45}}
     стиле={{"позиција": "апсолутни"}}
     >
     брзина={1,5} 
    глобално зоом={0.5}
     полар={[-0.1, Матх.ПИ / 4]}
     >
    <ФазаЖивотна средина={нула}>
    <МоделСкала={0.01} />
    Фаза>
    ПресентатионЦонтролс>
    Цанвас>
    див>
    див>
     );
    }
  • УсеГЛТФ кука из библиотеке Реацт-тхрее-дреи дефинише променљиву сцене и додељује јој вредност датотеке модела која се налази на путањи "/бмв.глб". Компонента затим враћа примитивни објекат који поставља сцену за 3Д модел.
  • Елемент Цанвас приказује главне компоненте које чине модел, са наведеним својствима, као што су однос пиксела уређаја (ДПР), сенке, угао камере и стил.
  • Затим наведете својства компоненте ПресентатионЦонтролс као што су брзина и глобални зум. Ова својства дефинишу како ћете контролисати модел на екрану.
  • Коначно, конфигуришите компоненту Стаге која монтира модел на екран претраживача.

Покрените развојни сервер да бисте ажурирали промене у вашој апликацији. Требало би да видите модел приказан у вашем претраживачу.

Рендеровање 3Д модела у вашој веб апликацији

Рендеровање 3Д модела у вашим веб апликацијама може понудити неколико предности, као што је побољшање корисничког искуства пружањем реалистичнијег и интерактивнијег 3Д осећаја. Као резултат, корисници могу боље да се баве производом.

Међутим, приказивање 3Д елемената може имати своје недостатке као што је негативан утицај на перформансе апликације. 3Д модели захтевају више ресурса за приказивање, што може довести до споријег учитавања апликације.