在 Three.js 中将图像转换为点云答案

【问题标题】：Turning an image into Point Cloud in Three.js在 Three.js 中将图像转换为点云
【发布时间】：2020-04-30 05:19:18
【问题描述】：

我想将图像转换为点云并根据颜色值偏移 z 位置。到目前为止，我有：

已加载图像，并在加载时
构建几何并在几何中存储图像颜色
创建一个 PointsMaterial 并构建一个 THREE.Points
添加到场景

但是，结果看起来与输入图像完全不同。我错过了一些东西，但不确定是什么。

关于显示图像的点云版本，我缺少什么？

示例：https://img2pointcloud.glitch.me/

<html>
  <head>
    <script src="https://threejs.org/build/three.js"></script>
  </head>
  <body style="margin:0">
    <script>
      var container, renderer, points;

      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        10000
      );
      camera.position.set(0, 0, 1000);

      var renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      var imgSrc =
        "https://cdn.glitch.com/c3afecd9-365c-424f-a08e-90fce02a151a%2Fimg.jpeg?v=1588102020636";
      var img = new Image();
      var width = 1920 / 4;
      var height = 1080 / 4;
      img.crossOrigin = "anonymous";
      img.src = imgSrc;

      img.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var imageData = ctx.getImageData(0, 0, width, height);
        var data = imageData.data;
        document.body.appendChild(canvas);
        createPointCloud(imageData);
      };

      function createPointCloud(imageData) {

        var geometry = new THREE.BufferGeometry();
        var positions = [];

        for (var x = 0; x < height; x++) {
          for (var z = 0; z < width; z++) {
            positions.push(x, z, x);
          }
        }

        var color = new THREE.Color();
        var colors = [];

        for (let i = 0; i < imageData.data.length; i += 4) {
          const r = imageData.data[i + 0];
          const g = imageData.data[i + 1];
          const b = imageData.data[i + 2];
          const a = imageData.data[i + 3];
          color.setRGB(r, g, b);
          colors.push(color.r, color.b, color.c);
        }

        geometry.setAttribute(
          "position",
          new THREE.Float32BufferAttribute(positions, 3)
        );
        geometry.setAttribute(
          "color",
          new THREE.Float32BufferAttribute(colors, 3)
        );

        geometry.computeBoundingSphere();

        var material = new THREE.PointsMaterial({
          size: 0.1,
          vertexColors: true
        });

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

        animate();
      }

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>


  [1]: https://i.stack.imgur.com/9etFB.png
  [2]: https://i.stack.imgur.com/HKM7m.png

【问题讨论】：

试试这个方法：const r = imageData.data[i + 0] / 255;，并将其用于g、b和a

标签： three.js point-clouds

【解决方案1】：

另一种方法是修改THREE.PointsMaterial()的着色器：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(-75, 0, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

new THREE.TextureLoader().load("https://cdn.glitch.com/c3afecd9-365c-424f-a08e-90fce02a151a%2Fimg.jpeg?v=1588102020636", tex => {

    let img = tex.image;
    console.log(img.width, img.height);

    let g = new THREE.PlaneBufferGeometry(Math.floor(img.width / 4), Math.floor(img.height / 4), img.width, img.height);
    let m = new THREE.PointsMaterial({
      map: tex,
      size: 0.1
    });
    m.onBeforeCompile = shader => {
      shader.vertexShader = `
        varying vec2 vUv;
        ${shader.vertexShader}
      `;
      shader.vertexShader = shader.vertexShader.replace(
        `#include <color_vertex>`,
        `
        vUv = uv;
        #include <color_vertex>`
      );
      shader.fragmentShader = `
        varying vec2 vUv;
        ${shader.fragmentShader}
      `;
      shader.fragmentShader = shader.fragmentShader.replace(
        `#include <map_particle_fragment>`,
        `vec4 mapTexel = texture2D( map, vUv );
	        diffuseColor = mapTexel;
          `
      );
      console.log(shader.vertexShader);

    };
    let p = new THREE.Points(g, m);
    scene.add(p);

});

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

【讨论】：

【解决方案2】：

我的代码中有一个很大的错字，出于某种原因，它显示为 colors.push(color.r, color.b, color.c); 而不是 colors.push(color.r, color.g, color.b);（注意 rbc 与 rgb）。

现在排序，感谢评论，让我看到了。

【讨论】：