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

Question

我已经将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);

Answer 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中导入模型时，模型本身的几何形状似乎可以呈现良好的效果。