McBernar

Нет, шейдерные материалы в threejs так не работают.

Попробуйте сделать воду через стандартный материал Блендера. Он должен переехать как есть в meshPhysicalMaterial, вроде. Там не 100% параметров соответствует, но близко к этому.

Вы же в курсе, да, что MeshNormalMaterial просто представляет нормали геометрии в определенных цветах? Грубо говоря, в какую сторону смотрит поверхность - такой и будет цвет.

Если вам нужен определенный цвет - используйте любой из подходящих материалов - Ламберт, Физик.

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

Сейчас же у вас будет больше сравнения синтаксиса, нежели смысла.

Урл, по которому доступен ваш php скрипт. localhost/script.php

div style={{width: props.percent}}

Забудьте о поиске селекторов в реакте и прямом обращении к дом-дереву.

Зачем вы делаете setstate и пишете туда данные из текущего стейта? Что это вообще?

const Service = [...]

clickButtonFilter = name => {
  const arr = Service.filter(el => el.category === name)
  this.setState({Service: arr})
}

https://developer.mozilla.org/ru/docs/Web/API/Inte...

Ну а дальше по вкусу подключаете css-класс, который изменит visibility/opacity с нужным таймингом.

Ну так добавьте ивент в функцию вызова попапа.
И проверяйте — если попап открыт (в вашем случае подойдёт проверка на наличие класса css), то удаляйте ивент. Если закрыт, то, соответственно, вешайте прослушку.

Функции для реализации — classList.contains, addEventListener, removeEventListener.

1. Повесить таймер на интервал раз в n секунд
2. В таймере искать id кнопки
3. Если есть — кликать. Если нет — не делать ничего
4. Можно держать вкладку открытой и написать эти несколько строк кода в консоли

Только, вот, думаю, что кнопка инжектится не на лету, а после релоада страницы. Тогда все становится чуть сложнее.