Three.js и import файлов .glsl
 

Здравствуйте!

При попытке загрузить файл .glsl через import выдаёт такую ошибку
"Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."

Код загрузки:

import { ShaderMaterial, BackSide } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";

Подскажите, может знает кто, почему возникает эта ошибка и как её можно решить?

В этом сообщении и указывается причина:

"Не удалось загрузить скрипт модуля: сервер ответил типом MIME, отличным от JavaScript. Для скриптов модуля в соответствии со спецификацией HTML применяется строгая проверка типов MIME."

Судя по сообщению, в качестве типа сервер вообще ничего не сообщает - пусто.

Именно. Вот я и не пойму причину почему нет типа. Может вы знаете как его можно указать в загрузке этих файлов?

Ну так код сервера посмотреть, почему он не передает заголовков нужных.

Шейдерные программы это не JavaScript поэтому их нельзя загрузить с помощью import.

По факту это просто текстовые данные которые передаются в API функцию браузера. А уже браузер передает их драйверу видеокарты который их компилирует для текущей видеокарты и выполняет.

MallSerg,
все правильно написал
в trree внешние ресурсы( текстуры, материалы) загружаем аяксом внешним запросом
далее, после загрузки , обрабатываем
или вставляем в тело документа
https://threejs.org/docs/#api/en/mat...ShaderMaterial
https://developer.mozilla.org/ru/doc...color_in_WebGL

<script id="shader-vs" type="x-shader/x-vertex">Код</script>

В Three.js их загружают именно что через import. В точности как я указал в примере.

Не понятно, где и когда загружается, и что используется... провангую )

https://discourse.threejs.org/t/how-...loader/10474/4

здесь смотреть raw-loader

https://webpack.js.org/loaders/raw-loader/

Примерчик киньте.
Даже если и случайно загрузится, то в vertexShader и fragmentShader точно ничего не будет.
Там могут быть только объекты, которые экспортируются из указанных модулей.

Примерчик:

index.js

import * as THREE from '/three/build/three.module.js';
import loadTexture from "/texture-loader.js";
import loadModel from "/model-loader.js";
import BackfaceMaterial from "/backface-material";
import RefractionMaterial from "/refraction-material";

backface-material index.js

import { ShaderMaterial, BackSide } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";

refraction-material index.js

import { ShaderMaterial } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";