Javascript 将纹理与Three.js和PLY文件一起使用

我现在可以加载ascii ply文件了，但是它有一个纹理，无论我如何配置，我似乎都无法加载它

    cameraMain = new THREE.Camera(8, MainWidth / MainHeight, 1, 10000);
sceneMain = new THREE.Scene();
ambientLightMain = new THREE.AmbientLight(0x202020);
directionalLightMainRight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLightMainLeft = new THREE.DirectionalLight(0xffffff, 0.5);
pointLightMain = new THREE.PointLight(0xffffff, 0.3);

directionalLightMainRight.position.x = dlpx;
directionalLightMainRight.position.y = dlpy;
directionalLightMainRight.position.z = dlpz;
directionalLightMainRight.position.normalize();

directionalLightMainLeft.position.x = -dlpx;
directionalLightMainLeft.position.y = dlpy;
directionalLightMainLeft.position.z = dlpz;
directionalLightMainLeft.position.normalize();  

pointLightMain.position.x = plpx;
pointLightMain.position.y = plpy;
pointLightMain.position.z = plpz;

sceneMain.addLight(ambientLightMain);
sceneMain.addLight(directionalLightMainRight);
sceneMain.addLight(directionalLightMainLeft);
sceneMain.addLight(pointLightMain);

rendererMain = new THREE.WebGLRenderer();
texture = THREE.ImageUtils.loadTexture('3D/'+ mainURL +'.jpg', {}, function() {
    rendererMain.render(sceneMain);
});

rendererMain.domElement.style.backgroundColor = backgroundColor;
rendererMain.setSize(MainWidth, MainHeight);
rendererMain.domElement.addEventListener('DOMMouseScroll', onRendererMainScroll, false);
rendererMain.domElement.addEventListener('mousewheel', onRendererMainScroll, false);
rendererMain.domElement.addEventListener('dblclick', onRendererMainDblClick, false);
rendererMain.domElement.addEventListener('mousedown', onRendererMainMouseDown, false);

$("#viewerMain").append(rendererMain.domElement);

window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mouseup', onMouseUp, false);

这段代码初始化了模型。有些是不需要的问题的目的，它有缩放，旋转等代码。我知道还有另一行，我有它的评论出来，但出于某种原因，它不会显示在这里，所以我会单独做

material = new THREE.MeshBasicMaterial({map: texture});

该行位于loadTexture代码之后

它的其余部分加载了loadPly函数

        var geometryMain = new THREE.Geometry();
    for (i in event.data.content[0])
      geometryMain.vertices.push(new THREE.Vertex(new THREE.Vector3(event.data.content[0][i][0], event.data.content[0][i][1], event.data.content[0][i][2])));
    for (i in event.data.content[1])
      geometryMain.faces.push(new THREE.Face3(event.data.content[1][i][0], event.data.content[1][i][1], event.data.content[1][i][2]));
    geometryMain.computeCentroids();
    geometryMain.computeFaceNormals();
    mainModel = new THREE.Mesh(geometryMain, new THREE.MeshLambertMaterial({color:0xffffff, shading:THREE.FlatShading}));
    sceneMain.addObject(mainModel);
    mainModel.overdraw = true;
    mainModel.doubleSided = true;

我尝试调整THREE.mesh（）部分以包含材质，但它破坏了所有内容。我已经尝试将map:material添加到MeshLambertMaterial，这也是一个禁忌。有人有什么见解吗？对不起，如果这是过于复杂，但我远远不知道这足以是有效的

如果我加上

map:THREE.ImageUtils.loadTexture('3D/'+ mainURL +'.jpg')

到3.Mesh（）线，我得到

.WebGLRenderingContext:GL错误：GL\u无效\u操作：GLDraweElements:尝试访问属性2中超出范围的顶点

---

为了在对象上显示纹理，它需要纹理坐标。您似乎只向几何体添加顶点和面。查看

THREE.PLYLoader

源代码，它似乎不支持加载纹理坐标。（虽然我不确定您是否使用该加载程序，因为它应该已经返回一个就绪的

几何体
实例，而不是要求您手动构建数组）
使用THREE.MeshNormalMaterial。当您使用MeshNormalMaterial时，它会显示纹理。
我不使用它，它在第一次编写时不可用，因此正在使用另一个库。至于响应，纹理是通过图像文件（JPG，GIF）而不是坐标文件（PLY）添加的，所以我不确定你的意思是什么？我是说纹理（图像）是不够的。为了将其映射到对象的曲面，还需要提供纹理坐标（也称为UV坐标）。通常，每个顶点都有一个添加的向量2，其分量范围为0到1。这些“u”和“v”坐标表示纹理图像的哪一部分映射到所讨论的顶点。例如，UV为（0.5，0.5）意味着纹理的中间被放置在这个特定的顶点。你能给我发电子邮件，让我问你一个关于这个的问题吗？比在这里来回更容易，我认为他们不喜欢，奥斯汀在motionview3d点com@AustinBest：如果我的回答不清楚或不正确，请随时在评论中要求澄清，以便我的贡献为您所接受。如果您有一个与原始“将纹理与Three.js和PLY文件一起使用”无关的问题（例如，“什么是UV贴图？”或“如何将纹理坐标添加到PLY文件？”），请提出一个新问题（请随时告诉我）。我更希望这是公开的，这样其他人可以受益和贡献。如果我是一个有类似问题的人，我不想发现这只是为了发现一些重要的部分被转移到一个私人电子邮件讨论。我会张贴解决方案一旦找到。我也在github上发布了文章，因为我在示例中没有看到比链接ply&texture图像更有用的东西。文档方面没有太多，我也找不到任何工作示例。嗯。。感谢您在这篇6年的文章中给予的帮助。