如何在three.js中为网格绘制设置动画

Question

我有一个由缓冲几何体制成的带状网格，其面部是看不见的。我正在使用自定义着色器 - gl_FragColor = vec4(1.0,1.0,1.0,0.0)。

当沿着功能区移动3DObject时，我会对其所在的面部的索引进行光线投射，并更新制作它们的着色器。

我对效果不满意，因为它会导致相当粗糙的动画。如果我添加更多面孔，那么我会受到严重影响。

有没有办法让我根据3DObject位置更新片段的alpha而不必求助于整个面？

旁注：我也尝试根据x / z像素位置剪裁色带。效果很完美，性能很好，但是当色带急转弯时，我会受到不良影响。

Answer 1

您可以通过如此设置BufferGeometry来仅渲染部分drawRange：

mesh.geometry.setDrawRange( startIndex, count );

有关更多信息和实时示例，请参阅this answer。

编辑 - 如下面的评论中所述，另一种方法是向几何体添加一个属性，该属性表示每个顶点沿几何体定位的小数距离。此方法需要自定义ShaderMaterial，但您可以平滑地为网格绘制设置动画。

这是一个示例顶点着色器和片段着色器

<script id="vertex_shader" type="x-shader/x-vertex">

attribute float distance;

varying float vDistance;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    vDistance = distance;
    vNormal = normalize( normalMatrix * normal );
    vViewPosition = - mvPosition.xyz;

    gl_Position = projectionMatrix * mvPosition;

}

</script>

<script id="fragment_shader" type="x-shader/x-fragment">

uniform float fraction;

varying float vDistance;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

    if ( vDistance > fraction ) discard;

    vec3 color = vec3( 0.25, 0.5, 1.0 );

    // hack in a fake pointlight at camera location, plus ambient
    vec3 normal = normalize( vNormal );
    vec3 lightDir = normalize( vViewPosition );

    float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;

    // trick to make the clipped ends appear solid
    gl_FragColor = ( gl_FrontFacing ) ? vec4( color * dotProduct, 1.0 ) : vec4( color, 1.0 );

}

</script>

以下是如何向BufferGeometry添加属性并实例化材料。

// new attribute
var numVertices = geometry.attributes.position.count;
var distance = new Float32Array( numVertices * 1 ); // 1 value per vertex
geometry.addAttribute( 'distance', new THREE.BufferAttribute( distance, 1 ) );

// populate attribute
for ( var i = 0, l = numVertices; i < l; i ++ ) {

    // set new attribute
    distance[ i ] = ( geometry.attributes.position.getY( i ) + 10 ) / 20;

    // wiggle geometry a bit while we're at it
    var x = geometry.attributes.position.getX( i )
    var y = geometry.attributes.position.getY( i );
    geometry.attributes.position.setX( i, x + 2 * Math.sin( y ) );

}

// uniforms
var uniforms = {
    "fraction" : { value: 0 }
};

// material
var material = new THREE.ShaderMaterial( {
    uniforms        : uniforms,
    vertexShader    : document.getElementById( 'vertex_shader' ).textContent,
    fragmentShader  : document.getElementById( 'fragment_shader' ).textContent,
    side: THREE.DoubleSide
} );

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

然后，在渲染循环中，设置要渲染的所需分数：

mesh.material.uniforms.fraction.value = 0.5 * ( 1 + Math.cos( t ) );

小提琴：http://jsfiddle.net/m99aj10b/

three.js r.76