Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output.

three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found)

I made various efforts to resolve this error but unfortunately, I couldn't find any suitable solutions. If you would like to refer to my previous question regarding this issue, please visit Text Loader is not loading in THREE.js

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
import typefaceFont from "./fonts/helvetiker_regular.typeface.json";

/**
 * Fonts
 */
const fontLoader = new FontLoader();

fontLoader.load(typefaceFont, (font) => {
  const textMaterial = new THREE.MeshBasicMaterial();

  const textGeometry = new TextGeometry("Hello Three.js",
   {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        beveloffset: 0,
        bevelSegments: 5
    }
  );

  const text = new THREE.Mesh(textGeometry, textMaterial);
  scene.add(text);
});
/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader();

/**
 * Object
 */
// const cube = new THREE.Mesh(
//     new THREE.BoxGeometry(1, 1, 1),
//     new THREE.MeshBasicMaterial()
// )

//scene.add(cube)

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

Answer №1

You're facing an issue directly related to the error message you received.

http://192.168.8.104:8080/[object%20Object]

This error indicates that you are trying to pass an object as a URL, which can be identified by the following code snippets...

import typefaceFont from "./fonts/helvetiker_regular.typeface.json";

fontLoader.load(typefaceFont, (font) => {
  //...
});

The problem lies in importing a JSON file and passing the imported value into the load function.

If you are using a bundler like webpack, rollup, or parcel, the import statement brings in the data as an Object.

However, the load function expects a URL provided as a String.

To resolve this issue with the font loader, remove the import and directly pass the URL string:

fontLoader.load("./fonts/helvetiker_regular.typeface.json", (font) => {
  //...
});

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

essential elements for mapping an array using typescript

Struggling to iterate through an array of objects, each with a unique id created by uuidv4(), resulting in a string type. TypeScript is giving errors (( Type 'String' is not assignable to type 'Key | null | undefined')) due to the &apos ...

"Using axios and async/await in VUE.JS to perform multiple asynchronous GET

Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari a ...

The jQuery scripts are having trouble cooperating

Currently, I am in the process of developing a website. The main focus at the moment is on creating a responsive menu and incorporating jQuery scripts. However, I seem to be facing some challenges in getting everything to work seamlessly together. Each scr ...

Display an HTML checkbox with intricate design features

I have a simple question - how can I print a green checkbox with a white check mark (Ctrl + P) without it turning black and white? This solution currently works with Bootstrap 4.0.0, but needs to be compatible with bootstrap 3.3.7. I've managed to cr ...

Exploring the Adjustment of State as well as Function in Next/React JS

I'm facing a challenge in my React project where I need to manage state and trigger a function across separate component files. Specifically, I have my main app file along with two components (header and sidebar) stored in the components folder. The h ...

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

It seems like there is an issue with the res.render function as it is

My goal is to capture an input from my main website. Once the input is submitted, the page should automatically redirect to /view. Despite successfully triggering the redirection with console.log(), the res.render function does not seem to be working as ex ...

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

What could be causing the computed property in Vue 2 component to not return the expected state?

I'm encountering an issue with my Vue component where it fails to load due to one of its computed properties being undefined: Error: Cannot read properties of undefined (reading 'map') Here is the snippet of the computed property causing ...

Using the width property to style a div element

There are two div elements in my HTML, each with a specified width. However, I want both divs to take up the full space as designated in the width property, regardless of the content inside them. Currently, the divs adjust their size based on the content a ...

The React lifecycle method componentDidMount is failing to execute

In my React application, I have the following route setup: <Route path={`${this.props.match.path}horoskop`} render={() => <HoroscopeController horoscopeService={this.horoscopeService} fortuneTellerService={this.fortuneTell ...

Inability to submit page after clicking on lower half of button while eliminating validations

In my current Struts2 application, I am encountering a issue related to validations on textfields. The validations include checks for missing values and incorrect values. Below these fields, there is a button that should submit the form once all validation ...

Puppet Master: Retrieve the inner content

Is there a way to retrieve the innerHTML or text of an element? Or even better, how can I click on an element with a specific innerHTML? The approach in regular JavaScript would be as follows: let found = false; $(selector).each(function() { if (found ...

CSS3 Perspective Issue: Solutions for Fixing

I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structur ...

Discovering the dimensions of a video in Angular 2 using TypeScript

To determine whether the video is portrait or landscape, I am attempting to retrieve the height and width of the video using the following method: import { Component, OnInit, AfterViewInit } from '@angular/core'; @Component({ selector: ' ...

Tips for positioning elements in the header section

I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...

Whenever I attempt to update content in my database using an HTML form, I encounter an issue where if I enter a single quote character in the input field, the SQL update operation fails

Whenever I fill out a basic form and include an apostrophe or single quote, the query breaks and the data is not added to my database. How can I prevent this issue? Form Example <form method="POST" action="#"> <table> < ...

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...