What steps can I take to resolve the error message "TypeError: url.lastIndexOf is not a function" in three.js?

I am currently experimenting with loading a gLTF file in Three.js r105. After successfully loading the file, I decided to try changing the URL post-loading to see if it was possible. However, this decision led me straight into a problem.

Initially, I attempted to modify the URL within the "onLoad" function. When that didn't work, I moved on to trying to change it within my gltf.scene.traverse method. Unfortunately, that also did not yield the desired result, so I resorted to turning the input into a function as the URL parameter.

var loader = new THREE.GLTFLoader().load( function () {
window.setTimeout(`this = 'gmtk.glb', alert('It changed');`, 5000);
    **return "sword_1.glb";**
},

I was hoping to at least see my gLTF file rendered, but instead, my entire scene turned black. The console displayed an error:

three.js:38135 Uncaught TypeError: url.lastIndexOf is not a function
    at Object.extractUrlBase (three.js:38135)
    at GLTFLoader.load (GLTFLoader.js:40)
    at Kube.js:31
javascriptthree.jsgltf

Answer №1

If you encounter issues adding an HTTP URL to the GLTF loader, remember that it is not permitted. You should consider converting it to a BLOB format.

In order to do this, utilize the new BLOB(Response.data) syntax and substitute the response.data with the old URL

   const url = window.URL.createObjectURL(new Blob([response.data]));
   this.loaders.gltfLoader.load(url , (file)=>{
       
   });

Following these steps will ensure that the loader functions without any errors

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data binding functions properly only when utilizing the syntax within the select ng-options

In the book AngularJS in Action, I came across this Angular controller: angular.module('Angello.Storyboard') .controller('StoryboardCtrl', function() { var storyboard = this; storyboard.currentStory = null; ...

javascripthtmlangularjs

What is the method for linking events across multiple objects?

When a user clicks on the confirmation button in a Twitter Bootstrap modal window, I trigger a deletion action on the page. The modal contains two buttons - one for canceling the action and another for confirming it. Once the user confirms the delete act ...

javascriptjquerytwitter-bootstrapjquery-events

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

javascriptjqueryhtmlwordpressforms

Transform a text with HTML tags into sentences while preserving the separators in Javascript

Here is a unique string with some embedded HTML code: This is the first sentence. In the second sentence, there is a <a href="http://google.com">Google</a> link! The third sentence may have an image like <img src="http://link.to.image.com/h ...

javascript

Unable to stop the default action in IE for certain code

I am facing an issue on my website where the JavaScript I have implemented to prevent page reload is not working in Internet Explorer. The code functions properly in all other browsers, except IE. Here is the JavaScript code snippet that should prevent pa ...

javascriptjquerypreventdefault

Guide on redirecting the user to the "notFound" page within the getServerSideProps function in Next.JS whenever an incorrect params.id is provided

export const getServerSideProps = async ({ params }) => { const res = await fetch( `https://pixabay.com/api/?key=${process.env.API_KEY}&id=${params.id}` ); const { hits } = await res.json(); if (!hits) { return { notFound: tr ...

javascriptnode.jsreactjsreact-nativenext.js

Storing the output of a GET request in a text file can lead to a never-ending loop

After attempting to save a String obtained from a GET request into a text file, I encountered an unexpected infinite loop issue. It seems that without utilizing created(), the process fails entirely, resulting in story remaining empty. <div id="app"> ...

javascriptvue.jsaxios

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

javascriptjqueryhtml

What is the best way to retrieve both a response JSON and headers using Got?

Currently, I am utilizing Got for sending requests to a Strapi API from Node.js. The code snippet demonstrates how I achieve this: res.setHeader('Content-Type', 'application/json') try { const request = req.query.request const decod ...

javascriptnode.jsnode.js-got

Regarding a listener within a quiz game's event system

I'm dealing with an issue in my quiz-game. I'm curious if I need to implement an event-listener for refreshing the initial page with a question and 4 options. Can anyone guide me on how to do this? My questions are stored using JSON. Here is the ...

javascripthtmladdeventlistener

jQuery creates unique IDs for every keypress event triggered

Hey there, I'm currently working on developing a space shooting game using jquery and jquery-collision. I've made great progress so far, but I'm facing an issue. Whenever I press the spacebar to shoot, it keeps generating divs with the same ...

javascriptjqueryhtmljquery-collision

Retrieve Files with Angular Framework

I'm looking to implement a file download or view button using Angular without making a call to the backend. The file is static and the same for all users, so I want to avoid unnecessary server requests. Many solutions involve using the "download" att ...

javascriptangularjsdjangohtml

A plethora of color choices in a Multi-select Box

Hi there! I am facing an issue with dynamically adding multiple select boxes. Currently, I have 4 color-coded options under the selection boxes, which work fine when there is only one box. However, when I add more than one select box, the color coding doe ...

javascriptjqueryhtmlcss

Secure access to an API using a certificate within a Vue.js application running on localhost

My vue.js app is built using vue-cli. The application is hosted at dev.example.com and the REST API can be found at dev.example.com/api/v1/. The backend has added an SSL certificate for security on the development environment. However, when I try to make a ...

javascripthtmlvue.jssslvue-cli

Is it possible to precisely position multiple children in a relative manner?

I am currently developing a custom dropdown menu where I want the parent element to be relatively positioned within the page. The goal is for all the child elements of the dropdown menu (the list items) to appear as if they are part of a select element and ...

javascripthtmlcss

Tips for retrieving the text enclosed within a <span> tag using jQuery

I am new to jQuery and came across this code online for a questionnaire. I want to save the selected options but I am not sure how to do it. " $.fn.jRadio = function (settings)" What is the purpose of this setting? " var options = $.extend(_de ...

javascriptjquery

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

After following the suggestion to implement a catch all route from this article, I realized that it does not capture URLs that partially match a defined route. routes: [ { path: "/album/:album", name: "album", component: Album, } ...

javascriptvue.jsredirectvue-router

Is it possible to combine the use of 'res.sendFile' and 'res.json' in the same code?

At the moment, my Express app utilizes a controller to manage routing. When a specific route is accessed, I trigger pagesController.showPlayer which sends back my index.html. This is what the controller looks like: 'use strict'; var path = requ ...

javascriptnode.jsexpress

Should we be validating passwords through mongoose middlewares - is this the right approach?

I am currently using the validator package for email validation in my project. const validator = require('validator'); email: { type: String, required: [true, 'User must have a email'], unique: true, lowercase: true, / ...

javascriptnode.jsmongodbexpressmongoose

Creating a file solely for route definitions and then employing them within index.js

My index.js file contains the following routes: import { createRouter, createWebHistory } from '@ionic/vue-router'; import { RouteRecordRaw } from 'vue-router'; const routes = [{ path: '', redirect ...

javascriptvue.jsionic-framework