I am beginner and using parcel v2 with three js first time i have problem in text loading

Questions
1 
import * as THREE from "three";
import { TTFLoader } from "three/examples/jsm/loaders/TTFLoader";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
import { ft } from "../fonts/JetBrains Mono_Regular.json";

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

renderer.setClearColor(0xa3a3a3);

const boxGeometry = new THREE.BoxGeometry(16, 16, 16);
const boxMaterial = new THREE.MeshNormalMaterial();
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
// test.scene.add(boxMesh);

// part 1 - typeface.json font loader
const fontLoader = new FontLoader();
fontLoader.load(
  ft,

  (droidFont) => {
    const textGeometry = new TextGeometry("hello world", {
      size: 20,
      height: 4,
      font: droidFont,
    });
    const textMaterial = new THREE.MeshNormalMaterial();
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textMesh.position.x = -45;
    textMesh.position.y = 0;
    test.scene.add(textMesh);
  }
);

function animate(time) {
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener("resize", function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
2

i have problem in text loading

Please describe in more detail your issue.

That should be scene.add(textMesh);.

Besides, position your text mesh at the origin instead and move the camera a bit along the positive z-axis. So camera.position.z = 50;.

3

what’s this?

it’s either loader.parse(json) if you already have the json loaded, or loader.load(url). whatever “ft” is, it’s probably neither. put the json file into your /public folder. and load it as loader.load(“/JetBrains Mono_Regular.json”)

4

const fontLoader = new FontLoader();
fontLoader.load(“/JetBrains Mono_Regular.json”, (json) => {
// First parse the font.
const jetBrainsFont = fontLoader.parse(json);
const textGeometry = new TextGeometry(“hello world”, {
size: 20,
height: 4,
font: jetBrainsFont,
});
const textMaterial = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.position.set(0, 0, 0);
scene.add(textMesh);
});

camera.position.set(0, 0, 10);

5

I dont have public folder

6

throw away parcel, use vite. a bundler without a public folder, that is crazy. how are you supposed to handle static files then?

ps, it looks like it really doesn’t have that :smile: How to serve static files? · Issue #1080 · parcel-bundler/parcel · GitHub again, just trash it, move your files and folders into a normal bundler.

7

dir

8

I used plugin that copies all my files and folder in static folder to dist\ assets folder .It is working fine with loading models but not with loading fonts in json format.

9

do you still load it with an import? import is only for assets within /src with relative paths. static assets need to be loaded with a string “/thing.ext”