【发布时间】:2020-06-19 17:03:56
【问题描述】:
我一直在创建一个简单的 Three.js 应用程序,到目前为止,我在场景中有一个居中的文本显示“Hello World”。我一直在复制代码 examples 以尝试了解正在发生的事情,到目前为止我已经工作了,但我无法完全理解为什么。
我的困惑来自于阅读所有关于 Geometry 对象负责在场景中创建对象的 形状 的 Three.js 教程。因此,我认为在描述网格形状的东西上放置一个位置是没有意义的。
/* Create the scene Text */
let loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function (font) {
/* Create the geometry */
let geometry_text = new THREE.TextGeometry( "Hello World", {
font: font,
size: 5,
height: 1,
});
/* Create a bounding box in order to calculate the center position of the created text */
geometry_text.computeBoundingBox();
let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
geometry_text.translate(-0.5 * x_mid, 0, 0); // Center the text by offsetting half the width
/* Currently using basic material because I do not have a light, Phong will be black */
let material_text = new THREE.MeshBasicMaterial({
color: new THREE.Color( 0x006699 )
});
let textMesh = new THREE.Mesh(geometry_text, material_text);
textMesh.position.set(0, 0, -20);
//debugger;
scene.add(textMesh);
console.log('added mesh')
} );
这是我用来添加到形状的代码,我的困惑来自以下步骤。
/* Create a bounding box in order to calculate the center position of the created text */
geometry_text.computeBoundingBox();
let x_mid = geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x;
geometry_text.translate(-0.5 * x_mid, 0, 0); // Center the text by offsetting half the width
首先,我们将几何图形向左平移以使文本在场景中居中。
let textMesh = new THREE.Mesh(geometry_text, material_text);
textMesh.position.set(0, 0, -20);
其次,我们set网格的位置。
我的困惑来自于我们需要同时执行这两个操作才能将网格向后移动并居中。
但是我不明白为什么要对geometry进行这些操作,实际上更让我困惑的是textMesh.position.set(0, 0, -20);为什么不覆盖我之前执行的翻译而只是将网格移动到(0,0,-20)。删除我以前的翻译。似乎两者都是必需的。
【问题讨论】:
标签: javascript three.js