Global Array undefined with FontLoader Function
up vote
0
down vote
favorite
Im pretty new, hope someone can help with this trivial question :)
The array is globaly defined var textMeshes = ;
and a function to generate the text at a certain position The function works but i cannot access the array by index, I get a console error that textMeshes is not defined. But if i log textMeshes console.log(textMeshes)
as hole array i see the array is filled. console.log(textMeshes[0])
results in undefined. I guess the issue is because fontLoader loads asyncron but please correct me if im wrong =). I really appreciate your help!
function addTextToScene (posX, posY, posZ, i){
var fontLoader = new THREE.FontLoader();
fontLoader.load( 'fonts/droid/droid_sans_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( '#' + i, {
font: font,
size: 16,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 0,
bevelSegments: 5
} );
textMesh = new THREE.Mesh( textGeometry, textMaterial );
var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff, shininess: 100, emissive: 0xffffff});
textMesh.position.x = posX;
textMesh.position.y = posY+50;
textMesh.position.z = posZ-50;
textMeshes.push( textMesh );
scene.add( textMesh );
} );
}
three.js
add a comment |
up vote
0
down vote
favorite
Im pretty new, hope someone can help with this trivial question :)
The array is globaly defined var textMeshes = ;
and a function to generate the text at a certain position The function works but i cannot access the array by index, I get a console error that textMeshes is not defined. But if i log textMeshes console.log(textMeshes)
as hole array i see the array is filled. console.log(textMeshes[0])
results in undefined. I guess the issue is because fontLoader loads asyncron but please correct me if im wrong =). I really appreciate your help!
function addTextToScene (posX, posY, posZ, i){
var fontLoader = new THREE.FontLoader();
fontLoader.load( 'fonts/droid/droid_sans_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( '#' + i, {
font: font,
size: 16,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 0,
bevelSegments: 5
} );
textMesh = new THREE.Mesh( textGeometry, textMaterial );
var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff, shininess: 100, emissive: 0xffffff});
textMesh.position.x = posX;
textMesh.position.y = posY+50;
textMesh.position.z = posZ-50;
textMeshes.push( textMesh );
scene.add( textMesh );
} );
}
three.js
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Im pretty new, hope someone can help with this trivial question :)
The array is globaly defined var textMeshes = ;
and a function to generate the text at a certain position The function works but i cannot access the array by index, I get a console error that textMeshes is not defined. But if i log textMeshes console.log(textMeshes)
as hole array i see the array is filled. console.log(textMeshes[0])
results in undefined. I guess the issue is because fontLoader loads asyncron but please correct me if im wrong =). I really appreciate your help!
function addTextToScene (posX, posY, posZ, i){
var fontLoader = new THREE.FontLoader();
fontLoader.load( 'fonts/droid/droid_sans_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( '#' + i, {
font: font,
size: 16,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 0,
bevelSegments: 5
} );
textMesh = new THREE.Mesh( textGeometry, textMaterial );
var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff, shininess: 100, emissive: 0xffffff});
textMesh.position.x = posX;
textMesh.position.y = posY+50;
textMesh.position.z = posZ-50;
textMeshes.push( textMesh );
scene.add( textMesh );
} );
}
three.js
Im pretty new, hope someone can help with this trivial question :)
The array is globaly defined var textMeshes = ;
and a function to generate the text at a certain position The function works but i cannot access the array by index, I get a console error that textMeshes is not defined. But if i log textMeshes console.log(textMeshes)
as hole array i see the array is filled. console.log(textMeshes[0])
results in undefined. I guess the issue is because fontLoader loads asyncron but please correct me if im wrong =). I really appreciate your help!
function addTextToScene (posX, posY, posZ, i){
var fontLoader = new THREE.FontLoader();
fontLoader.load( 'fonts/droid/droid_sans_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( '#' + i, {
font: font,
size: 16,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 0,
bevelSegments: 5
} );
textMesh = new THREE.Mesh( textGeometry, textMaterial );
var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff, shininess: 100, emissive: 0xffffff});
textMesh.position.x = posX;
textMesh.position.y = posY+50;
textMesh.position.z = posZ-50;
textMeshes.push( textMesh );
scene.add( textMesh );
} );
}
three.js
three.js
asked Nov 8 at 13:18
notsureiscorrect
83
83
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54
add a comment |
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You are correct: the FontLoader.load()
callback is asynchronous, so textMeshes
going to be empty until after its content is loaded. Only then will this line take place:
textMeshes.push( textMesh );
before that, textMeshes[0]
is going to be undefined
because texMeshes has nothing inside it; it has a length of 0.
This is not much of a Three.js question, but more of an AJAX question. You should read this discussion to get more acquainted with the topic: How do I return the response from an asynchronous call?
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You are correct: the FontLoader.load()
callback is asynchronous, so textMeshes
going to be empty until after its content is loaded. Only then will this line take place:
textMeshes.push( textMesh );
before that, textMeshes[0]
is going to be undefined
because texMeshes has nothing inside it; it has a length of 0.
This is not much of a Three.js question, but more of an AJAX question. You should read this discussion to get more acquainted with the topic: How do I return the response from an asynchronous call?
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
add a comment |
up vote
0
down vote
You are correct: the FontLoader.load()
callback is asynchronous, so textMeshes
going to be empty until after its content is loaded. Only then will this line take place:
textMeshes.push( textMesh );
before that, textMeshes[0]
is going to be undefined
because texMeshes has nothing inside it; it has a length of 0.
This is not much of a Three.js question, but more of an AJAX question. You should read this discussion to get more acquainted with the topic: How do I return the response from an asynchronous call?
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
add a comment |
up vote
0
down vote
up vote
0
down vote
You are correct: the FontLoader.load()
callback is asynchronous, so textMeshes
going to be empty until after its content is loaded. Only then will this line take place:
textMeshes.push( textMesh );
before that, textMeshes[0]
is going to be undefined
because texMeshes has nothing inside it; it has a length of 0.
This is not much of a Three.js question, but more of an AJAX question. You should read this discussion to get more acquainted with the topic: How do I return the response from an asynchronous call?
You are correct: the FontLoader.load()
callback is asynchronous, so textMeshes
going to be empty until after its content is loaded. Only then will this line take place:
textMeshes.push( textMesh );
before that, textMeshes[0]
is going to be undefined
because texMeshes has nothing inside it; it has a length of 0.
This is not much of a Three.js question, but more of an AJAX question. You should read this discussion to get more acquainted with the topic: How do I return the response from an asynchronous call?
answered Nov 9 at 0:16
Marquizzo
5,16331942
5,16331942
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
add a comment |
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
Thanks for the link i will read it asap, but this seems a good hint.
– notsureiscorrect
Nov 9 at 20:55
add a comment |
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%2f53208582%2fglobal-array-undefined-with-fontloader-function%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
Please try to share your code as live demo: jsfiddle.net/f2Lommf5
– Mugen87
Nov 8 at 16:44
@Mugen87 Thanks Mugen :) jsfiddle.net/f2Lommf5/15882
– notsureiscorrect
Nov 9 at 20:54