Use Troika Text in Vanilla JavaScript or CDN-based

Questions
1

Hello,
I want to use troika-3d-text without using methods like ES Modules, Webpack, or Vite, similar to the sample code below. However, my sample code isn’t working, and I guess I need to add some other libraries as well, but I’m not sure which ones. Please guide me.



<!DOCTYPE html>
<html>
  <head>
    <title>Troika Three Text Example</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/troika-three-text@0.52.4/dist/troika-three-text.min.js"></script>


    <script>

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75,  window.innerWidth / window.innerHeight,  0.1, 1000 );
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(5, 5, 5);
      scene.add(light);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      const myText = new Text();
      myText.text = "Troika Text";
      myText.fontSize = 0.3;
      myText.color = 0xffffff;
      scene.add(myText);
      myText.sync();

      function updateTextPosition() {
        const facePosition = new THREE.Vector3(0, 0, 0.51);
        cube.localToWorld(facePosition);
        myText.position.copy(facePosition);
      }

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;
      controls.enableZoom = true;
      camera.position.z = 3;

      function animate(time) {
        requestAnimationFrame(animate);
        controls.update();
        updateTextPosition();
        renderer.render(scene, camera);
      }
      animate();

    </script>
  </body>
</html>
2

You can find the dependency list on npm here troika-three-text - npm

You’ll also likely need to put all of your script tag sources into an import map, using vite is pretty convenient but it’s not impossible without it.

3

here is a slight rework of your example using import maps

3 Likes
4

In VS Code, when I build the project using npx vite, a file named index-xGub19vU.js is generated inside the dist\assets folder. With this file, I can run the initial code without any issues.
Right now, I just need to know which JavaScript files are bundled inside this index-xGub19vU.js file.

<!DOCTYPE html>
<html>
  <head>
    <title>Troika Three Text Example</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="./index-xGub19vU.js"></script>


    <script>

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75,  window.innerWidth / window.innerHeight,  0.1, 1000 );
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(5, 5, 5);
      scene.add(light);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      const myText = new Text();
      myText.text = "Troika Text";
      myText.fontSize = 0.3;
      myText.color = 0xffffff;
      scene.add(myText);
      myText.sync();

      function updateTextPosition() {
        const facePosition = new THREE.Vector3(0, 0, 0.51);
        cube.localToWorld(facePosition);
        myText.position.copy(facePosition);
      }

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;
      controls.enableZoom = true;
      camera.position.z = 3;

      function animate(time) {
        requestAnimationFrame(animate);
        controls.update();
        updateTextPosition();
        renderer.render(scene, camera);
      }
      animate();

    </script>
  </body>
</html>
5

There should be a package.json file in the root folder of your project, I’d assume all listed dependencies in that file as well as any dependencies not tree shaken within the node_modules folder are bundled into your index.js file, @seanwasere has provided a solid demonstration of using trioka with import maps above

6

Hi @seanwasere …

Very good example.:wink:

Is it possible to load text.font=… my Windows fonts?

Is the quality equivalent to canvas text?

7

Yes, load it through your webserver like any other asset, such as a gif, jpg, glb, worker, font, …

Docs troika/packages/troika-three-text/README.md at b6565f436e09dc461633e885b36a2b81f5ee37e3 · protectwise/troika · GitHub

I don’t know anything about it, this is the first time I used it directly.

I’ve used it coincidentally through React Three Drei since its a dependency.

1 Like
8

Here goes one example with Three.js…

The quality of the text is excellent!

PS: I tried to bring troika-three-text.esm.js to my home server and modify it to have one only instance of Three.js, but I was not successful! :unamused_face: