I am trying to use a simple piece of code to render 3d text but getting error XMLHttpRequest cannot load file:///Users/<name>/threejs/fonts/helvetiker_regular.typeface.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
var loader = new THREE.FontLoader();
loader.crossOrigin = '';
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
// your code here
var material = new THREE.MeshPhongMaterial({
color: 0xdddddd
});
var textGeom = new THREE.TextGeometry( 'Hello World!', {
font: '' // Must be lowercase!
});
var textMesh = new THREE.Mesh( textGeom, material );
scene.add( textMesh );
// Do some optional calculations. This is only if you need to get the
// width of the generated text
textGeom.computeBoundingBox();
textGeom.textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
} );
This seems to be a common issue just from googling this but don't understand what's different with my code.
I even tried following this http://blog.andrewray.me/creating-a-3d-font-in-three-js/ where they import the font with <script src="your-font.typeface.js"></script> but that isn't working for me either. I get an error elvetiker_regular.typeface.json:1 Uncaught SyntaxError: Unexpected token :
Where am I going wrong?
