如何使用threejs进行正常缩放以使对象“更厚”或“更薄”答案

【问题标题】：How to normal-scale using threejs to make objects 'thicker' or 'thinner'如何使用threejs进行正常缩放以使对象“更厚”或“更薄”
【发布时间】：2022-02-02 01:00:29
【问题描述】：

我正在尝试弄清楚如何挤压已加载的 .obj 对象以使其“更厚”。我想我正在寻找一种方法来缩放我的对象，而不是从它的锚点，而是通过每个多边形法线来缩放它。

一个典型的例子是取一个“环”对象。如果你只用普通的缩放方法放大它，它只会从中心变大，但我希望环变得更厚/更薄。它在 Cinema 4d 中被称为“正常比例”。

这是我目前拥有的一些示例代码，但它没有给我预期的结果。

var objLoader = new THREE.OBJLoader();
var material = new THREE.MeshLambertMaterial({color:'yellow', shading:THREE.FlatShading});
objLoader.load('objects/gun/M1911.obj', function (obj) {
    obj.traverse(function (child) {
      if (child instanceof THREE.Mesh) {
        child.geometry.computeVertexNormals();
        child.material = material;
      }
    });
    obj.material = material;
    obj.scale.set(7, 7, 7);

    scene.add(obj);
});

【问题讨论】：

正如您所指出的，使用 obj.scale 将从原点均匀地放大整个对象。要“加厚”一个对象，您需要将每个顶点偏移某个因子（加厚因子）乘以它的顶点法线。我对three.js 不够熟悉，无法为您提供代码示例，但它应该相当简单。如果three.js没有加厚功能，则需要循环遍历每个顶点并调整其坐标。
我认为它没有增厚功能，至少在我看来。所以，是的，我正在寻找数学或有关如何实现数学的一些指示。 :)
v.pos.x += v.norm.x*thicken; v.pos.y += v.norm.y*thicken; v.pos.z += v.norm.z*thicken
还不能让它工作。尝试在顶点上循环，它们没有法线，然后尝试在面上循环，它们有顶点和顶点法线，尝试了一些计算，但将整个模型分开。也许我应该尝试一个顶点着色器？（在这里只是一个菜鸟，但这不是使用着色器的好用例吗？：p）

标签： math 3d three.js

【解决方案1】：

scaleGeo: function (geo, ratio) {
    for (var i = 0; i < geo.faces.length; i++) {
        var faceI = geo.faces[i];

        var vertexArr = [faceI.a, faceI.b, faceI.c];
        for (var j = 0; j < vertexArr.length; j++) {
            var vertexJ = geo.vertices[vertexArr[j]];
            var normalJ = faceI.vertexNormals[j];

            if (vertexJ.hasScale) continue;

            vertexJ.x += normalJ.x * ratio;
            vertexJ.y += normalJ.y * ratio;
            vertexJ.z += normalJ.z * ratio;

            vertexJ.hasScale = true;
        }
    }


    return geo;
},

【讨论】：