0

three.js ライブラリを使用して WebGL でコーディングしていますが、シェーダーを使用したいと考えています。私のオブジェクトは THREE.Mesh オブジェクトです。

シェーダーを使用するには、情報をシェーダーに送信するための 3 つのバッファーを作成します。

  • オブジェクトのすべての頂点を含む VerticesArray。
  • ポイントのすべての法線を含む NormalsArray 。
  • verticesArray 内の頂点のランクを含む IndicesArray。(面は三角形なので、3 つのインデックスが同じ面の 3 つの頂点をリンクします)。

これらの配列を作成するには、次のようにします。

 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;

このステップで奇妙な問題が発生します。ディスプレイには 2 つの被写体が表示されますが、一部の顔が表示されません。

私の問題を解決するアイデアはありますか?

次の図で私の問題を見ることができます。2つのボールを表示します。 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 に答える