<p dir="auto">Hey, Three team. I'm reporting a bug happening on Chromium-based browsers preventing Custom Fonts(TTF converted to JSON with <a href="https://gero3.github.io/facetype.js/" rel="nofollow">https://gero3.github.io/facetype.js/</a>) to be displayed and throwing the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="THREE.Object3D.add: object not an instance of THREE.Object3D"><pre class="notranslate"><code class="notranslate">THREE.Object3D.add: object not an instance of THREE.Object3D
</code></pre></div>
<p dir="auto">This does not occur on Firefox. I have not yet found anything about this one in the issues, so I'm reporting(apologies if duplicate).</p>
<p dir="auto">A clear and concise description of what the bug is. Before submitting, please remove unnecessary sections.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Download any TTF online and convert it using <a href="https://gero3.github.io/facetype.js/" rel="nofollow">this tool</a></li>
<li>Load it using the code below</li>
<li>See error on console</li>
</ol>
<p dir="auto"><em><strong>Code</strong></em></p>
<p dir="auto">The code I am using is the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const loader = new THREE.FontLoader()
    loader.load('../assets/fonts/Style Script_Regular.json', function (font) {
        // About Me Descr Text 2
        let buildAboutMeDescrTextWall2;
        (buildAboutMeDescrTextWall2 = function (){
            const mainColor = 0xF3B3A6;
            const matDark = new THREE.LineBasicMaterial( {
                color: mainColor,
                side: THREE.DoubleSide,
            } );
            const mainMessage = &quot;text&quot;
            const mainTextgeometry = new THREE.TextGeometry(mainMessage, {
                font: font,
                size: 30,
                height: 5,
            });
            mainTextgeometry.computeBoundingBox();
            const xMid = - 0.5 * ( mainTextgeometry.boundingBox.max.x - mainTextgeometry.boundingBox.min.x );
            mainTextgeometry.translate( xMid, 0, 10 );
            window.aboutMeDescrTextWall2 = new THREE.Mesh( mainTextgeometry, matDark );
            aboutMeDescrTextWall2.position.set(-830, 1450, 1880);
            aboutMeDescrTextWall2.rotation.y = Math.PI/2 +1;
            aboutMeDescrTextWall2.rotation.x = 0;
            aboutMeDescrTextWall2.rotation.z = 0;
        })();
    })

// some code

scene.add(window.aboutMeDescrTextWall2)
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">loader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">FontLoader</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-s1">loader</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span><span class="pl-s">'../assets/fonts/Style Script_Regular.json'</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">font</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// About Me Descr Text 2</span>
        <span class="pl-k">let</span> <span class="pl-s1">buildAboutMeDescrTextWall2</span><span class="pl-kos">;</span>
        <span class="pl-kos">(</span><span class="pl-s1">buildAboutMeDescrTextWall2</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
            <span class="pl-k">const</span> <span class="pl-s1">mainColor</span> <span class="pl-c1">=</span> <span class="pl-c1">0xF3B3A6</span><span class="pl-kos">;</span>
            <span class="pl-k">const</span> <span class="pl-s1">matDark</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">LineBasicMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span>
                <span class="pl-c1">color</span>: <span class="pl-s1">mainColor</span><span class="pl-kos">,</span>
                <span class="pl-c1">side</span>: <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">DoubleSide</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">const</span> <span class="pl-s1">mainMessage</span> <span class="pl-c1">=</span> <span class="pl-s">"text"</span>
            <span class="pl-k">const</span> <span class="pl-s1">mainTextgeometry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">TextGeometry</span><span class="pl-kos">(</span><span class="pl-s1">mainMessage</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
                <span class="pl-c1">font</span>: <span class="pl-s1">font</span><span class="pl-kos">,</span>
                <span class="pl-c1">size</span>: <span class="pl-c1">30</span><span class="pl-kos">,</span>
                <span class="pl-c1">height</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">mainTextgeometry</span><span class="pl-kos">.</span><span class="pl-en">computeBoundingBox</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">const</span> <span class="pl-s1">xMid</span> <span class="pl-c1">=</span> <span class="pl-c1">-</span> <span class="pl-c1">0.5</span> <span class="pl-c1">*</span> <span class="pl-kos">(</span> <span class="pl-s1">mainTextgeometry</span><span class="pl-kos">.</span><span class="pl-c1">boundingBox</span><span class="pl-kos">.</span><span class="pl-c1">max</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">-</span> <span class="pl-s1">mainTextgeometry</span><span class="pl-kos">.</span><span class="pl-c1">boundingBox</span><span class="pl-kos">.</span><span class="pl-c1">min</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">mainTextgeometry</span><span class="pl-kos">.</span><span class="pl-en">translate</span><span class="pl-kos">(</span> <span class="pl-s1">xMid</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">10</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">aboutMeDescrTextWall2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span> <span class="pl-s1">mainTextgeometry</span><span class="pl-kos">,</span> <span class="pl-s1">matDark</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">aboutMeDescrTextWall2</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">830</span><span class="pl-kos">,</span> <span class="pl-c1">1450</span><span class="pl-kos">,</span> <span class="pl-c1">1880</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">aboutMeDescrTextWall2</span><span class="pl-kos">.</span><span class="pl-c1">rotation</span><span class="pl-kos">.</span><span class="pl-c1">y</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-c1">PI</span><span class="pl-c1">/</span><span class="pl-c1">2</span> <span class="pl-c1">+</span><span class="pl-c1">1</span><span class="pl-kos">;</span>
            <span class="pl-s1">aboutMeDescrTextWall2</span><span class="pl-kos">.</span><span class="pl-c1">rotation</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
            <span class="pl-s1">aboutMeDescrTextWall2</span><span class="pl-kos">.</span><span class="pl-c1">rotation</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">// some code</span>

<span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">aboutMeDescrTextWall2</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The text should show as happens on Firefox</p>
<p dir="auto"><strong>Platform:</strong></p>
<p dir="auto">The issue occurs on both Ubuntu-based latest popOS and on macOS High Sierra. The browsers with this issue are Safari, Chrome and Brave</p>
<p dir="auto">This is related to my <a href="https://github.com/SuberFu/THREE.MeshLineAlt">MeshLineAlt</a> (note, by sheer accident/oversight, it was named exactly the same as <a href="https://github.com/spite/THREE.MeshLine">Spite's</a>, which was pointed out to me before).</p>
<p dir="auto">In my implementation, I pre-set the _bufferGeometry with a custom BufferGeometry, depending on the THREE.WebGLGeometries get() function behavior of constructing checking for a _bufferGeometry on a THREE.Geometry before constructing a default one to be used.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="            if ( geometry._bufferGeometry === undefined ) {

                geometry._bufferGeometry = new THREE.BufferGeometry().setFromObject( object );
            }
            buffergeometry = geometry._bufferGeometry;"><pre class="notranslate"><code class="notranslate">            if ( geometry._bufferGeometry === undefined ) {

                geometry._bufferGeometry = new THREE.BufferGeometry().setFromObject( object );
            }
            buffergeometry = geometry._bufferGeometry;
</code></pre></div>
<p dir="auto">However, I think it may be pretty fragile, considering that I'm depending on something that's not part of the API.<br>
Therefore, I want to ask if it's logical/possible to either.</p>
<ol dir="auto">
<li>Have THREE.Geometry contain a method like "getBufferGeometry" that returns a THREE.BufferGeometry (or objects derived from it). So the call becomes like...</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="geometry._bufferGeometry = geometry.getBufferGeometry().setFromObject( object );"><pre class="notranslate"><code class="notranslate">geometry._bufferGeometry = geometry.getBufferGeometry().setFromObject( object );
</code></pre></div>
<ol dir="auto">
<li>Have objects (THREE.Mesh related, not THREE.Object3D) contains a method to return the getBufferGeometry. So the call becomes...</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="geometry._bufferGeometry = object.getBufferGeometry().setFromObject( object );"><pre class="notranslate"><code class="notranslate">geometry._bufferGeometry = object.getBufferGeometry().setFromObject( object );
</code></pre></div>
<p dir="auto">Personally, I think the second one is potentially more flexible, as it make more logically sense as geometry itself should not care how the end result is achieved, but the object itself will have the ability, by return a derived THREE.BufferGeometry, to retransform the THREE.Geometry object into ones it can use.</p>