Text is not loading in THREE.js

I tried to code Text render in THREE.js and after running the code I have got an error like this

GET 404 (Not Found)

and I checked the path and it was correct but still im getting this error

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 "three/examples/fonts/helvetiker_bold.typeface.json";

 * Fonts
const fontLoader = new FontLoader();

fontLoader.load("/fonts/helvetiker_regular.typeface.json", (font) => {
  const textMaterial = new THREE.MeshBasicMaterial();

  const textGeometry = new THREE.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);
 * 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()
// )


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

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

 * Camera
// Base camera
const camera = new THREE.PerspectiveCamera(
  sizes.width / sizes.height,
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;

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

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

  // Call tick again on the next frame



Compare this with BeginnerExample from the

Collection of examples from discourse.threejs.org

Step 0 and 11.

do you have this folder structure?


yes i have this folder in the node module

yes that’s my question from StackOverflow I’m the one who posted it

I have checked that but I have to know is how to find the source code

In Windows always Ctrl + U , otherwise also
view-source:https: …

or see How to View Page Source in Safari on Mac

in the node_module? could you explain? … public can’t be inside node_modules, it can only be at the root of a client-side project. it also can’t be shared or published with a library.

you can import it though:

import helUrl from './fonts/helvetiker_regular.typeface.json'

though this depends on the loader. it has to be url-loader that catches it. if you’re getting a json object back then just rename the extension to “*.blob” and url-loader will hopefully kick in.

it was int the node_module yes

it’s still not clear to me what you mean. there is client side development, you have a local project and a public folder at the root in which assets are located. it should be rather trivial to load that json by now, and the asset can’t be in node_modules because that does not exist any longer when the project is bundled.

and then there is distributed development where you make something that can be used and installed by others (through node_modules). do you want to publish and ship something with that file?

in that case you can’t, …easily.

shipping anything other than js forces the consumer to use (and have) bundle-loaders. what you can do is work around it, for instance this is a library that ships an image as a base64 javascript asset: drei/cloud.base64.ts at ffa775994fc8a2b8afe200977a4ac4a98ece3665 · pmndrs/drei · GitHub you can feed this straight into the THREE.Loader.

1 Like

three.module.js:38595 GET[object%20Object] 404 (Not Found)
load @ three.module.js:38595
load @ FontLoader.js:23
(anonymous) @ script.js:15
(anonymous) @ bundle.88dcb7b969139dc6.js:58878
(anonymous) @ bundle.88dcb7b969139dc6.js:58880

after changing the fonts path into src and then I got this new error

import typefaceFont from “./fonts/helvetiker_bold.typeface.json”;
this is the new path as i changed the path into src

like i said, it loaded an object. you have console.log to check against that. if it’s an object, change the extension to something random, like “helvetiker_bold.typeface.blob”

can you please tell me the exact part in the code i have tried what you said but couldn’t find the problem

here’s an example: Circling birds - CodeSandbox