Разобрался. Что бы избежать этой ошибки мы должны скачать с GitHub файлы .js:
three.js, GLTFLoader.js, OrbitControls.js, three.module.js
<script src="scripts/three.js"></script>
<script type="module"> src="scripts/GLTFLoader.js"></script>
<script type="module"> src="scripts/OrbitControls.js"></script>// ЕСЛИ ЕСТЬ УПРАВЛЕНИЕ КАМЕРОЙ В ПРОСТРАНСТВЕ
Помещаем их в корень с проектом и открываем GLTFLoader.js. В момент 24.05.2021 находим 64 строку
from './smthPath/smthPath/smthPath/three.module.js';
и удаляем лишнее. (то есть указываем путь к файлу three.module.js). В моём случае:
from './three.module.js';
(Если есть управление камерой, то делаем тоже самое с файлом OrbitControls.js 9 строка)
from './three.module.js';
Далее ВАЖНО в скрипт, в котором все мозги добавляем type = "module", и импортим файлы - то есть получается
<script type="module">
import {GLTFLoader} from "./scripts/GLTFLoader.js";
import {OrbitControls} from './scripts/OrbitControls.js';
//...
</script>
ВАЖНО
*Для людей, которые не работали с 3Д в веб, но моделят в Cinema4D, 3Ds Max, ZBrush... (как я). Вам нужны не только файл .gltf, но и .bin
Как их получить?
- Заходим на сайт Scetchfab.
- Загружаем модель (ставим настройки бесплатное скачивание (потом
можно удалить модельку)).
- Ждём, пока она обработается.
- качаем нужный формат (glFT)
- Удаляем модельку с Scetchfab`а*
ВАЖНО
Конечный вид html файла
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dragon</title>
</head>
<body id="c" style="margin: 0;">
<!--3D-->
<script src="scripts/three.js"></script>
<script type="module" src="scripts/GLTFLoader.js"></script>
<script type="module" src="scripts/OrbitControls.js"></script>
<script type="module">
import {GLTFLoader} from "./scripts/GLTFLoader.js";
import {OrbitControls} from './scripts/OrbitControls.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x555555);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 5, 15);
const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.setClearColor(0x000000, 0);
renderer.setSize(1920 , 1080);
document.body.appendChild(renderer.domElement);
const aLight = new THREE.AmbientLight(0x404040, 15);
aLight.position.set(0,10,10)
scene.add(aLight);
const pLight = new THREE.PointLight(0xFFFFFF, 15);
pLight.position.set(0,5,0)
scene.add(pLight);
const phelper = new THREE.PointLightHelper(pLight);
scene.add(phelper);
const loader = new GLTFLoader();
let obj = null;
loader.load("3d/Dragon/scene.gltf", function(gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
});
const canvas = document.getElementById("c");
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 1, 0);
controls.update();
function animate(){
requestAnimationFrame(animate)
obj.rotation.y += 0.005;
renderer.render(scene, camera)
}
animate();
</script>
</body>
</html>