Ссылки на полезные ресурсы по ThreeJS.

Друзья, на данной странице, я постарался собрать все те ссылки на полезнейшие примеры, видео, статьи (и прочее), касаемо темы ThreeJS.
Данные ссылки могут бы полезны Вам тем, что Вы сможете почерпнуть из них массу информации, кода, примеров, пути совершенствования и обучения этим непростым темам: Three.JS, WEBGL, GLSL Shaders...

Данный список будет периодически добавляться.

Чтобы быстро что-то найти на странице, нажмите Ctrl+F и ищите =))

Основные сайты, где можно (и нужно) искать примеры кода.

Это также список наиболее важных ресурсов, в основном огромные или большие сайты с массой примеров и исходными кодами.

Тест браузера на наличие версии WEBGL/модели видео карты и очень многого другого


browserleaks.com
webglreport.com

Как искать то, что невозможно найти?

Первое, что очевидно, через Google или через внутренние системы поиска...

Если они упорно выдают иные результаты, то берём и гуглим, к примеру, так:

some site:codesandbox.io

Если Вы нашли какой-то непонятный код, то его можно разбить на основные функции (или методы), которые Вам непонятны и нагуглить таким образом примеры, что поможет понять смысл кода. Также на данных сайтах есть масса примеров уже готовых решений, которые можно брать и использовать для себя.

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

Часто встречаются ситуации, когда проект, которые написал человек, имеет непонятный/неинформативный заголовок или вовсе его не имеет, что не позволяет поисковым системам (гуглику и внутренним поисковикам самих этих сайтов), дать Вам то, что Вы хотите получить.

Поэтому, необходимо проявлять изощрённость и смекалку для того, чтобы что-то полезное найти, а также запастись вагоном времени и терпения.

Обычно, те задачи, которые стоят перед Вам уже кто-то решал и даже выложил в инете. Их только необходимо найти...система тегов на codepen.io

GLSL Shaders

Форумы threejs.

Немаловажную роль в решении тех или иных задач может сыграть форум ThreeJS
Важно задавать вопросы или отвечать на EN, так как сообщество плёхо понимать по-русский.
Если Вы знаете только один язык, то используйте переводчик.
html5gamedevs.com — можно спросить по разработке игр (HTML5 | EN)

YouTube.

На этом ресурсе довольно много внятных и понятных видео по теме. Возможно, стоит искать на EN языке, тогда будет больше вероятности найти, что требуется.
Особенно необходимо выделить видосики Юры. Он даже когда-то на RU языке их пилил, ссылка на канал Юры.

Перечень ссылок с пояснениями.

Разные ссылки:
https://codepen.io/PierfrancescoSoffritti/pen/wobPVJ
http://www.ro.me/tech/demos/8/index.html
http://www.ro.me/tech/demos/1/index.html
http://jsfiddle.net/bvonkonsky/72g8bny7/ locations
https://jsfiddle.net/xg1o4ekr/378/
https://openprocessing.org/sketch/659736
slider https://jsfiddle.net/j5huqxpd/15/
https://codepen.io/TRodriguez/full/oNjyqJY manual
https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-4-animation manual
https://codepen.io/ScavengerFrontend examples
https://codepen.io/collection/gcilD/?cursor=ZD0wJm89MCZwPTEmdj0yMA== examples
https://codepen.io/devildrey33/pen/jrkppB sphere vertex shader
https://jsfiddle.net/t3ye7ga9/7/ slider
https://alteredqualia.com/three/examples/webgl_custom_attributes_lines.html
https://github.com/mattdesl/three-line-2d
GSAP tweenmax three js
https://codepen.io/aaroniker/pen/bGGMNPd

YouTube

  • Learn GLSL Shaders from Scratch - 1 (7 уроков по шейдерам) / 4:12
  • Канал. Много чего есть, в т.ч. разработка WEBGL игр, VR, GLSL (шейдеры)
  • shader tutorial series — много видео по шейдерам
  • GLSL Урок№1 / 11:34
  • Overview of GLSL, the OpenGL Shading Language / 13:55
  • GLSL Shaders for Substance Painter with MaterialX / 25:53
  • GLSL Programming Basics / Functions / 7:37
  • Как мы ускоряли WebGL / Мстислав Живодков (2GIS) / 30:27
  • Иван Попелышев — Чем мы платим за переход от div к WebGL и что получаем (профит!) / Более-менее полезный доклад по shader / 59:27
  • ThreeJS inside of Webflow. #4 Webflow Cloneable's (+другие видео с канала) / 15:26
  • ThreeJS: Tips, Tricks and Techniques - GLSL Shaders / 7:53
  • Three.js Postprocessing Effect Tutorial / 6:53
  • Tween animation in Three JS with GSAP / 7:41
  • Glowing Sun in Three JS / 7:48
  • Three.js (Physics-Based domino) / 18:44
  • 3D model configurator with React Three Fiber and gltfjsx / 23:12
  • avaScript Ocean cleaning game with Three.JS / 40:30
  • three.js WebGL Shaders Tutorial - For Beginners / 10:07
  • three.js - Textures & Texture Mapping / 11:56
  • Add image textures to objects in ThreeJS - create a cool 360-degree view / 29:20
  • Three js, React Three Fiber, React Three Drei Tutorial 2022 / Part 6
  • Introducción a Three.js con React en español – Conceptos Generales / 1:19:57
  • Three.js con React - 04 - Cargar modelos GTLF / DracoGLTF / 30:21
  • Animation and 3D in react-three-fiber (with Paul Henschel) — Learn With Jason / 1:34:08

    • один интересный сайтик

    copyleft 2024. we use: GatsbyJS, React, Google Analytics. Source code