Collada 模型面无法在 three.js 中正确显示

Posted 2023-02-27

【中文标题】Collada 模型面无法在 three.js 中正确显示

【英文标题】：Collada model faces not displaying correctly in three.js

【发布时间】：2012-07-30 23:41:13

【问题描述】：

将一个collada模型导入到three.js中后，模型的部分人脸只能从模型内部看到，从外部看不到。

如何解决相关面孔的问题？

是否可以让模特的脸从两侧都可见？

【问题讨论】：

你能把你的代码放在 jsfiddle 上而不是 rar 上吗？

@jterrace jsfiddle.net/cvj157/AdLc9/8 这是我的源码。但是因为我不知道怎么给jsfiddle添加资源所以无法运行。原始模型图片可以从images.cnblogs.com/cnblogs_com/e-life/401048/r_original.JPG和collada 显示图片是images.cnblogs.com/cnblogs_com/e-life/401048/r_showing.JPG

这看起来更像是一个法线问题。您是否检查以确保该圆柱面上的法线没有翻转？

@Nimphious 不确定！很抱歉不知道你的意思。模型下载自sketchup.google.com/3dwarehouse/…

如果你把相机放在模型里面向外看，你能看到缺失的部分吗？网格中的每个多边形都有所谓的法线，它是描述多边形所面对方向的向量。如果以错误的方式翻转，您将无法看到多边形，但您将能够从内部看到它。

【参考方案1】：

要修复方向不正确的面，请将模型加载到 Blender 之类的 3D 建模程序中，并翻转未正确显示的面的法线。

Three.js 网格有一个可以设置的双面属性，通常可以让您显示模型的面从两侧可见。

这是一个关于如何加载 collada 网格并启用双面渲染的简短示例。

var loader = new THREE.ColladaLoader();
loader.load('path/to/mesh.dae', loadModel);

function loadModel(geom) 
    var mesh = new THREE.Mesh(geom, new THREE.MeshBasicMaterial());
    mesh.doublesided = true;
    scene.add(mesh);

还有一个活生生的例子：http://jsfiddle.net/r7Yq2/

【讨论】：

显然它在 r50 中发生了变化：现在应该在材质上设置它：material.side = THREE.DoubleSide; （我花了一段时间才发现！）

【参考方案2】：

它不能正常工作的原因是因为你的文件设置了这个双面标志：

<effect id="material_3_4_0-effect" name="material_3_4_0-effect">
   <profile_COMMON>
      ...
      <extra>
         <technique profile="GOOGLEEARTH">
            <double_sided>1</double_sided>
         </technique>
      </extra>
   </profile_COMMON>
</effect>

three.js ColladaLoader 不会查找此标志，而是按应有的方式在材质上设置 doubleSided。我已经 filed a bug 处理这个问题。