Merging Text Geometry and Sphere Geometry

Questions
1

Hi guys I need help. I got an error when merging text and sphere geometry. The threejs used is R71 and must be a BufferGeometry.
Screen Shot 2021-09-01 at 4.09.46 PM

image

This is my mycode :
html :

  <script>
    self._typeface_js = { faces: THREE.FontUtils.faces, loadFace: THREE.FontUtils.loadFace };
  </script>
  <script src="font/Monaco_Regular.js"></script>
  <script src="font/helvetiker_regular.typeface.js"></script>
  <script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>

 let modelGeometry = new THREE.Geometry();
    const globalMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const head = new THREE.SphereGeometry(0.5, 32, 16);
    const body = new THREE.SphereGeometry(0.5, 32, 16);

    const textGeometry = new THREE.TextGeometry("Human 001", {
      font: "monaco",
      size: 1,
      height: 0,
      curveSegments: 3,
    });

    textGeometry.computeBoundingBox();

    const humanIdMesh = new THREE.Mesh(textGeometry, globalMaterial);
    const headMesh = new THREE.Mesh(head, globalMaterial);
    const bodyMesh = new THREE.Mesh(body, globalMaterial);

    modelGeometry.merge(headMesh.geometry, headMesh.matrix);
    modelGeometry.merge(bodyMesh.geometry, bodyMesh.matrix);
    modelGeometry.merge(humanIdMesh.geometry, humanIdMesh.matrix);

    const humanModel = new THREE.BufferGeometry().fromGeometry(modelGeometry);

    this.humanModel = new THREE.Mesh(humanModel, globalMaterial);

helvetiker_regular.typeface.js (61.8 KB)
Monaco_Regular.js (163.0 KB)

2

/cc

3

Can you share full code with three.js, font etc?

4

Added. I also try to change the font but didn’t change anything.

5

Not uploaded: font/Monaco_Regular.js
Not uploaded: font/helvetiker_regular.typeface.js
ERR_ABORTED 404: https://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js
I download three.js 71

6

Uploaded the font.

7

There was empty vertexNormals at: modelGeometry.faces[1920].vertexNormals;
Added: modelGeometry.computeVertexNormals();

    modelGeometry.merge(headMesh.geometry, headMesh.matrix);
    modelGeometry.merge(bodyMesh.geometry, bodyMesh.matrix);
    modelGeometry.merge(humanIdMesh.geometry, humanIdMesh.matrix);
    modelGeometry.computeVertexNormals();
    const humanModel = new THREE.BufferGeometry().fromGeometry(modelGeometry);
    var mesh = new THREE.Mesh( humanModel, globalMaterial );
    scene.add( mesh );

image

1 Like
8

It’s works. Thank you so much for your help

1 Like