如何改变每一点的颜色

Question

我尝试用点绘制图像，并且几何图形效果很好，但是我无法将图像像素颜色传递到每个点

 function createParticles(imgData) {
        var uniforms ={ vertexColor:{value: []}}
        const geometry = new THREE.BufferGeometry();
        var c = 0, x = 0, y = 0, positions = [], colors = [];
        var data = imgData.data;
        var colors = new Float32Array(imgData.width*imgData.height*3);
        x = -imgData.width * 0.5;
        y = imgData.height * 0.5;
        for (var i = 0; i < imgData.height; i++) {
            for (var j = 0; j < imgData.width; j++) {
                positions.push(j - imgData.width * 0.5, imgData.height * 0.5 - i, Math.random() * 20);
                 var color = new THREE.Color();
                color.setRGB(data[c] / 255, data[c + 1] / 255, data[c + 2] / 255);
              uniforms.vertexColor.value.push(color)
            }

        }

        geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        // geometry.addAttribute('ca', new THREE.BufferAttribute(colors, 3));
        var material = new THREE.ShaderMaterial({ fragmentShader: document.getElementById('f-shader').textContent, vertexShader: document.getElementById('v-shader').textContent ,uniforms:uniforms,vertexColors:THREE.VertexColors});
        return new THREE.Points(geometry, material);
    }

我使用的是ShaderMaterial，但颜色总是黑色

   <script type="shader" id="f-shader">
      varying vec4 varColor;

    void main()
      {
        gl_FragColor = varColor;
      }
    </script>

<script type="shader" id="v-shader">

  attribute vec3 vertexColor;

  varying vec4 varColor;

   void main()
    {
     varColor = vec4(vertexColor.rgb, 1.0);

      gl_PointSize = 10.0;
      gl_Position = projectionMatrix * viewMatrix * modelMatrix * 
     vec4(position, 1.0);
  }
 </script>

我该如何解决？

Answer 1

作为一个选项，您可以将纹理传递给着色器并使用uv坐标设置点的颜色：

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.PlaneBufferGeometry(5, 5, 200, 200);
var material = new THREE.ShaderMaterial({
  uniforms: {
    image: {
      value: new THREE.TextureLoader().load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg")
    },
    size: {
      value: 0.05
    },
    scale: {
      value: window.innerHeight / 2.0
    }
  },
  vertexShader: `
   varying vec2 vUv;
   uniform float size;
   uniform float scale;
   void main()
    {
     vUv = uv;

     vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
     gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
     gl_Position = projectionMatrix * mvPosition;
    }
  `,
  fragmentShader: `
  uniform sampler2D image;

  varying vec2 vUv;

  void main() {
      gl_FragColor = texture2D(image, vUv);
  }
  `
});

var points = new THREE.Points(geometry, material);
scene.add(points);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

＆＃13;

＆＃13;