Как добавить объект формата glTF на сцену?
Пытаюсь добавить 3д объект на сцену.
Ошибка Uncaught TypeError: Class constructor ol cannot be invoked without 'new' at new GLTFLoader
Делаю пост этого вопроса второй раз (извиняюсь). Часть ошибок исправил и понял, что главная ошибка в строке
let loader = new THREE.GLTFLoader();
Но не могу понять, что нужно засунуть в скобки? new ?.., или что? Спасибо.
Моделька 2(МБ): https://drive.google.com/file/d/1bPnC5coazNFIcsyvV9U29BFiFhXhriYg/view?usp=sharing
Исходный код:
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10; // Отдаление камеры
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 0);
renderer.setSize(1280, 720);
renderer.domElement.setAttribute("id", "Church3DObj");
document.body.insertBefore(renderer.domElement, document.body.firstChild);
const aLight = new THREE.AmbientLight(0x404040, 1.2);
scene.add(aLight);
let loader = new THREE.GLTFLoader();
let obj = null;
loader.load('/3d/Church.gltf', function(gltf) {
obj = gltf;
obj.scene.scale.set(1.3, 1.3, 1.3);
scene.add(obj.scene);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>Ответы (2 шт):
Для начала нужно быть уверенным, что все используемые модули фреймворка из одной и той же версии/ревизии (текущая r128).
Использовал модель из дистрибутива - все работает, как ожидалось.
Модель, которую предполагается загружать, хорошо бы проверить на сайте https://gltf-viewer.donmccurdy.com/. Если там она не грузится - значит, что-то не так с файлом (файлами) модели.
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3; // Отдаление камеры
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(innerWidth, innerHeight);
renderer.domElement.setAttribute("id", "Church3DObj");
document.body.insertBefore(renderer.domElement, document.body.firstChild);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
const aLight = new THREE.DirectionalLight(0xffffff, 1.5);
aLight.position.setScalar(10);
scene.add(aLight, new THREE.AmbientLight(0xffffff, 0.5));
let loader = new THREE.GLTFLoader();
let obj = null;
loader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function(gltf) {
obj = gltf.scene;
scene.add(obj);
});
renderer.setAnimationLoop(_ => {
renderer.render(scene, camera);
})body {
overflow: hidden;
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>Разобрался. Что бы избежать этой ошибки мы должны скачать с 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>