ThreeJS font parameter is not an instance of THREE.Font, what should I do?

F

Fisab2016-03-12 16:50:15

JavaScript

Fisab, 2016-03-12 16:50:15

<html>  
    <head>
        <title>Try text</title>
        <style>
            canvas{ 
                width: 100%; height: 100%
            }
            *{
                overflow: hidden;
            }
            body{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <script src="helvetiker_regular.typeface.js"></script>
        <script src="three.js"></script>
        <script>
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
            var scene = new THREE.Scene();
            var material = new THREE.MeshBasicMaterial({
                color: 0xdddddd
            });
            var textGeom = new THREE.TextGeometry( "Hello", {font: "helvetiker", size:20, weight: "bold"});
            var textMesh = new THREE.Mesh( textGeom, material );

            scene.add( textMesh );
            textGeom.computeBoundingBox();
            textGeom.textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
            camera.position.z = 5;
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.render(scene, camera);
        </script>
    </body>
</html>

In general, there were 2 problems in the beginning. This one and this one:
_typeface_js_typeface_js is not defined
I fixed it by adding this before the _typeface_js_typeface_js condition: window. It turned out something like this:
window._typeface_js_typeface_js
I didn’t invent it myself, I googled it.
Now I can't with font parameter is not an instance of THREE.Font can handle this. As soon as I tried.
Thanks in advance.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

F

findoff, 2016-03-16
@findoff

helvetiker regular font is connected to the page
while the generator uses helvetiker bold (bold)
And you need to include threejs first, then the font ...
Then there will be no 2nd problem either.
update: plnkr.co/edit/s8fvRufhuUUfKb8TpxYc?p=preview

R

Roman Sokolov, 2016-04-15
@jimquery

in r75 the problem was solved by downloading the font file: https://raw.githubusercontent.com/mrdoob/three.js/...
working example: https://jsfiddle.net/287rumst/1/