我正在尝试:
- 绘制一个
THREE.PointCloud
对象,大约。 150k 点,其中点从网络应用程序发送。 - 缩放
THREE.PointCloud
对象中的点以获得类似于此的结果(使用MayaVi
渲染):
问题在于:
- 传递给
THREE.PointCloud
对象的数据似乎不准确 - 在
three.js
中呈现时,点被排列成八个立方体,原因不明(我没有对点应用任何缩放或转换)
示例服务器响应(我在本文底部包含示例数据):
{'geometry': [[-156, 65, 89],
[268, 84, 337],
[-205, 68, 170],
[-87, 69, 52],
...
[289, 81, 143],
[141, 78, 280],
[403, 75, 351]],
'metadata': {'max': {'x': 421, 'y': 105, 'z': 458},
'min': {'x': -335, 'y': 63, 'z': 39}}}
用于创建点云的three.js
代码:
var container;
var scene, camera, renderer, controls;
var geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 5000);
camera.position.z = 2750;
//Add a buffer geometry for particle system
var geometry = new THREE.BufferGeometry();
var particles = {{ len(topology['geometry']) }};
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array(particles * 3);
var colors = new Float32Array(particles * 3);
var color = new THREE.Color();
var i = 0;
{% for point in topology['geometry'] %}
var x = {{ point[0] }};
var y = {{ point[1] }};
var z = {{ point[2] }};
//Store the position of the point
positions[i] = x;
positions[i + 1] = y;
positions[i + 2] = z;
//Assign a colour to the point
color.setRGB(0.42, 0.42, 0.42);
colors[i] = color.r;
colors[i + 1] = color.g;
colors[i + 2] = color.b;
i+=1;
{% end %}
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeBoundingSphere();
var material = new THREE.PointCloudMaterial({ size: 15, vertexColors: THREE.VertexColors });
particleSystem = new THREE.PointCloud(geometry, material);
scene.add(particleSystem);
//Lights
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
//Set up renderer
renderer = new THREE.WebGLRenderer({ antialias:false });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
//Attach renderer to #container DOM element
container = document.getElementById('container');
container.appendChild(renderer.domElement);
//Add window listener for resize events
window.addEventListener('resize', onWindowResize, false);
//Call render loop
animate();
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function render(){
renderer.render(scene, camera);
}
场景最终看起来是这样的:
有什么建议吗?我使用了以下示例代码,但我很难正确实现数据集中点的缩放:http://threejs.org/examples/#webgl_buffergeometry_particles
链接到我正在使用的数据样本(2MB,180k 行):https://gist.githubusercontent.com/TylerJFisher/659e3e233f8aa458feee/raw/889c0dd0093fd0476094af48488aab62c8666271/topology.asc
最佳答案
我使用了您的样本数据。把它放在一个数组中,像这样:
var data = [
"-156 65 89",
"268 84 337",
"-205 68 170",
"-87 69 52",
...
];
并为 PointCloud 使用了 THREE.Geometry():
var geometry = new THREE.Geometry();
var colors = [];
for ( var x = 0; x < data.length; x++){
var pointCoord = data[ x ].split(" ");
if ( pointCoord.length != 3 ) continue;
var currentColor = new THREE.Color( 0.5, 1, 0.5 );
colors.push( currentColor );
geometry.vertices.push(
new THREE.Vector3(
pointCoord[2],
pointCoord[1],
pointCoord[0]
)
);
};
//
console.log( geometry.vertices.length );
geometry.colors = colors;
var material = new THREE.PointCloudMaterial( { size: 1, vertexColors: THREE.VertexColors } );
particleSystem = new THREE.PointCloud( geometry, material );
scene.add( particleSystem );
此外,在地理数据中,坐标 x 和 y 总是交换(在本例中,有 x 和 z)。如果您不这样做,那么您将获得镜像对象。这就是为什么我把它写成
new THREE.Vector3(
pointCoord[2],
pointCoord[1],
pointCoord[0]
)
代替
new THREE.Vector3(
pointCoord[0],
pointCoord[1],
pointCoord[2]
)
结果在这里:geodata
是的,您的示例数据中的某些行似乎不正确。表示它们有 1 个或 2 个值,而不是 3 个。
关于javascript - 如何平移 THREE.PointCloud 对象中的顶点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28866200/