Question

我使用THREE.PointCloud来获得更好的性能，我必须为100K对象制作动画。但问题是我无法找到为粒子设置不同纹理的方法。如何在此代码中使用具有不同纹理的制服。

我可以将shaderMaterial作为具有相同数字的数组传递给具有不同纹理的粒子吗？

或者在片段着色器中如何传递不同的纹理？

     var uniforms = {
                    amplitude: {
                        type: "f",
                        value: 1.0
                    },
                    color: {
                        type: "c",
                        value: new THREE.Color("#fff")
                    },
                    texture: {
                        type: "t",
                        value: new THREE.TextureLoader().load("./images/shape1.png") 
// I have to set different shapes randomly
                    }
                };

            var vertexShader = [
                        "uniform float amplitude;",
                        "attribute float size;",
                        "attribute vec3 customColor;",
                        "varying vec3 vColor;",
                        "void main() {",
                            "vColor = customColor;",
                            "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
                            "gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );",
                            " gl_Position = projectionMatrix * mvPosition;",
                        "}"
                        ].join("\n"),

                    fragmentShader = [
                        "uniform vec3 color;",
                        "uniform sampler2D texture;",
                        "varying vec3 vColor;",
                        "void main() {",
                            "gl_FragColor = vec4( color * vColor, 1.0 );",
                            "gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );",
                        "}"
                    ].join("\n");


    var shaderMaterial = new THREE.ShaderMaterial({
                    uniforms: uniforms,
                    //attributes: attributes,
                    vertexShader: vertexShader,
                    fragmentShader: fragmentShader,
                    blending: THREE.AdditiveBlending,
                    depthTest: true,
                    transparent: false
                });


                // particles.colors = colors;

                var particles = new THREE.BufferGeometry();
                particles.addAttribute('position', new THREE.BufferAttribute(positions, 3));
                particles.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
                particles.addAttribute('size', new THREE.BufferAttribute(sizes, 1));



                particleSystem = new THREE.PointCloud(particles, shaderMaterial); // can i pass shaderMaterial as array which has equal number as particles with different textures

Answer 1

我认为这是解决您问题的方法。我尝试了，它奏效了。 Three.js - Using multiple textures in a single PointCloud

您可以在这里通过jigglebilly观看现场演示：http://jsfiddle.net/jigglebilly/drmvz5co/。

此外，Three.js的新版本不支持ShaderMaterial中的属性。我们必须改为使用geometry.addAttribute。这是定义texIndex的代码：

var vIndex = new Float32Array( vertices.length );
for ( var i = 0, l = vertices.length; i < l; i ++ ) {
    vIndex[i] = Math.random()*getTextures().length;
}
geometry.addAttribute( 'texIndex', new THREE.BufferAttribute( vIndex, 1 ) );

如何在three.js中为pointCloud设置不同的纹理到shaderMaterial

1 个答案: