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();