使用带有Three.js和PLY文件的纹理 [英] Using textures with Three.js and PLY file

问题描述

我的ascii ply文件现在加载正常。但它有一个纹理，我似乎无法加载，无论我如何配置的东西。我仍在学习这个Three.js和我一样。

I have got the ascii ply file loading fine now. But it has a texture and i can not seem to get it to load not matter how i configure things. I am still learning this Three.js so bare with me.

    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);

该代码块初始化模型。其中一些不需要用于问题目的，它有缩放，旋转等代码。我知道还有另一条线，我已将它注释掉了但由于某种原因它不会在这里显示所以我会单独进行。

That chunk of code initializes the model. Some of it is not needed for question purposes, it has code for zooming, rotating, etc.. I know there is another line, i have it commented out but for some reason it wont show here so i will do it seperately.

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

该行位于loadTexture代码之后。

That line is after the loadTexture code.

其余部分加载了loadPly函数

The rest of it is loaded with a loadPly function

        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（）部分以包含材料，但它会破坏所有内容。我试过将地图：材料添加到MeshLambertMaterial，也是不行。有人有任何见解吗？对不起，如果这个过于复杂，但我还远远不知道这个有效率。

I have tried tweaking the THREE.mesh() section to include the material but it breaks everything. I have tried just adding the map:material to the MeshLambertMaterial, also a no go. Anyone have any insight? Sorry if this is over complicated but i am far from knowing this enough to be efficient yet.

编辑：

如果我添加

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

到THREE.Mesh（）行，我得到

to the THREE.Mesh() line, i get

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

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

推荐答案

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

In order to display a texture on an object, it needs texture coordinates. You only seem to add vertices and faces to the geometry. Looking at THREE.PLYLoader sources, it doesn't seem to support loading the texture coords. (Although I'm not sure if you use that loader as it should already return a ready Geometry instance instead of requiring you to construct arrays manually)

这篇关于使用带有Three.js和PLY文件的纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！