Question

我使用three.js librairy来编写WebGL代码，我想使用着色器。我的对象是THREE.Mesh对象。

要使用着色器，我创建三个缓冲区以将信息传输到着色器。

包含对象所有顶点的VerticesArray。
NormalsArray，包含所有法线的正常值。
IndicesArray，包含verticesArray中的顶点等级。（面是三角形，因此三个索引链接三个顶点面）。

要创建这些数组，我这样做：

 this.mesh = new THREE.Mesh(
            new THREE.SphereGeometry( 15, 15, 15 ),
            new THREE.MeshLambertMaterial( { color: 0xF40029 } )
        );

    this.vertices = new Array();

    for(var i = 0 ; i < this.mesh.geometry.vertices.length ; i++){
        this.vertices.push(this.mesh.geometry.vertices[i].x);
        this.vertices.push(this.mesh.geometry.vertices[i].y);
        this.vertices.push(this.mesh.geometry.vertices[i].z);
    }

this.normals = new Array();

    for(var i = 0 ; i < this.mesh.geometry.faces.length ; i++){ 

            this.normals[this.mesh.geometry.faces[i].a*3] = this.mesh.geometry.faces[i].vertexNormals[0].x;
            this.normals[this.mesh.geometry.faces[i].a*3+1] = this.mesh.geometry.faces[i].vertexNormals[0].y;
            this.normals[this.mesh.geometry.faces[i].a*3+2] = this.mesh.geometry.faces[i].vertexNormals[0].z;

            this.normals[this.mesh.geometry.faces[i].b*3] = this.mesh.geometry.faces[i].vertexNormals[1].x;
            this.normals[this.mesh.geometry.faces[i].b*3+1] = this.mesh.geometry.faces[i].vertexNormals[1].y;
            this.normals[this.mesh.geometry.faces[i].b*3+2] = this.mesh.geometry.faces[i].vertexNormals[1].z;

            this.normals[this.mesh.geometry.faces[i].c*3] = this.mesh.geometry.faces[i].vertexNormals[2].x;
            this.normals[this.mesh.geometry.faces[i].c*3+1] = this.mesh.geometry.faces[i].vertexNormals[2].y;
            this.normals[this.mesh.geometry.faces[i].c*3+2] = this.mesh.geometry.faces[i].vertexNormals[2].z;

    }

this.indices = new Array();

    for(var i = 0 ; i < this.mesh.geometry.faces.length ; i++){
        this.indices.push(this.mesh.geometry.faces[i].a);
        this.indices.push(this.mesh.geometry.faces[i].b);
        this.indices.push(this.mesh.geometry.faces[i].c);
    }

this.vertexBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
    this.normalBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.normals), gl.STATIC_DRAW);
    this.indexBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STREAM_DRAW);
    this.indexCount = this.indices.length;

在这一步，我有一个奇怪的问题，在显示屏上我可以看到我的两个主题但是没有显示一些面孔。

你有想法解决我的问题吗？

我们可以在下面的图片上看到我的问题。我展示了两个球。 http://img341.imageshack.us/img341/1094/ballsk.jpg

感谢您的回复。

Answer 1

与

相同

How to re-orient triangle faces in three.js

我还没有找到一个简单的解决方案来重新定位three.js中的面部，这样所有面部都是向外看的。我的简单解决方法是以相反的方向再次绘制所有内容。

有关示例，请参阅http://www.menne-biomed.de/uni/3d/alphahull.html

不显示THREE.Mesh对象的某些面

1 个答案: