添加文本几何 THREE.js by For 循环

Question

我正在尝试用 THREE 沿着 3D 网格构建数字。文本几何((

但它只生成一个数字。 让此代码正常工作的解决方案是什么？

"current"变量是一个从 -10 到 10 的数字，跳过 0 我的IDE(PyCharm(告诉我"可变"变量可以从闭包访问"

我不知道我做错了什么以及如何解决它，谢谢

函数创建网格数字X(大小({

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX' ;
var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff});
for (i=0; i<(size*2)+1; i++) {
var counter = i + 1;
var start = -size - 1;
var current = start + counter;
if (i === size) {
continue
}
console.log('current ' + current);
loader.load(fontType, function (font, ) {
var textGeometry = new THREE.TextGeometry(**current**, {
font: font,
size: 0.3,
height: false,
});
var mesh = new THREE.Mesh(textGeometry, textMaterial);
mesh.name = 'xNr' + i;
mesh.position.x = current;
grpGridNumbersX.add(mesh);
});
}
scene.add(grpGridNumbersX);

} 创建网格数字X(10(;

Answer 1

很可能您需要等待字体加载一次

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX' ;
var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff});
loader.load(fontType, createText);
function createText(font) {
for (let i=0; i<(size*2)+1; i++) {
var counter = i + 1;
var start = -size - 1;
var current = start + counter;
if (i === size) {
continue
}
console.log('current ' + current);
var textGeometry = new THREE.TextGeometry(**current**, {
font: font,
size: 0.3,
height: false,
});
var mesh = new THREE.Mesh(textGeometry, textMaterial);
mesh.name = 'xNr' + i;
mesh.position.x = current;
grpGridNumbersX.add(mesh);
}
scene.add(grpGridNumbersX);
} 

您可能会发现此答案很有用。它还为每个字母制作一个网格，它只是将它们排列成一个环而不是网格。

Answer 2

解决方案： * 制作"在 Loader.load 中实现 for 循环" * 将"当前变量转换为字符串">

仍在研究如何将每个数字对准相机，它在我第一次加载场景时正确完成，但是当我移动相机时，查看不会更新

函数创建网格数字X(大小( {

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX';
var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
loader.load( fontType, function (font) {
for (i=0; i<(size*2)+1; i++) {
var counter = i + 1;
var start = -size - 1;
var current = start + counter;
if (i === size) {
continue
}
var str = current.toString();
var textGeometry = new THREE.TextGeometry(str, {
font: font,
size: 0.2,
height: false,
});
var mesh = new THREE.Mesh(textGeometry, textMaterial);
mesh.position.x = current;
mesh.name = 'xAxeNr' + i;
mesh.lookAt(camera.position);

grpGridNumbersX.add(mesh);
}
});

scene.add(grpGridNumbersX);

} 创建网格数字X(10(;