Uncaught SyntaxError Three.js FontLoader
I tried to create 3D text with FontLoader in Three.js, but I got an error.
I use Three.js r99.
const loader = new THREE.FontLoader();
//https://github.com/mrdoob/three.js/tree/dev/examples/fonts
loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
const textGeometry = new THREE.TextGeometry("Hello!", {
font: font,
size: 20,
height: 5,
curveSegments: 12
});
const material = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeometry, material);
scene.add(textMesh);
});
The output of the Chrome developer tool is as follows.
THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.onLoad (three.module.js:39064)
at XMLHttpRequest.<anonymous> (three.module.js:33974)
And VM 5770(?) seems to point to the contents of index.html. "T" seems to be T of
<meta charset = "UTF-8" />.
I don't know what happened. Any ideas?
javascript three.js
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
add a comment |
I tried to create 3D text with FontLoader in Three.js, but I got an error.
I use Three.js r99.
const loader = new THREE.FontLoader();
//https://github.com/mrdoob/three.js/tree/dev/examples/fonts
loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
const textGeometry = new THREE.TextGeometry("Hello!", {
font: font,
size: 20,
height: 5,
curveSegments: 12
});
const material = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeometry, material);
scene.add(textMesh);
});
The output of the Chrome developer tool is as follows.
THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.onLoad (three.module.js:39064)
at XMLHttpRequest.<anonymous> (three.module.js:33974)
And VM 5770(?) seems to point to the contents of index.html. "T" seems to be T of
<meta charset = "UTF-8" />.
I don't know what happened. Any ideas?
javascript three.js
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51
add a comment |
I tried to create 3D text with FontLoader in Three.js, but I got an error.
I use Three.js r99.
const loader = new THREE.FontLoader();
//https://github.com/mrdoob/three.js/tree/dev/examples/fonts
loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
const textGeometry = new THREE.TextGeometry("Hello!", {
font: font,
size: 20,
height: 5,
curveSegments: 12
});
const material = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeometry, material);
scene.add(textMesh);
});
The output of the Chrome developer tool is as follows.
THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.onLoad (three.module.js:39064)
at XMLHttpRequest.<anonymous> (three.module.js:33974)
And VM 5770(?) seems to point to the contents of index.html. "T" seems to be T of
<meta charset = "UTF-8" />.
I don't know what happened. Any ideas?
javascript three.js
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
I tried to create 3D text with FontLoader in Three.js, but I got an error.
I use Three.js r99.
const loader = new THREE.FontLoader();
//https://github.com/mrdoob/three.js/tree/dev/examples/fonts
loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
const textGeometry = new THREE.TextGeometry("Hello!", {
font: font,
size: 20,
height: 5,
curveSegments: 12
});
const material = new THREE.MeshNormalMaterial();
const textMesh = new THREE.Mesh(textGeometry, material);
scene.add(textMesh);
});
The output of the Chrome developer tool is as follows.
THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.onLoad (three.module.js:39064)
at XMLHttpRequest.<anonymous> (three.module.js:33974)
And VM 5770(?) seems to point to the contents of index.html. "T" seems to be T of
<meta charset = "UTF-8" />.
I don't know what happened. Any ideas?
javascript three.js
javascript three.js
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
edited Dec 28 '18 at 15:31
rgarregrah
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
asked Dec 28 '18 at 14:48
rgarregrahrgarregrah
112
112
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51
add a comment |
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51
add a comment |
1 Answer
1
active
oldest
votes
I solved this.
The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960313%2funcaught-syntaxerror-three-js-fontloader%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I solved this.
The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
add a comment |
I solved this.
The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
add a comment |
I solved this.
The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
I solved this.
The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
answered Dec 28 '18 at 15:42
rgarregrahrgarregrah
112
112
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960313%2funcaught-syntaxerror-three-js-fontloader%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What exactly is in that font file your code tries to load?
– Pointy
Dec 28 '18 at 14:51