Problem z wyświetleniem obrazu OBJ w Three.js

pytanie zadane 8 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
edycja 8 kwietnia 2021 przez Kubs

Witajcie,

rzeźbie sobie i rzeźbie, ale może tym razem się uda.

Próbuje wczytać image.obj w Three.js, ale wyrzuca dwa błędy:

three.js:6215 THREE.Object3D.add: object not an instance of THREE.Object3D. OBJLoader

image.obj:1 Failed to load resource: net::ERR_CACHE_READ_FAILURE

main.js

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera (64, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");


const loader = new THREE.OBJLoader();
loader.load('image.obj');


const light = new THREE.PointLight(colorPink, 2);
const light2 = new THREE.PointLight(colorYellow, .5);


 light.position.z = 20;
 light.position.y = -20;
 light.position.x = -40;

 light2.position.z = 10;
 light2.position.y = 20;
 light2.position.x = 40;


scene.add(light);
scene.add(light2);
scene.add(loader);

camera.position.z = 55;

renderer.render (scene, camera);

oraz index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
</body>
</html>

komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czy możesz pokazać screen z zakładki Network devtoolsów przeglądarki (uprzednio odśwież stronę)? Co zwraca request, który ma pobrać ten model?

komentarz 8 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Odpowiadam z tel. Jutro to sprawdzę. Mam nadzieję, że jakoś to znajdę :)

Dziękuję raz jeszcze Chris.

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
edycja 9 kwietnia 2021 przez Kubs

Witaj Chris,

mam tą zakładkę, ale nie wiem gdzie znaleźć ten request o który pytasz.

Czy o to Ci chodzi? https://imgur.com/a/ynmDntF

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na screenie widać, że coś debugujesz. Ja natomiast pytałem o zakładkę Network, a konkretnie o panele Headers oraz Response.

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

https://imgur.com/a/JSzYjti

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

To jest request pobrania strony głównej. A ja pytam o request, który został wysłany po pobranie tego modelu/obrazu. :) Jeśli nie wiesz który to, to pokaż screen z listy wszystkich requestów.

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Jeszcze raz sprobuje https://imgur.com/a/qN1WV3M

A jeśli nie ten, to gdzie jest lista wszystkich requestów?

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Lista requestów jest po lewej stronie na screenie. Tylko, że nie widać, aby ten konkretny request po model/obraz został wysłany. Są requesty po stronę główną, Twój skrypt main oraz dwa skrypty biblioteki Three.js. Może błąd jest rzucany przed wysłaniem requestu?

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

A może sprawdzisz u siebie ten kod i podstawisz dla testu jakąś swoją grafikę obj?

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@ScriptyChris,

pozostał tylko błąd

Uncaught SyntaxError: Cannot use import statement outside a module

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na CodePen działa. Z tym, że pobrałem jakiś przykładowy model i musiałem podać onLoad callback (mimo, że wg docsów jest opcjonalny), bo rzuca błędem w tym miejscu.

https://codepen.io/ScriptyChris/pen/wvgpGpb?editors=1010

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

pozostał tylko błąd

Już Ci kilka razy tłumaczyłem, że mieszasz skrypt modułowy z niemodułowym. Jeśli chcesz używać modułów, to zadeklaruj skrypt main.js jako type="module". Wtedy musisz zaimportować Three.js i OBJLoader.js jako moduły, bo w obecnej formie podpinasz je jako skrypty, które udostępniają API tej biblioteki jako zmienną globalną.

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Poprawiam..

komentarz 9 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@ScriptyChris,

gotowe

<script type="module" src="https://unpkg.com/three@0.126.0/examples/js/loaders/OBJLoader.js"></script>

Jak teraz zaimportować Three.js i OBJLoader.js jako moduły?

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Co do błędu, to moim zdaniem ścieżka lub sam plik nie są prawidłowe. Gdy na CodePen podałem parametr "model.obj", to też dostałem ten błąd

THREE.Object3D.add: object not an instance of THREE.Object3D.

https://imgur.com/a/zLoe56m

Powinien Ci się ten request pokazać na liście w zakładce Network. I tam było by widać, czy request wrócił i co zwrócił.

komentarz 9 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Jak teraz zaimportować Three.js i OBJLoader.js jako moduły?

W docsach jest przykład jak zaimportować Three.js jako moduł w przeglądarce: https://threejs.org/docs/#manual/en/introduction/Installation#:~:text=Install%20from%20CDN%20or%20static%20hosting

Całość - z importem konstruktora OBJLoader - powinna zadziałać w ten sposób:

<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.126.0/build/three.module.js';
  import * as OBJLoader from 'https://unpkg.com/three@0.126.0/examples/jsm/loaders/OBJLoader.js';

  const loader = new OBJLoader();

  /* reszta kodu */
</script>

Jeśli będziesz podpinał tą libkę w formie modułów, to usuń pozostałe skrypty od tej libki, które do tej pory miałeś, bo one dodają libkę w postaci zmiennej globalnej.

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Dziękuję.

Mam teraz taką sytuację w main.js

const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");

import * as THREE from 'https://unpkg.com/three@0.126.0/build/three.module.js';
  import * as OBJLoader from 'https://unpkg.com/three@0.126.0/examples/jsm/loaders/OBJLoader.js';

const loader = new OBJLoader();
loader.load('image.obj');

oraz w index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
    <script src="main.js"></script>
</body>
</html>

W tym przypadku pozostało umieścić gdzieś type="module", ale czy prawidłowo jest dodawać <script> w main.js?

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Podpinasz teraz w HTML dwa skrypty: libkę three.js i swój skrypt main.js. Skoro w main.js importujesz moduł libki, to usuń z HTML-a podpięcie libki - zostaw sam main.js i oznacz go jako type="module".

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Gotowe,

pozostał błąd

Uncaught TypeError: OBJLoader is not a constructor
    at main.js:26

a linijka 26 to

const loader = new OBJLoader();

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

pozostał błąd

Ah, przy imporcie zamień * as OBJLoader na { OBJLoader }.

https://codepen.io/ScriptyChris/pen/poRppwO?editors=1010

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

index.html

<body>
    <script type="module" src="main.js"></script>
</body>

mainj.js

import * as THREE from 'https://unpkg.com/three@0.126.0/build/three.module.js';
  import {OBJLoader} from 'https://unpkg.com/three@0.126.0/examples/jsm/loaders/OBJLoader.js';

const loader = new OBJLoader();
loader.load('image.obj');

Błędy

three.module.js:6722 THREE.Object3D.add: object not an instance of THREE.Object3D. OBJLoader
add @ three.module.js:6722
OBJLoader.js:468 TypeError: onLoad is not a function
    at Object.onLoad (OBJLoader.js:458)
    at XMLHttpRequest.<anonymous> (three.module.js:34415)

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

No tak, zmieniłeś sposób podpinania biblioteki (nie wiem w sumie po co), ale nie odpowiedziałeś na pytanie, co zwraca zapytanie po ten model → https://forum.pasja-informatyki.pl/536509/problem-z-wyswietleniem-obrazu-obj-w-three-js?show=536719#c536719

Tutaj tkwi problem. Ścieżka image.obj albo jest nieprawidłowa, albo zapytanie pod nią zwraca nieprawidłowe dane, których Three.js nie może sobie sparsować jako model.

OBJLoader.js:468 TypeError: onLoad is not a function

O tym błędzie też pisałem wyżej - brak przekazania parametru onLoad rzuca błędem, mimo że wg docsów ten callback jest opcjonalny.

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Czy o to pytasz?

https://imgur.com/a/YyzHpCt

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Tak, pokaż co tam jest w Response.

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Pusto. Zupełnie nic tam nie ma.

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

A co w ogóle zawiera ten plik?

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Image.mtl i image.obj. Są one osobno i może w tym jest problem? Może te dwa pliki trzeba jakoś połączyć w jeden?

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ale co zawiera ten plik image.obj?

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Zwykłą kostkę, która pojawia się po otwarciu programu Blender.

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

A czy jest zgodny z rozszerzeniem .obj?

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Zachowując plik jako obj Blender dzieli go na dwa pliki - obj i mtl więc obj na pewno jest zgody z tym co tam pisze. Hmm

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Widzę jakieś rozszerzenie .obj .mtl Wavefront w VSC, moze to pomoze?

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie wiem, trudno powiedzieć nie mając dostępu do tego pliku. Postaw breakpoint w tym miejscu w pliku three.js i jak się zatrzyma kod, to pokaż czy zmienna object jest truthy i czy jej property isObject3d też jest truthy. Może sam obiekt nie jest 3d i dlatego rzuca błędem.

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Tutaj?

https://imgur.com/a/Ufh4HjX

Jak szybko znaleźć tą część kodu bo tu jest tysiące linijek :)

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Po pierwsze przejdź do tego pliku z zakładki Sources: kliknij prawym przyciskiem na to zapytanie z listy i wybierz "Open in Sources panel", albo przejdź do tej zakładki, wciśnij Ctrl + P, wpisz three.js i wciśnij enter - bo w Networku AFAIK nie działa przechodzenie do konkretnej linijki. W lewym dolnym rogu będzie ikonka klamer (wąsów), a obok niej napisane "Line 1, Column 1" - kliknij w nią, to sformatuje plik. Następnie użyj skrótu klawiszowego Ctrl + G (przejście do linijki), wpisz 6206 i wciśnij enter. Po przejściu do linijki upewnij się, że to ten odpowiedni if, który potrzebujesz sprawdzić (w razie czego porównaj kod z tym podlinkowanym wyżej z kodu źródłowego libki) i kliknij lewym przyciskiem myszy w numer tej linijki - postawi się breakpoint. Następnie odśwież stronę i debugger zatrzyma się tam przed rzuceniem błędu (który jest w else). Najedź myszką na zmienną object (albo wpisz jej nazwę do konsoli i wciśnij enter), a potem analogicznie dla jej property i pokaż screen.

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Mam jedynie linijke taką:

if (this.object && this.object.fromDeclaration === false) {

Dokładnie takiej

if ( object && object.isObject3D ) {

nie ma

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

A, sorki, bo patrzyłem na wersję niemodularną. W modularnej (z tego komentarza) to jest linia 6707.

P.S. Tylko, że ten if występuje w obu wersjach, więc może patrzysz na inny plik? W modularnej wersji plik nazywa się three.module.js

komentarz 10 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

https://imgur.com/a/nR9yR6w

6707 ale to nie IF

komentarz 10 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Uh, a linia 7027?

komentarz 11 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Ok, jest :)

Która to zmienna obejct o której mówisz i jak właczyć to property?

https://imgur.com/a/a6lBTlM

komentarz 11 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Przecież ta zmienna jest użyta w tym if - napisałem wyżej jak możesz ją sprawdzić. Najedź myszką na zmienną object, albo wpisz jej nazwę w konsoli i wciśnij <enter> (w momencie, gdy kod jest zatrzymany w debuggerze) i pokaż co tam jest.

komentarz 14 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Dziękuję, Wrócę do tego za kilka dni.

komentarz 20 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@ScriptyChris,

Cześć Chris,

wracając do tematu.. chcę postawić breakpoint tak jak wspominałeś, ale w ogóle nie mogę zaznaczyć - próbuje i lewym i prawy i nic.

https://imgur.com/a/2qH7cVl

komentarz 20 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Zrób to w zakładce Sources, tam gdzie debuguje się kod.

komentarz 29 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Wracam ponownie do tematu.

https://imgur.com/a/iMkj2Qt

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

No i czym jest property object.isObject3D w tym if?

komentarz 29 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Gdy najadę myszką na object

https://imgur.com/a/OBC4NPL

a gdy na object.isObject3D mam wartość true

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, to włącz breakpoint aktywowany rzuconym wyjątkiem (dodatkowo możesz zaznaczyć zatrzymywanie na złapane wyjątki - pkt 3 na liście z linka) i puść kod (klawisz F8) - powinno się zatrzymać na linijce, która powoduje błąd.

komentarz 29 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Hmm..jak sam możesz zauważyć na linku który wysłałem nie mam tego pola Pause On Caught Exceptions

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Bo to pole jest ukryte pod przyciskiem z ikoną pauzy (trzeba w niego najpierw kliknąć). Jest to opisane w dokumentacji, którą podlinkowałem w poprzednim komentarzu.

komentarz 29 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Kurcze, nie wiem czy dobrze to wykonuje. Nie zatrzymuje mi się na żadnej linijce w kodzie, ale wyskakują takie błędy.

https://imgur.com/a/ovGfIHd

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

To w tym skrypcie, gdzie postawiłeś breakpoint w if, przejdź do linijki 6722 (na nią wskazuje pierwszy błąd z konsoli) i postaw w niej nowy breakpoint. Odśwież stronę i sprawdź wtedy czy się tam zatrzyma - możesz tymczasowo odznaczyć pierwszy breakpoint, żeby nie zatrzymywał się na tamtym if. Jeśli kod tym razem zatrzyma się na błędzie, to wtedy podejrzyj czym jest object i jego property isObject3D.

komentarz 30 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

https://imgur.com/a/h0Crrb6

natomiast isObject3D ma undefined.

komentarz 30 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

No to wiadomo skąd się bierze błąd. Teraz pytanie, dlaczego tam jest undefined? ;) To na screenie wygląda trochę tak, jakby to był pusty obiekt/model. Nie mając pełnego obrazu sytuacji dla pobierania tego modelu, to moim zdaniem albo ścieżka jest zła, albo to co pobierasz nie jest zgodne z formatem tej biblioteki.

komentarz 30 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

A jak sprawdzić format biblioteki?

Mam w kodzie

const loader = new OBJLoader();
loader.load('image.obj');

a pliki to image.obj i image.mtl.

Może jakoś trzeba pobrać również ten materiał?

komentarz 30 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, możliwe, że trzeba podać źródło do pliku MTL.
https://threejs.org/docs/#examples/en/loaders/OBJLoader.setMaterials

Tutaj jest jakiś przykład połączenia jednego z drugim: https://stackoverflow.com/a/35248011/4983840

komentarz 30 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
edycja 30 kwietnia 2021 przez Kubs

Ok, spróbuje.

komentarz 2 maja 2021 przez Kubs Mądrala (5,190 p.)

@ScriptyChris, Mimo to coś nie działa

const loader = new OBJLoader();
loader.load('image.obj');

new THREE.MTLLoader()
.load(MTLFile, function (materials) {
    materials.preload();
    new THREE.OBJLoader()
        .setMaterials(materials)
        .load(OBJFile, function (object) {
            object.position.y = - 95;
            var texture = new THREE.TextureLoader().load("image.mtl");

            object.traverse(function (child) {   // aka setTexture
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                }
            });
            scene.add(object);
        });
});

komentarz 2 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ale co nie działa i co w ogóle robi ten kod?

komentarz 3 maja 2021 przez Kubs Mądrala (5,190 p.)

Tzn. wciąż jest ten sam błąd. Mimo, że w kodzie jest ładowany image.mtl

1 odpowiedź

odpowiedź 8 kwietnia 2021 przez Tomek Sochacki Ekspert (227,510 p.)

a nie powinno być

const loader = new OBJLoader();
loader.load('image.obj');

? tak chyba wynika z dokumentacji patrząc tak na szybko: https://threejs.org/docs/#examples/en/loaders/OBJLoader

W ogóle ktoś już niedawn pytał chyba o to samo, poszukaj w historii wątków.

komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

a nie powinno być

Raczej nie, bo drugi skrypt przypisuje konstruktor OBJLoader pod globalny obiekt THREE.

ktoś już niedawn pytał chyba o to samo

Ten sam autor, tylko teraz inny problem: https://forum.pasja-informatyki.pl/535511/jak-zaladowac-plik-obj-do-three-js

komentarz 8 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@Tomek Sochacki,

gdy na to zmienię to mam błąd:

Uncaught ReferenceError: OBJLoader is not defined
    at main.js:26

komentarz 8 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@Tomek Sochacki,

Wygląda na to, że muszę:

dodać

import { OBJLoader } from './jsm/loaders/OBJLoader.js';

i wtedy

new THREE.OBJLoader();

tyle, że muszę zaimportować jakiś moduł. To jest chyba to npm? Ale czy można odnieść się do niego za pomocą tylko linku zamiast pobierać w całości?

komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Kubs, tłumaczyłem Ci w poprzednim temacie, że są dwa sposoby na dodanie tego konstruktora: przez globalny obiekt, albo przez moduł - nie mieszaj ich. Moduł możesz również podpiąć jako skrypt, tyle że wtedy ustawiasz mu type="module" i wtedy możesz w tym skrypcie użyć składni import/export.