在Three.js中将图像转换为点云
我想将图像转换为点云，并基于颜色值偏移z位置。到目前为止，我已经：在Three.js中将图像转换为点云,three.js,point-clouds,Three.js,Point Clouds,我想将图像转换为点云，并基于颜色值偏移z位置。到目前为止，我已经： 加载图像，并在加载时 构建几何体并在几何体中存储图像颜色 创建一个点材质并构建一个三点材质 添加到场景中 但是，结果与输入图像完全不同。我错过了一些东西，但不确定是什么 关于显示点云版本的图像，我缺少什么？ 例如： var容器、渲染器、点； var scene=new THREE.scene（）； var摄像机=新的三视角摄像机( 45, window.innerWidth/window.innerHeight， 1. 100
var容器、渲染器、点；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机(
45,
window.innerWidth/window.innerHeight，
1.
10000
);
摄像机位置设置（0,0,1000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var imgSrc=
"https://cdn.glitch.com/c3afecd9-365c-424f-a08e-90fce02a151a%2Fimg.jpeg?v=1588102020636";
var img=新图像（）；
可变宽度=1920/4；
可变高度=1080/4；
img.crossOrigin=“匿名”；
img.src=imgSrc；
img.onload=函数（）{
var canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
var imageData=ctx.getImageData（0，0，宽度，高度）；
var数据=imageData.data；
document.body.appendChild（画布）；
createPointCloud（imageData）；
};
函数createPointCloud（imageData）{
var geometry=new THREE.BufferGeometry（）；
var头寸=[]；
对于（变量x=0；xcolors.push（color.r，color.b，color.c）colors.push（color.r、color.g、color.b）（注意rbc和rgb）
现在排序，感谢您的评论，让我看到了它。另一种方法是修改THREE.PointsMaterial（）的着色器。
：
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，内宽/内高，11000）；
摄像机位置设置（-75,0,1）；
var renderer=new THREE.WebGLRenderer（）；
设置大小（innerWidth，innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
新的三个.TextureLoader（）.load（“https://cdn.glitch.com/c3afecd9-365c-424f-a08e-90fce02a151a%2Fimg.jpeg?v=1588102020636“，tex=>{
设img=tex.image；
控制台日志（img.宽度，img.高度）；
设g=新的三个平面缓冲几何体（数学地板（img.width/4）、数学地板（img.height/4）、img.width、img.height）；
设m=新的三点材质({
地图：特克斯，
尺寸：0.1
});
m、 onbeforecomile=shader=>{
shader.vertexShader=`
可变vec2 vUv；
${shader.vertexShader}
`;
shader.vertexShader=shader.vertexShader.replace(
`#包括`，
`
vUv=紫外线；
#包括`
);
shader.fragmentShader=`
可变vec2 vUv；
${shader.fragmentShader}
`;
shader.fragmentShader=shader.fragmentShader.replace(
`#包括`，
`vec4 mapTexel=纹理2D（贴图，vUv）；
diffuseColor=mapTexel；
`
);
console.log（shader.vertexShader）；
};
设p=新的三个点（g，m）；
场景。添加（p）；
});
renderer.setAnimationLoop（（）=>{
渲染器。渲染（场景、摄影机）
});
正文{
溢出：隐藏；
保证金：0；
}
这样试试：constr=imageData.data[i+0]/255，并将其用于g
、b
和a
<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