Блог.

Базовая страница Three.js – WebGL – Next.js

Cover Image for Базовая страница Three.js – WebGL – Next.js

Примеры:

🔗 https://codepen.io/prisoner849/pen/MWbeoGj

🔗 https://codepen.io/prisoner849/pen/MWbeoGj

Старт проекта

Рекомендуем установить последнюю версию React Threejs , вы должны установить ее, набрав:

npm install three @react-three/fiber

Он должен работать «из коробки», но в экосистеме Three.js вы столкнетесь с нетранспилированными надстройками. в этом случае вы можете установить модуль next-transpile-modules:

npm install next-transpile-modules --save-dev

Затем добавьте это в свой next.config.js.

const withTM = require('next-transpile-modules')([
  'three',
  'react-spring',
  '@react-spring/three',
  '@react-spring/web',
  '@react-three/fiber',
  '@react-three/postprocessing',
  '@react-three/drei',
])

Вам также понадобится постобработка и drei :

npm install @react-three/drei @react-three/postprocessing @react-spring/three

Заключение

В интернете достаточно много примеров WebGL технологий различного применения. Простые позволяют размещать на своем сайте различные адаптивные блоки, отдельные 3D объекты, сложные - целый 3D мир.

Развитие технологий WebGL создает новые течения в научной среде, запуская разработку экспериментальных решений по расширению возможностей не только приложений, но и браузеров.