0

我使用 three.js 库在 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

感谢您的答复。

4

1 回答 1

0

这是一样的

如何在three.js中重新定向三角形面

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

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

于 2012-12-04T13:52:20.757 回答