3

すべての面に透明度が必要だったので、 から に切り替えましMeshBasicMaterialたShaderMaterial。

ジオメトリを 2 回描画します。最初に三角形を塗りつぶし、次にワイヤフレームですべての三角形の境界線を取得します。
これをアーカイブするより良い方法はありますか?

それはMeshBasicMaterialうまく見えます： MeshBasicMaterial でレンダリングする

しかし、次のように切り替えるとShaderMaterial: (ワイヤーフレームが見えるように不透明度が .3 に減ります) ShaderMaterial でレンダリングする

どのシェーダーが「最初に来る」かを webgl に伝える方法はありますか?

私のMeshBasicMaterial：

var material = new THREE.MeshBasicMaterial({
   color: new THREE.Color(0xa5a5a5),
   side: THREE.DoubleSide,
   transparent: true,
   opacity: .99
});

と

var materialLines = new THREE.MeshBasicMaterial({
   color: new THREE.Color(0x0),
   side: THREE.DoubleSide,
   wireframe: true
});

私のShaderMaterial：

var attributes = {
   customColor: {    type: 'c', value: [] },
   customOpacity: { type: 'f', value: []}
};
var shaderMaterial = new THREE.ShaderMaterial({
   attributes: attributes,
   vertexShader: document.getElementById('vertexshader').textContent,
   fragmentShader: document.getElementById('fragmentshader').textContent,
   blending: THREE.NormalBlending,
   depthTest: false,
   transparent: true,
   side: THREE.DoubleSide
});
shaderMaterial.linewidth = 5;

と

var uniforms = {
   color: { type: "c", value: new THREE.Color(0x0) }
};
var ShaderMaterialLines = new THREE.ShaderMaterial({
   uniforms: uniforms,
   vertexShader: document.getElementById('vertexshaderline').textContent,
   fragmentShader: document.getElementById('fragmentshaderline').textContent,
   depthTest: false,
   side: THREE.DoubleSide,
   wireframe: true
});

私のシェーダーで：

<script type="x-shader/x-vertex" id="vertexshader">
    attribute vec3 customColor;
    attribute float customOpacity;

    varying vec3 vColor;
    varying float vOpacity;

    void main() {
        vColor = customColor;
        vOpacity = customOpacity;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
    varying vec3 vColor;
    varying float vOpacity;

    void main() {
        gl_FragColor = vec4( vColor, vOpacity);
    }
</script>
<script type="x-shader/x-vertex" id="vertexshaderline">
    uniform vec3 color;

    varying vec3 vColor;

    void main() {
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>
<script type="x-shader/x-fragment" id="fragmentshaderline">
    varying vec3 vColor;

    void main() {
        gl_FragColor =  vec4( vColor, 1.0);
    }
</script>

編集1：

正確に何を達成しようとしていますか？
三角形で構成される 3D オブジェクトを描画したいと考えています。
すべての三角形の透明度と色を制御できるようにしたいと考えています。

要件は何ですか？
ユーザーは、すべての三角形のエッジ/すべての三角形の境界線を確認する必要があります。
各三角形のサーフェスは、(3 つの角の色に基づいて) 異なる色とアルファ/透明度の値を持つことができます。
ユーザーは、すべての三角形を非表示 (不透明度 = 0.0)、可視 (不透明度 = 1.0)、またはその中間に設定できます (境界ではなく三角形の表面のみ)。

あなたの質問は何ですか？
黒または任意の色の境界線で三角形を描画する最良の方法は何ですか.
すべての三角形の透明度を取得する最良の方法は何ですか (ただし、境界線は保持します)。

4

1 に答える 1

8

編集 - 回答が更新されました。WireframeHelper廃止されました。

メッシュに透明なマテリアルとワイヤーフレームの両方を持たせたいとします。

各三角形の周りに境界線をレンダリングするには、 を使用WireframeGeometryし、メッシュ マテリアルに があることを確認しますtransparent = true。

透明なオブジェクトは最後にレンダリングされるため、ワイヤーフレーム全体が表示されます。

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

// wireframe
var geometry2 = new THREE.WireframeGeometry( geometry ); // or EdgesGeometry
var material2 = new THREE.LineBasicMaterial( { color: 0x000000, transparent: true } );
var wireframe = new THREE.LineSegments( geometry2, material2 );
mesh.add( wireframe );

three.js r.84

于 2014-01-19T20:27:54.310 に答える