Почему не отображается модель THREE JS?

Question

[Max Sagaidak]

Привет всем, долго мучаюсь, не могу понять почему вместо модельки "планеты" которая действительно есть, и путь указан верно, отображается просто пустой canvas.
Вот код:

import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';

let
    scene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

camera.position.z = 30; // отдалить камеру по оси Z

let renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});

renderer.setClearColor(0x000000, 0);
renderer.setSize(1280, 720);

renderer.domElement.setAttribute("id", "Planet");
document.body.insertBefore(renderer.domElement, document.body.firstChild);

const aLight = new THREE.AmbientLight(0x404040, 1.2);
scene.add(aLight);

const pLight = new THREE.PointLight(0xFFFFFF, 1.2);
pLight.position.set(0, -3, 7);
scene.add(pLight);

let loader = new GLTFLoader();
let obj = null;

loader.load('../model/planet.gltf', function(gltf) {
    obj = gltf;
    obj.scene.scale.set(1.3, 1.3, 1.3);

    scene.add(obj.scene)
})

Прошу сразу учесть что код слизан и я ничего пока в Three JS не понимаю, это некая проба. Спасибо заранее)

Comments

[Максим]

Делаете на сервере ?

[Max Sagaidak]

Максим, локальный сервер от vscode (liveserver). Подходит ?

[Максим]

Максим Сагайдак, попробуйте от помощнее что то, может быть проблема ещё в количествах вершин модели, малое количество ОЗУ ... причин много, откройте инспектор в браузере, там будет написано

[Max Sagaidak]

Максим, Да не проблема точно не в этом, мне кажется вот эта часть кода как то не так работает. Потому что все подгружается на сайт (проверил через консоль) (так еще и полигонов у модели всего то 70). Надо звать эксперта.

let loader = new GLTFLoader();
let obj = null;

loader.load('../model/planet.gltf', function(gltf) {
    obj = gltf;
    obj.scene.scale.set(1.3, 1.3, 1.3);

    scene.add(obj.scene)
})

[Сергей delphinpro]

Максим Сагайдак,

Надо звать эксперта.

Вы не того эксперта позвали. Не работал с Three JS.
А всё потому что у вас лишний тэг javascript. Проблема-то у вас с конкретной библиотекой, а не с javascript в целом.

[Максим]

Максим Сагайдак, gltf loader подгружается через module, script type="module" src="" вот так примерно

[Max Sagaidak]

Максим, Указан у меня давно) Может камера нормально не настроена

[RAX7]

Максим Сагайдак, А вызов рендера где-то есть?
renderer.render(scene, camera);

[Max Sagaidak]

RAX7, Да действительно забыл добавить, спасибо. Но вот еще одно дело, загрузил одну модель все работает, загружаю вместо нее любую другую вот такие ошибки вылетают, код все то же что я и показывал выше, только путь к файлу менял, так же скорее всего проблема не в сомом файле потому что разные пробывал работает только первый. Причем вершин действительно не иного 1-2к

[Max Sagaidak]

Максим Сагайдак, А все проблему решил, кому интересно (УЧИТЕ TREE JS НОМРАЛЬНО) я вообще не знал что надо загрузить texture + scene.bin + gltf file, в одну папку я думал к модели никакого отношения не имеет)

[RAX7]

Максим Сагайдак, можно просто в glb сохранить, тогда все будет в одном файле и по размеру меньше получится

[Max Sagaidak]

RAX7, немного не понял, покажи пример каким образом можно файлы
1. scene.bin
2. scene.gltf
3. texture
Сохранить одним файлом ???

[RAX7]

Максим Сагайдак,
1. импортировать в blender
2. экспортировать из blender в glb

[Max Sagaidak]

RAX7, Все три файла Импортировать на сцену в Блендер, а потом просто Єкспортировать их одним файлом ?

[RAX7]

Максим Сагайдак, импортировать только scene.gltf, остальные должны сами подтянуться. А потом, да, экспортировать их одним файлом