我该如何翻译的THREE.PointCloud对象的顶点？ [英] How do I translate vertices in a THREE.PointCloud object?
问题描述
我想：
- 在画一个
THREE.PointCloud对象约。 15万点，其中点从Web应用程序发送的。 - 比例在
THREE.PointCloud目标点实现类似于这样的结果（使用呈现Mayavi的）
问题是：
- 数据传递给
THREE.PointCloud目标似乎是不准确的 - 在
three.js渲染，点设置成八个立方体，不知什么原因（我不应用任何缩放或转换到分）
实例的服务器响应（我已经包含在这篇文章底部的样本数据）：
{'几何'：[[-156，65，89]，
[268，84，337]
[-205，68，170]
[-87，69，52]，
...
[289，81，143]
[141，78，280]，
[403，75，351]]
元数据：{最大：{X：421，Y：105，Z：458}，
最小：{X：-335，Y：63，Z：39}}}
在 three.js code用于创建点云：
VAR容器;
VAR的场景，相机，渲染器，控制;
变种几何形状，材料，目;
在里面（）;
动画（）;
功能的init（）{
现场=新THREE.Scene（）;
摄像头=新THREE.PerspectiveCamera（27 window.innerWidth / window.innerHeight，5，5000）;
camera.position.z = 2750;
//添加一个缓冲几何粒子系统
VAR几何=新THREE.BufferGeometry（）;
VAR颗粒= {{LEN（拓扑['几何']）}};
VAR几何=新THREE.BufferGeometry（）;
VAR位置=新Float32Array（粒* 3）;
VAR颜色=新Float32Array（粒* 3）;
VAR颜色=新THREE.Color（）;
变种I = 0;
{％的点拓扑['几何']％}
VAR X = {{点[0]}};
变种Y = {{点[1]}};
变种Z = {{点[2]}};
//存放点的位置
位置[I] = X;
位置[I + 1] = Y;
位置[1 + 2] = Z;
//指定一种颜色的点
color.setRGB（0.42，0.42，0.42）;
颜色[我] = color.r;
颜色[1 + 1] = color.g;
颜色[I + 2] = color.b;
我+ = 1;
{％ 结束 ％}
geometry.addAttribute（位置，新THREE.BufferAttribute（位置，3））;
geometry.addAttribute（'颜色'，新THREE.BufferAttribute（颜色，3））;
geometry.computeBoundingSphere（）;
VAR材料=新THREE.PointCloudMaterial（{尺寸：15，vertexColors：THREE.VertexColors}）;
粒子系统=新THREE.PointCloud（几何形状，材料）;
scene.add（粒子系统）;
//灯
光=新THREE.DirectionalLight（0XFFFFFF）;
light.position.set（1，1，1）;
scene.add（光）;
//设置渲染器
渲染器=新THREE.WebGLRenderer（{反锯齿：虚假}）;
renderer.setSize（window.innerWidth，window.innerHeight）;
renderer.setPixelRatio（window.devicePixelRatio）;
//附加渲染#container的DOM元素
容器=的document.getElementById（'集装箱'）;
container.appendChild（renderer.domElement）;
//添加窗口侦听器的resize事件
window.addEventListener（'调整'，onWindowResize，假）;
//调用呈现循环
动画（）;
}
功能onWindowResize（）{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix（）;
renderer.setSize（window.innerWidth，window.innerHeight）;
渲染（）;
}
功能动画（）{
requestAnimationFrame（动画）;
renderer.render（场景，摄像头）;
}
功能渲染（）{
renderer.render（场景，摄像头）;
}
场景最终看起来是这样的：
有什么建议？我用下面的例子中code，但我有困难的正确实施定标在我的数据集的要点：的 http://threejs.org/examples/#webgl_buffergeometry_particles
链接到的数据，我与（2MB，180K线）工作的一个样本：<一href="https://gist.githubusercontent.com/TylerJFisher/659e3e233f8aa458feee/raw/889c0dd0093fd0476094af48488aab62c8666271/topology.asc" rel="nofollow">https://gist.githubusercontent.com/TylerJFisher/659e3e233f8aa458feee/raw/889c0dd0093fd0476094af48488aab62c8666271/topology.asc
我用你的样本数据。把它放在一个阵列，这样的：
VAR数据= [
-156 65 89，
268 84 337，
-205 68 170，
-87 69 52，
...
]。
和使用THREE.Geometry（）的点云：
VAR几何=新THREE.Geometry（）;
VAR颜色= [];
为（变种X = 0 X - 其中; data.length; X ++）{
变种pointCoord =数据[X] .split（）;
如果（pointCoord.length = 3！）继续;
变种currentColor =新THREE.Color（0.5,1，0.5）;
colors.push（currentColor）;
geometry.vertices.push（
新THREE.Vector3（
pointCoord [2]，
pointCoord [1]，
pointCoord [0]
）
）;
};
//
执行console.log（geometry.vertices.length）;
geometry.colors =颜色;
VAR材料=新THREE.PointCloudMaterial（{尺寸：1，vertexColors：THREE.VertexColors}）;
粒子系统=新THREE.PointCloud（几何形状，材料）;
scene.add（粒子系统）;
另外，在地理数据，坐标x和y总是交换（在此情况下，存在x和z）。如果你不这样做，你会得到那么镜像对象。这就是为什么我把它当成
新THREE.Vector3（
pointCoord [2]，
pointCoord [1]，
pointCoord [0]
）
而不是
新THREE.Vector3（
pointCoord [0]，
pointCoord [1]，
pointCoord [2]
）
其结果是在这里：地理
是的，在您的样本数据中的一些线条显得不正确。装置他们有代替3- 1或2的值。
I am trying to:
- Draw a
THREE.PointCloudobject with approx. 150k points where points are sent from a web application. - Scale the points in the
THREE.PointCloudobject to achieve a result similar to this (rendered usingMayaVi):
The problem is that:
- Data passed to the
THREE.PointCloudobject seems to be inaccurate - When rendered in
three.js, points are arranged into eight cubes, for unknown reasons (I'm not applying any scaling, or transformations to the points)
Example server response (I have included sample data at the bottom of this post):
{'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}}}
The three.js code used to create the point cloud:
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);
}
The scene ends up looking like this:
Any suggestions? I've used the following example code, but I'm having difficulty properly implementing scaling for the points in my dataset: http://threejs.org/examples/#webgl_buffergeometry_particles
Link to a sample of data that I am working with (2MB, 180k lines): https://gist.githubusercontent.com/TylerJFisher/659e3e233f8aa458feee/raw/889c0dd0093fd0476094af48488aab62c8666271/topology.asc
I used your sample data. Put it in an array, like this:
var data = [
"-156 65 89",
"268 84 337",
"-205 68 170",
"-87 69 52",
...
];
and used THREE.Geometry() for PointCloud:
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 );
Also, in geodata, coordinates x and y are always swapped (in this case, there are x and z). If you won't do it, you'll get mirrored object then. That's why I put it as
new THREE.Vector3(
pointCoord[2],
pointCoord[1],
pointCoord[0]
)
instead of
new THREE.Vector3(
pointCoord[0],
pointCoord[1],
pointCoord[2]
)
The result is here: geodata
And yes, some lines in your sample data seem incorrect. Means they have 1 or 2 values instead of 3.
这篇关于我该如何翻译的THREE.PointCloud对象的顶点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
