Мой файл glb не загружается в файл Three.js

Мой файл glb не отображается в моем мире thee.js. Я следовал всей документации и руководствам, но ничего не работает. мир загружается, и все работает нормально, просто мод не появляется. Пожалуйста, помогите мне, я собираюсь создать игру, полностью написанную на html/js, и у меня приличный опыт работы с js. Пожалуйста, сохраняйте код как можно более оригинальным и удачи. Я использовал переполнение стека только один раз, поэтому извините, если это плохое описание. Этот файл находится в той же папке, что и файл кода. Я знаю, что это длинный фрагмент кода, но я хотел убедиться, что вы можете видеть весь код, если это нечто большее, чем просто мой импорт. Я не знаю, что еще сказать, так что извините, я просто немного задержался. Если вы можете, пожалуйста, объясните разными простыми словами, что было не так и как вы это исправили. Мне приходится продолжать тормозить, потому что кода слишком много. Я не знаю, как долго мне придется продолжать это печатать. Еще раз извините за задержку, я просто не могу это подробно описать. Я действительно полагаюсь на переполнение стека и буду рад, если вы мне поможете.

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8" />
    <title>My first three.js app</title>
    <style>
       body { margin: 0; }
       #info {
      position: absolute;
      top: 10px;
      width: 100%;
      text-align: center;
      z-index: 100;
      display:block;
       }
    </style>
    <script src = "https://threejs.org/build/three.js"></script>
    <script type = "importmap">
      {
        "imports": {
          "three": "https://unpkg.com/[email protected]/build/three.module.js",
          "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
          "cannon-es": "https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.min.js"
        }
      }
    </script>
  </head>
  <body>
    <div id = "info">0</div>
    <script type = "module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { Clock } from "three";
      import { PointerLockControls } from "three/addons/controls/PointerLockControls.js";
      import * as CANNON from "cannon-es";
      import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      const score = document.getElementById("info");
      let points = 0;
      let colide = false;
      let checkK = false;
      let Name;
      let boddy;

      const clock = new Clock();
      const world = new CANNON.World();
      world.gravity.set(0, -9.82, 0);
      const loader = new GLTFLoader();

      const physicsMaterial = new CANNON.Material();
      const physicsContactMaterial = new CANNON.ContactMaterial(
        physicsMaterial,
        physicsMaterial,
        { friction: 0.4, restitution: 0.0 }
      );

      


      world.addContactMaterial(physicsContactMaterial);

      function createCannonBox(size, position, masss) {
        this.shape = new CANNON.Box(
          new CANNON.Vec3(size.x / 2, size.y / 2, size.z / 2)
        );
         this.body = new CANNON.Body({
          mass: masss,
          material: physicsMaterial,
        });
        this.body.addShape(this.shape);
        this.body.position.copy(position);
        world.addBody(this.body);
        return this.body;
      }
      function createCannonBall(size, positionn, masss) {
         this.shape = new CANNON.Sphere(size);
         this.body = new CANNON.Body({
          mass: masss,
          material: physicsMaterial,
          shape: this.shape
        });
        this.body.position.copy(positionn);
        world.addBody(this.body);
        return this.body;
      }
      function createCannonKnot(size, position) {
        const Sshape = new CANNON.Sphere(size);
        const Sbody = new CANNON.Body({ mass: 1, material: physicsMaterial });
        Sbody.addShape(Sshape);
        Sbody.position.copy(position);
        world.addBody(Sbody);
        return Sbody;
      }
      function CreateTrimesh(geometry) {
        const vertices = geometry.attributes.position.array;
        const indices = Object.keys(vertices).map(Number);
        return new CANNON.Trimesh(vertices, indices);
      }

      const groundShape = new CANNON.Plane();
      const groundBody = new CANNON.Body({
        mass: 0,
        shape: groundShape,
        material: physicsMaterial,
      });
      groundBody.quaternion.setFromAxisAngle(
        new CANNON.Vec3(1, 0, 0),
        -Math.PI / 2
      );
      world.addBody(groundBody);

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.z = 3;
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      const Oloader = new OBJLoader();

      const concreteTexture = new THREE.TextureLoader().load(
        "https://threejsfundamentals.org/threejs/resources/images/wall.jpg"
      );
      const controls = new PointerLockControls(camera, document.body);

      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshPhysicalMaterial({
        color: 0x00ff00,
        map: concreteTexture,
        clearcoat: 0.1,
      });

      const cube = new THREE.Mesh(geometry, material);
      cube.castShadow = true;
      scene.add(cube);
      
      // here is my attempt

      loader.load( '../free_1975_porsche_911_930_turbo.glb', function ( gltf )
    {
      const sword = gltf.scene;  // sword 3D object is loaded
      sword.scale.set(1, 1, 1);
      sword.position.y = 1;
      scene.add(sword);
    } );

      

      const cubeBody = new createCannonBox(
        new THREE.Vector3(1, 1, 1),
        new CANNON.Vec3(0.5, 4, 0),
        1
      );

      const Sgeometry = new THREE.SphereGeometry(0.5, 40, 20);

      const ball = new THREE.Mesh(Sgeometry, material);
      ball.castShadow = true;
      scene.add(ball);
      const ballBody = new createCannonBall(
        0.5,
        new CANNON.Vec3(0.5, 20, 0),
        1
      )


      

      const cube2 = new THREE.Mesh(geometry, material);
      cube2.castShadow = true;
      scene.add(cube2);
      const cubeBody2 = new createCannonBox(
        new THREE.Vector3(1, 1, 1),
        new CANNON.Vec3(0, 2, 0),
        0
      );

      const groundMaterial = new THREE.MeshPhysicalMaterial({
        map: concreteTexture,
        clearcoat: 1,
        clearcoatRoughness: 1,
        metalness: 0.9,
      });

      const groundGeometry = new THREE.PlaneGeometry(20, 20, 100, 100);
      const ground = new THREE.Mesh(groundGeometry, groundMaterial);
      ground.rotation.x = -Math.PI / 2;
      scene.add(ground);

      scene.background = new THREE.Color(0x87ceeb);

      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(0, 15, 5);
      light.castShadow = true;
      scene.add(light);
      const light2 = new THREE.AmbientLight(0x404040);
      scene.add(light2);

      light.shadow.camera.near = 0.1;
      light.shadow.camera.far = 40;
      light.shadow.mapSize.width = 1025;
      light.shadow.mapSize.height = 1025;
      light.shadow.radius = 4;

      renderer.shadowMap.enabled = true;

      light.shadow.camera.left = -10;
      light.shadow.camera.right = 10;
      light.shadow.camera.top = 10;
      light.shadow.camera.bottom = -10;
      light.shadow.bias = -0.002;

      camera.position.y = 1;

      var keys = {};
      window.addEventListener("keydown", function (ev) {
        keys[ev.key] = true;
      });
      window.addEventListener("keyup", function (ev) {
        keys[ev.key] = false;
      });
      window.addEventListener("keydown", function (ev) {
        if (ev.code == "KeyE") {
          checkK = !checkK;
        }
      });

      const moveVector = new THREE.Vector3();
      const setVector = new CANNON.Vec3();

      camera.rotation.order = "YXZ";

      const initialCubePosition = cube.position.clone();
      const initialCubePosition2 = cube2.position.clone();
      const initialBallPosition = ball.position.clone();

      const resetInterval = 2.0;
      let lastResetTime = clock.elapsedTime;

      function check() {
        cubeBody2.addEventListener("collide", function (e) {
          colide = true;
         // name = cube;
          //boddy = cubeBody;
        });
        cubeBody.addEventListener("collide", function (e) {
          Name = cube;
          boddy = cubeBody;
        });
        ballBody.addEventListener("collide", function (e) {
          Name = ball;
          boddy = ballBody;
        });
      }

      function go() {
        if (keys.w) moveVector.z -= 0.1;
        if (keys.s) moveVector.z += 0.1;
        if (keys.a) moveVector.x -= 0.1;
        if (keys.d) moveVector.x += 0.1;
        if (keys.c) moveVector.y -= 0.1;
        if (keys.v) moveVector.y += 0.1;
        if (checkK && colide && keys.e) (checkK = false), (colide = false), (boddy.mass = 1);
        if (keys.m) controls.lock();

        moveVector.multiplyScalar(0.6);
        camera.translateX(moveVector.x);
        camera.translateZ(moveVector.z);
        camera.translateY(moveVector.y);

        if (colide && checkK) {
          boddy.mass = 1;
          boddy.quaternion.copy(camera.quaternion);
          Name.position.copy(camera.position);
          Name.translateX(moveVector.x);
          Name.translateY(moveVector.y);
          Name.translateZ(moveVector.z - 3);
          boddy.position.copy(Name.position);
        }
        score.innerText = checkK;
        cube.position.copy(cubeBody.position);
        cube.quaternion.copy(cubeBody.quaternion);
        ball.position.copy(ballBody.position);
        ball.quaternion.copy(ballBody.quaternion);
        cube2.position.copy(cubeBody2.position);
        cube2.quaternion.copy(cubeBody2.quaternion);
        cubeBody2.position.copy(camera.position);
        if (clock.elapsedTime - lastResetTime >= resetInterval) {
          lastResetTime = clock.elapsedTime;
        }
      }

      function animate() {
        const delta = clock.getDelta();
        world.step(delta);
        check();
        go();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
      }

      animate();
    </script>
  </body>
</html>

Файл glb для загрузки в видимый

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
209
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поместите файл GLB в общедоступный каталог (он не обязательно должен называться так) и получите доступ к файлу, используя абсолютный путь. например:

loader.load( '/public/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code 
});

или в вашем случае:

loader.load( '/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code 
});

Начальная буква / обозначает корень веб-сайта, и путь к ресурсу начинается здесь.

Типичная структура папок одностраничного веб-сайта JavaScript:

project-root/
│
├── assets/
│    ├── js/
│    │  └── script.js
│    │  └── target2.glb <- (this not typical)
│    ├── css/
│    │  └── style.css
│    ├── models/
│    │  └── target.glb
│    ├── images/
│    └── fonts/
│
└── index.html

Чтобы script.js получил доступ к target.glb или targer2.glb, это можно сделать двумя способами: путь absolute или путь relative.

Относительные пути указываются относительно текущего местоположения файла, например.

  • '../models/target.glb' и .. (точка-точка) обозначают родительский элемент. каталог (assets).
  • './target2.glb' и . (точка) обозначают текущий каталог (js)

Абсолютные пути предоставляют полный путь от корневого каталога к файлу, например.

  • '/assets/models/target.glb'.
  • '/assets/js/target2.glb'.

И сначала / представим каталог root (project-root).

если у вас следующее,

project-root/
│
├── style.css
├── script.js
├── target.glb
└── index.html <- (maybe accessing from embedded script)

тогда подойдет /target.glb, но это не рекомендуемый способ структурирования файлов.

Надеюсь, это поможет.

Этот код выполняется на школьном Chromebook и представляет собой папку со сценарием и файлом GLB. Что такое общедоступный каталог и как поместить в него файл?

Blaze Branham 24.04.2024 19:17

@BlazeBranham Я добавил некоторые пояснения к своему ответу.

Amelio 25.04.2024 00:56

Я на 100% уверен, что это исправление, и ваше объяснение было отличным, и теперь я понимаю, что вы имеете в виду. Я думаю, что причина, по которой оно не работает, заключается в том, что мой Chromebook настроен так, что школа может его контролировать, и это предотвращает некоторый код. от работы. Огромное спасибо за вашу помощь, я буду использовать эту информацию в будущих проектах!

Blaze Branham 25.04.2024 16:42

ЭТО РАБОТАЛО, Я СДЕЛАЛ ТО, ЧТО ВЫ СКАЗАЛ, И ЗАпустил ЭТО НА REPLIT ВМЕСТО ПРОСТО ЗАПУСКА В БРАУЗЕРЕ, И ЭТО СРАБОТАЛО. СПАСИБОУУУ

Blaze Branham 26.04.2024 22:07

@Блейз Бранхам Отлично. Рад, что вы добились успеха.

Amelio 26.04.2024 22:10

Другие вопросы по теме