Mam pewne problemy dowiedzieć się, jak uzyskać GLTFloader do pracy w trzech.js. Nie rozumiem, jak korzystać z witryny CDN do hostowania pliku. Próbowałem użyć linków z przykładów wokół sieci, ale to nie zrobiło dla mnie pracy. Czytałem na innym poście, że plik GLTFLOADER musiał być tymi samymi wersjami, który rdzeniowy trzy plik, używam (R121).

Myślałem, że mogę udać się do Mrdooba Githuba (nie zaznajomił, jak korzystać z Githuba) i kliknij Plik RAW, a następnie użyj tego linku na stronie jak Githack, aby wygenerować link CDN i dodać go jako skrypt w moim HTML lub zaimportować go do mojego JS Plik, ale to nie zadziałało.

Jeśli to jest sposób, aby to zrobić, to nie działa. W moim kodzie, kiedy wpisuję:

let loader = new GLTFLoader();  //from the docs

//or

let loader = new THREE.GLTFLoader(); //not from the docs

Dostaję jeden lub drugi z tych dwóch błędów: UREACHUCHED REENDENDError: Gltfloader nie jest zdefiniowany ani nieudienny TypeError: Three.Gltfloader nie jest konstruktorem

Byłem w tym godzinę i nie mam pojęcia, co robić.

Codeben https://codepen.io/jfirestorm44/pen/rwrpjdays?editors=00109/ \ t A >.

Tutorial, podążam, jeśli ma znaczenie: HTTPS : //tympanus.net/Codrops/2019/10/14/how-to-create-an-interactive-3d-character--Three-JS/.

3
Justin 18 październik 2020, 07:00

1 odpowiedź

Najlepsza odpowiedź

Upewnij się, że import dla trzech.js i Glrploader w pliku HTML są umieszczone przed własnym skryptem. Lubię umieścić własne skrypty na samym dole mojego pliku HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" integrity="sha512-yNJzAsg5JyP91u+sLHlUDULMBd3hmEiVkYeeN1cQBKaLZ7EyT6oH2u5THNIRM2Fu6VKcZJv+F/QAp1h/qzy9Ow==" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

Aktualizacja: powyższy link CDN zawsze wskazuje na najbardziej zaktualizowany GLTFLOADER, który może nie być kompatybilny z tyłu. Zamiast tego użyj określonych tagów:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>

W skrypcie nie będziesz potrzebował dodatkowego importu, po prostu zadzwoń do ładowarki

const gltfLoader = new THREE.GLTFLoader();

Innymi słowy, następujący kod jest redundantowany, używasz importu HTML podanego powyżej.

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js";

Przykład pracy:

Index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- css imports-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js">
    </head>
    <body>
      <!-- body -->
    </body>

    <script type="text/javascript" src="/static/myscript.js"></script>
</html>

Myscript.js.js.

const gltfLoader = new THREE.GLTFLoader();
4
Eiron 25 luty 2021, 13:01