Three.js 使用三个.js翻转（镜像）任何对象 2019年更新

因为three.js还将调整面和法线。要翻转/镜像对象，只需使用：

object3D.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

不需要原始解决方案中所示的其他调整。链接到票证：

原始问题 我正在尝试创建一个实用程序，可以翻转Three.js场景中的任何对象。翻转本身很简单：

object3D.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

事实证明，在翻转后修复面和法线是困难的。结果看起来很糟糕。源和翻转对象的图像：

我见过许多线程讨论了这个问题和类似的问题，但没有发现任何有用的东西。有人知道我错过了什么吗谢谢

Js fiddle上的示例代码：

var；
var场景；
var摄像机；
函数render（）{
渲染器。渲染（场景、摄影机）；
};
函数加载（回调）{
新的3.ColladaLoader（）.load（“https://dl.dropboxusercontent.com/u/20925853/Kitchen.dae，函数（结果）{
var mesh=result.scene.children[0]。children[0]。clone（）；
if（回调）回调（网格）；
});
}
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=1000；
var灯=新的三方向灯（0xffffff）；
light.position.set（2,1,1）.normalize（）；
场景。添加（灯光）；
var环境光=新的三个环境光（0x777777）；
场景。添加（环境光）；
var控制装置=新的三个轨道控制装置（摄像机）；
控制。阻尼=0.2；
控件。addEventListener（'change'，render）；
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
荷载（功能（网格）{
flipMesh（网格）；
场景。添加（网格）；
render（）；
});
render（）；
}
函数flipMesh（object3D）{
applyMatrix（新的三个.Matrix4（）.makeScale（-1,1,1））；
反向索引顺序（object3D）；
}
函数反向索引顺序（object3D）{
//TODO:有些东西不见了，物体翻转得很好，但它们上面的光反射不知怎么被破坏了
如果（object3D.type==“网格”）{
var geometry=object3D.geometry；
对于（变量i=0，l=geometry.faces.length；i

我在项目中使用此代码翻转对象：

    const scale = new THREE.Vector3(1, 1, 1);
    if (flipX) {
        scale.x *= -1;
    }
    if (flipY) {
        scale.z *= -1;
    }
    object.scale.multiply(scale);

---

希望这能有所帮助。

如何循环遍历所有面法线并执行面.normal.negate（）？您好@Flux，很遗憾，它没有帮助您完成此操作？@2pha上述代码对于从Collada（dae）文件加载的对象非常有效。对于我在代码中创建的某些对象，它不能正常工作。我在用threejs r71。代码需要稍加修改，这两行需要删除：geometry.computeFaceNormals（）；geometry.computeVertexNormals（）；谢谢，确实有效。我的几何体是一个缓冲几何体，所以我必须将它转换为几何体，然后再转换回来。我们能做到这一点吗？当模型朝向世界轴的方向时，此操作非常有效，但当以任何方式旋转模型时，它将翻转模型局部坐标，但由于旋转，变换将不会产生正确的镜像模型

    const scale = new THREE.Vector3(1, 1, 1);
    if (flipX) {
        scale.x *= -1;
    }
    if (flipY) {
        scale.z *= -1;
    }
    object.scale.multiply(scale);