Three-text2d (and sprite)

There used to be a library ‘three-text2d’ that works really well with threejs models.
But with recent advances in modules, I cannot find a good working example.

Can anyone provide any pointer on how three-text2d can be used? Examples (jsfiddle, codepen) with details installation instructions are most helpful.

Thanks.

it looks pretty straight forward from the docs. you install it like you install everything else

npm install three-text2d

and now you can use it

import { MeshText2D, textAlign } from 'three-text2d'

(the following test was done today 12/4/2022, three.js r147)
import * as THREE from 'three' → gives the infamous error message:

Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”

With the hint from this link,
I change it to import directly from the module.js file (after npm install three)

import * as THREE from './node_modules/three/build/three.module.js';

THREE.js part is OK …

But then, the question is: what should I give for ‘three-text2d’?

By examining the installed components of ‘three-text2d’, ‘./node_modules/three-text2d/lib/index.js’ seems plausible.

import { MeshText2D, textAlign } from './node_modules/three-text2d/lib/index.js';

But the following error shows up:

Uncaught SyntaxError: The requested module ‘./node_modules/three-text2d/lib/index.js’ does not provide an export named ‘MeshText2D’ (at test.html:19:10)

you need a bundler to do web dev, you consume npm packages with something like vite, parcel, etc. this is also what resolves “three”, you should never import out of node_modules because that is just a local dev environment, it is never published or uploaded.

npm create vite
// go through all the steps
cd yourProjectFolder
npm install
npm install three
npm install three-text2d
npm run dev
import * as THREE from 'three' 
import { MeshText2D, textAlign } from 'three-text2d'

open the browser with the url it gives you, any change you make in your editor is now reflected directly.

when you’re done you type

npm run build

and now you can copy the /dist folder to your server or hoster.

this is supposed to be for a small-scale ‘homework-type’ coding.

I used to take the CDN route:

import * as THREE from 'https://cdn.skypack.dev/three@0.136';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.136/examples/jsm/controls/OrbitControls.js';

Everything is ok, …

With three-text2d, I looked up this reference, and typed:

import threeText2d from 'https://cdn.skypack.dev/three-text2d';
import { MeshText2D, textAlign } from 'three-text2d';

But the following error popped up:

Uncaught TypeError: Failed to resolve module specifier “three-text2d”. Relative references must start with either “/”, “./”, or “…/”.

Any suggestions ?

if you type these commands you have it in seconds. there is nothing else you need to do, no script tags, etc. just import and it’ll work. cdns, skypack, i don’t know. :man_shrugging: