Jak załadować plik obj do THREE.js ?

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

Witajcie,

mam już trochę kodu (kamera, światło, itp.) i wszystko działa. Gdy chcę wyświetlić obj pojawia się błąd 'Uncaught TypeError: THREE.OBJLoader is not a constructor'

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

scene.add(loader);

Jak dodać konstruktor by obraz obj pojawił się na ekranie?

komentarz 1 kwietnia 2021 przez Tomek Sochacki Ekspert (227,510 p.)

Nie znam tej libki, więc w myśl zasady "nie znam się to się wypowiem" :) zapytam - czy na pewno to powinno być wołane na obiekcie THREE? na szybko w dokumentacji widzę nieco inaczej: https://threejs.org/docs/#examples/en/loaders/OBJLoader

Ale jak pisałem nie pracowałem z tą libką, więc to tylko sugestia.

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

Też tak próbowałem, ale wtedy mam błąd:

Uncaught ReferenceError: OBJLoader is not defined

2 odpowiedzi

odpowiedź 1 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czy konstruktor OBJLoader to nie jest aby globalna zmienna? Spróbuj po prostu const loader = new OBJLoader();

https://threejs.org/docs/index.html?q=objloader#examples/en/loaders/OBJLoader

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

Też tak próbowałem, ale wtedy mam błąd

Uncaught ReferenceError: OBJLoader is not defined

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

W jaki sposób podpinasz tę bibliotekę?

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

<body>

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

Ale może w tej nie ma konstruktorów obj. Albo już w ogóle się zakręciłem.

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

Hmm, faktycznie w tym pliku nie ma OBJLoader. Z tego, co się zorientowałem, to są dwa sposoby, aby podpiąć ten skrypt:

przez moduł, stąd - wtedy musisz najpierw zaimportować główny moduł three-js, a dopiero potem obj-loader → instrukcja jak to mniej więcej zrobić
lub stąd: podepnij link do tego skryptu przed Twoim main.js i wtedy będziesz mógł wywołać konstruktor tak jak próbowałeś, przez new THREE.OBJLoader()

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

Stosuje się do twojego drugiego sposobu. Dodałem link, ale jest błąd:

Uncaught SyntaxError: Cannot use import statement outside a module

wstawiłem więc type="module" czyli:

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

i teraz mam dwa błędy:

OBJLoader.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Uncaught SyntaxError: Cannot use import statement outside a module

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

Podpiąłeś link do skryptu, który nie jest modułem i przypisuje funkcję OBJLoader pod globalny obiekt THREE. Skrypt z modułem to ten, który w linku ma /jsm/, a nie /js/.

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

Rozumiem. Co do drugiej opcji wciąż się głowie jak to zrobić :)

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

Którą drugą opcją? Podpięcie skryptu przypisującego konstruktor pod globalny obiekt?

<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>

Pomiędzy dwa skrypty, które miałeś (libka Three oraz Twój skrypt), wrzucasz podpięcie tego co podlinkowałem.

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

lub stąd: podepnij link do tego skryptu przed Twoim main.js i wtedy będziesz mógł wywołać konstruktor tak jak próbowałeś, przez new THREE.OBJLoader()

<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>

oraz main.js

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

Czyli brakuje tylko zainstalowania npm. Czy znasz może jakiś tutorial godny polecenia, który krok po kroku tłumaczy jak to zainstalować. Jakoś mnóstwo jest tych komend i jako totalny laik w temacie, gubię się.

Do czego w ogóle jest ten npm?

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

Jeśli korzystasz ze sposobu na pobranie OBJLoader-a jako rozszerzenie globalnego obiektu, to npm nie będzie Ci potrzebny - ba, w przypadku sposobu z pobraniem modułu npm również nie powinien być Ci potrzebny, bo moduł możesz zaimportować bezpośrednio do przeglądarki.

Skoro już stosujesz się do sposobu z pobraniem skryptu rozszerzającego globalny obiekt, to co Ci nie działa, skoro pytasz o sposób z pobraniem modułu?

Do czego w ogóle jest ten npm?

npm to rejestr i manager paczek dla Node.js.

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

Mam błąd

Uncaught SyntaxError: Cannot use import statement outside a module

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

Ten błąd rzuca kod z tego komentarza? Jeśli tak, to dziwne, bo na CodePen działa → https://codepen.io/ScriptyChris/pen/XWpaMmX

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

Tak, z tego komentarza.

A spróbuj jeśli możesz dołączyć tam jakiś image.obj. bo może tu jest problem, hmm.

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

A czego konkretnie tyczy się ten błąd? Czy masz jakieś inne podpięcia skryptów związane z Three.js lub importujesz gdzieś moduł?

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

Gdy wyrzucam tą linijkę:

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

to pojawia mi się bryła którą stworzyłem wcześniej i wszystko gra. Ale chodzi przecież o to, żeby załadować własny plik obj. Mam go podłączonego, ale nie działa.

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

Coś mieszasz w tym kodzie. :) Powyższy kod zadziała, gdy skrypt jest modułem. Jeśli nie potrzebujesz go jako moduł, to możesz po prostu użyć drugiego sposobu i tyle.

Ale chodzi przecież o to, żeby załadować własny plik obj. Mam go podłączonego, ale nie działa.

Zapewne musisz ten plik serwować z backendu, bo ta biblioteka używa Ajaxa do pobierania plików. W konsoli powinien być jakiś błąd odnośnie nieudanego pobrania, ale inny niż związany z modułem (skoro i tak usunąłeś kod importujący).

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

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

oraz main.js

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

Błąd:

Uncaught TypeError: THREE.OBJLoader is not a constructor

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

Ten skrypt nie jest modułem, więc nie ładuj go jako takowy - tłumaczyłem to kilka komentarzy wyżej. Podpięcia w taki sposób powinny działać, tylko kwestia przekazania prawidłowego URL-a modelu jako parametru do metody loader.load.

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

Niby nie ma błędu, ale dalej nie widać obrazu obj. Stwierdziłem, że wyrzucę kod związany z pokazaniem cube, bo może on przesłania ten obraz obj.

No to teraz znowu mam błąd

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

odpowiedź 1 kwietnia 2021 przez lapa19904 Stary wyjadacz (11,560 p.)

Wysłałem Ci pm z linkiem od swojego repo gdzie to jest ogarnięte. Mebel który ma różne tekstury na rożnych ścianach bryły. Resztę proszę o wybaczanie ale nie chcę udostępniać publicznie tego konkretnego repo i mam ku temu swoje powody :)