Threejs collada 3D模型在某些角度无法正确渲染

Posted 2023-03-23

【中文标题】Threejs collada 3D模型在某些角度无法正确渲染

【英文标题】：Threejs collada 3D model not render properly for some angle

【发布时间】：2021-02-10 12:56:55

【问题描述】：

我已将 Collada 模型用于我的一个产品 3D 预览，其中画布作为纹理，通常它工作正常，但对于某些角度，3D 角落部分渲染不正确。

我附上了画布和 3D 模态的屏幕截图以及 DAE 模态。

模态有问题吗？请找 Collada 型号here

请在下面找到我的代码：

width = 256, height = 256;
camera = new THREE.PerspectiveCamera( 1, width / height, 0.01, 300 );
camera.position.set( 8, 10, 8 );
camera.lookAt( 0, 3, 0 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
loadingManager = new THREE.LoadingManager( function () 
  scene.add(collada.scene ); // while loading collada model i am updating scene and assign new collada.scene to it
);

loader = new ColladaLoader( loadingManager );
ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
scene.add( ambientLight );

spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.target = scene;
spotLight.position.set(0, 0, 0);
spotLight.castShadow = !0;
spotLight.shadow && spotLight.shadow.mapSize.set(width, height);

【参考方案1】：

您的 Collada 文件中存在问题，尽管它不一定是渲染工件的原因。问题出在以下部分：

<library_images>
  <image id="Map #3-image" name="Map #3"><init_from>file://D:\Mit\3D Box\57.15 x 57.15 x 152.4 overlay\57.15 x 57.15 x 152.4 Open\57.15 x 57.15 x 152.4 Front Open.png</init_from></image>
  <image id="Map #5-image" name="Map #5"><init_from>file://D:\Mit\3D Box\57.15 x 57.15 x 152.4 overlay\57.15 x 57.15 x 152.4 Open\57.15 x 57.15 x 152.4 Back Open.png</init_from></image>
  <image id="Map #6-image" name="Map #6"><init_from>file://D:\Mit\3D Box\57.15 x 57.15 x 152.4 overlay\57.15 x 57.15 x 152.4 Open\57.15 x 57.15 x 152.4 Border Open.png</init_from></image>
</library_images>

如您所见，它包含针对文件系统的绝对文件路径。如果您在浏览器中加载 Collada 资产，这些定义将不起作用。假设纹理位于同一目录中，它应该是：

<library_images>
  <image id="Map #3-image" name="Map #3"><init_from>57.15 x 57.15 x 152.4 Front Open.png</init_from></image>
  <image id="Map #5-image" name="Map #5"><init_from>57.15 x 57.15 x 152.4 Back Open.png</init_from></image>
  <image id="Map #6-image" name="Map #6"><init_from>57.15 x 57.15 x 152.4 Border Open.png</init_from></image>
</library_images>

在three.js editor 中导入模型时，模型本身的几何形状似乎渲染得很好。

【讨论】：

嗨@Mugen87，我正在用画布替换纹理映射，所以它没有出现在我的最终文件中，我仍然使用相对路径作为角落有添加的问题

您确定您生成的画布实际上映射到 Collada 几何体的纹理坐标吗？

是的，当我缩小时，只有这样的问题在没有缩放的情况下才会出现，也适用于特定角度，但不适用于所有角度

您能否尝试将您的画布纹理的minFilter 属性设置为THREE.LinearFilter？此问题可能与 mipmapping 有关。