【问题标题】:Using textures with Three.js and PLY file将纹理与 Three.js 和 PLY 文件一起使用
【发布时间】:2019-08-17 04:43:42
【问题描述】:

我现在可以正常加载 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')

到 THREE.Mesh() 行,我得到 ​​p>

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: 尝试访问属性 2 中超出范围的顶点

【问题讨论】:

    标签: javascript three.js


    【解决方案1】:

    为了在对象上显示纹理,它需要纹理坐标。您似乎只向几何图形添加顶点和面。查看THREE.PLYLoader 来源,它似乎不支持加载纹理坐标。 (虽然我不确定您是否使用该加载器,因为它应该已经返回一个准备好的 Geometry 实例,而不是要求您手动构造数组)

    【讨论】:

    • 我没用过,第一次写的时候还没有,所以正在使用另一个库。至于响应,纹理是通过图像文件(JPG,GIF)而不是坐标文件(PLY)添加的,所以我不确定你的意思?
    • 我是说纹理(图像)是不够的。为了将其映射到对象的表面,您还需要提供纹理坐标(也称为 UV 坐标)。通常,每个顶点都有一个添加的 Vector2,其分量范围从 0 到 1。这些“u”和“v”坐标告诉纹理图像的哪个部分映射到所讨论的顶点。例如。 (0.5, 0.5) 的 UV 意味着将纹理的中间放入这个特定的顶点。
    • 你能给我发电子邮件,我可以问你一个关于这个的问题吗?比我认为他们不喜欢的来回更容易,austinb AT motionview3d DOT com
    • @AustinBest:如果我的回答不清楚或不正确,请随时在 cmets 中要求澄清,以便我可以让您接受我的贡献。如果您有一个与原始“使用 Three.js 和 PLY 文件的纹理”无关的问题(例如“什么是 UV 映射?”或“如何将纹理坐标添加到 PLY 文件?”),请提出一个新问题(随时指出我那里)。我更喜欢保持公开状态,以便其他人可以从中受益和做出贡献。如果我是有类似问题的人,我不想发现这个只是为了发现一些重要的部分被转移到了一个私人电子邮件讨论中。
    • 一旦找到解决方案,我会发布。我还在 github github.com/mrdoob/three.js/issues/3382 上发帖,因为我在示例中看不到任何比链接层和纹理图像更多的东西。文档不多,我找不到任何工作示例。
    【解决方案2】:

    使用 THREE.MeshNormalMaterial。当您使用 MeshNormalMaterial 时,它会显示纹理。

    【讨论】:

    • 嗯..感谢您对这个 6 岁帖子的帮助。
    猜你喜欢
    • 2015-06-02
    • 2012-02-14
    • 2015-05-06
    • 1970-01-01
    • 2019-09-15
    • 2015-08-04
    • 2022-10-19
    • 2012-10-15
    • 2014-07-06
    相关资源
    最近更新 更多