【问题标题】:Why does a `Geometry` have a coordinate system and is it different to a `Mesh`?为什么“几何”有一个坐标系,它与“网格”有什么不同?
【发布时间】: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


    【解决方案1】:

    AFAIK 建议(在场景图中)转换(平移、旋转、缩放)整个网格(使用简单)而不是准备转换后的几何体并使用它来创建“未转换”的网格,因为第二种情况下的网格不是转换友好。基本上“累积”转换将是非法的,会给出错误的、意想不到的结果。哪怕是简单的动作。

    但有时创建转换几何并将其用于某些算法/计算或网格中很有用。

    您在“组合变换”情况下得到某种“预期”结果,因为它只是特殊情况(例如,它仅在对象位置为 (0, 0, 0) 等时才有效)

    mesh.position.set 不修改几何:它只是网格的一个属性,用于计算最终的网格三角形。该计算涉及几何和由对象位置、对象四元数(3D 旋转)和对象比例组成的对象矩阵。对象的几何形状可以通过“矩阵”操作进行修改,但这些操作都不是由网格动态执行的。

    【讨论】:

    • 我不明白,当我先翻译然后 set_position 和 set_position 不覆盖翻译时,你在哪里说明它仍然居中?你说得对,我们会平移、旋转然后缩放,因此我很困惑为什么会这样。
    • 您可以将几何转换为网格转换
    猜你喜欢
    • 1970-01-01
    • 2014-02-28
    • 1970-01-01
    • 1970-01-01
    • 2013-05-26
    • 2011-03-15
    • 2011-03-28
    • 2019-07-22
    相关资源
    最近更新 更多