时间戳

首页 > 解决方案 > 为什么“几何”有坐标系，它与“网格”有什么不同？

javascript - 为什么“几何”有坐标系，它与“网格”有什么不同？

问题描述

我一直在创建一个简单的 Three.js 应用程序，到目前为止，我在场景中有一个居中的文本，显示“Hello World”。我一直在复制代码示例以尝试了解正在发生的事情，到目前为止我已经开始工作了，但我无法完全理解为什么。

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). 删除我以前的翻译。似乎两者都是必需的。

标签： javascriptthree.js

解决方案

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

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

您在“组合变换”情况下会以某种方式获得“预期”结果，因为它只是特定情况（例如，它仅在对象位置为 (0, 0, 0) 等时才有效）

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

推荐阅读