3

MeshBasicMaterial因为我需要自己的每张脸都透明，所以我从ShaderMaterial.

我画了两次几何图形：首先是填充的三角形，然后是一个线框，为每个三角形设置一个边框。
有没有更好的存档方法？

看起来MeshBasicMaterial不错： 使用 MeshBasicMaterial 渲染

但如果我切换到ShaderMaterial：（不透明度降低到 0.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 对象。
我希望有可能控制每个三角形的透明度和颜色。

有什么要求？
用户应该看到每个三角形边缘/每个三角形周围的边框。
每个三角形表面可以有不同的颜色（基于三个角的颜色）和 alpha / transpareny 值。
用户可以将每个三角形设置为不可见（不透明度 = 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 );

三.js r.84

于 2014-01-19T20:27:54.310 回答