【发布时间】:2021-06-13 05:51:31
【问题描述】:
我正在尝试使用 Promise 在平面上渲染 TTF 字体加载器并将其转换为纹理,然后在 index.js 上将其映射到 MeshBasicMaterial 但给了我上述错误
目标是在 3D 透明对象上折射下面创建的文本,当我在纯画布填充文本上创建文本但想使用 three.js 字体加载器时我成功了,请谁能告诉我错误可能是什么造成的?
我们将不胜感激。
谢谢
fontloader.js
const loader = new TTFLoader();
export default function loadFonts(url) {
return new Promise(resolve => {
let font = null;
let text = 'three.js';
let group, textMesh1, textMesh2, textGeo, material;
loader.load(url, function(json) {
font = new THREE.Font(json);
textGeo = new THREE.TextGeometry(text, {
font: font,
size: 70,
height: 0,
bevelThickness: 0,
bevelSize: 0,
bevelEnabled: false
});
textGeo.computeBoundingBox();
textGeo.computeVertexNormals();
const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
textMesh1 = new THREE.Mesh(textGeo, material);
textMesh1.position.x = centerOffset;
textMesh1.position.y = 0;
textMesh1.position.z = 0;
textMesh1.rotation.x = 0;
textMesh1.rotation.y = 0;
var texture = new THREE.Texture(textMesh1);
texture.needsUpdate = true;
resolve(texture)
});
});
}
index.js
async createBackground() {
// const tex = await loadTexture("test.JPG");
const tex = await loadFonts("/fonts/kenpixel.ttf");
var material = new THREE.MeshBasicMaterial({
map: tex
})
material.map.minFilter = THREE.LinearFilter;
const quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(), material);
quad.layers.set(1);
quad.scale.set(this.vp.width, this.vp.height, 1);
return quad;
}
【问题讨论】:
标签: three.js