将 Google SketchUp 对象导入到 Threejs 中——纹理未被渲染

Question

我正在为浏览器创建一个圆盘高尔夫游戏。我的一个朋友正在帮助我在 Trimble Sketchup 中创建对象，以便我可以将它们导入到游戏中。他导出了一个 .dae 文件和纹理，我使用 ColladaLoader.js 导入了它们。加载纹理和对象，并渲染对象，但对象是黑色的，有时 javascript 控制台会显示某些纹理无法渲染。

这是一些代码：

   var loader = new THREE.ColladaLoader();
   var dae;
   loader.options.convertUpAxis = true;

   loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {

       dae = collada.scene;

       dae.scale.x = dae.scale.y = dae.scale.z = 2.0;

       dae.position.set( 5, 5, 5 ); 

       scene.add( dae );
   } );

我还需要做什么？我很乐意提供更多信息。

Answer 1

如果没有更多信息，这是一项艰巨的任务，但我会先检查三件事：

• 确保纹理路径正确（检查 Firebug Net 面板等它试图加载纹理的路径）。如果我没记错的话，您可能需要在 DAE 中搜索和替换纹理路径，SU 有时可以将绝对路径放在那里。

• 场景中有灯光吗？如果我没记错的话，ColladaLoader 将 SU DAE 材质转换为 MeshPhongMaterial，与 MeshBasicMaterial 不同，它确实需要一些灯光才能显示出来。

• 您是否有动画循环，以便不断渲染事物？如果不是这样，请确保不仅在加载模型之后重新渲染场景，而且在加载纹理之后（它们在模型之后延迟加载）。

• 确保将纹理文件的大小调整为二维的幂（256x512、256x256、1024x1024 等）。 WebGL 不喜欢任意大小的纹理。