- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试:
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/
我想使用图中所示的迷宫,使用迭代深度优先搜索找到从起始节点到目标的路径。它是一个仅包含一对数字的文本文件,例如成对连接,又称边/弧。像这样: 11 3 2 3 0 3 1 4 5 4 5 7 6 7
问题:您有一个无向图 G = (V, E)(V = 顶点,E = 边),您必须访问每个顶点并在两个方向上通过每个边。 我所知道的图算法只有 DFS、BFS 和一些 MST(Kruskal 等)不幸的是
枚举任意图中两个顶点之间的所有简单路径通常需要指数时间,因为顶点之间可能存在指数数量的简单路径。但是,如果我们只对位于两个末端顶点之间的至少一条简单路径上的顶点怎么办? 即:给定一个无向图和两个不同的
我正在开发一个简单的 opengl 游戏以了解更多相关信息。但是由于某种原因,当我尝试随时间旋转我的立方体时,它会被拉伸(stretch)。你可以在照片中看到它: 我认为这与我的模型矩阵有关,但我不确
我已经在谷歌上搜索了很长一段时间,但我找不到任何东西。如何使用 Graphviz 绘制没有连接顶点的图形? 最佳答案 像这样: digraph g { SingleNode; } 简单地不定义
我目前正在使用 R 中的“igraph”包进行一些社交网络分析,我想知道是否有一种方法可以个性化社交网络中节点的放置。 例如,使用以下玩具代码: library(igraph) edg
我在 Box2D 中有一个多边形形状。形状是一个三角形,我希望有 3 个顶点。事实上,我创建的所有形状都会输出 8 个顶点。为什么是这样?如果我输出顶点数,那总是正确的数量。我不想渲染不必要的线条,但
来自user manual CGAL Surface_mesh 类: the data structure uses integer indices as descriptors for vertic
我正在尝试找到引用 ARFaceGeometry 网格索引的方法为了使用 ARKit 将图形放置在面部的特定部位。 我见过很多例子,其中功能与一些索引号,但我找不到对此列表的任何引用。它似乎有超过12
Apache TomCat(版本未知) 业务对象 4.1 顶点 4.4.3 在一台服务器上,我们拥有 TomCat 和 Business Objects。 APEX 也使用 TomCat。 在对我们的
我正在使用 MX Graph 进行一些工作,以帮助识别网站中的关键内容路径。我将其设置为每个顶点代表网站上的一个页面,每条边代表一组从页面 A 访问页面 B 的访问者。 一切都运行良好,除了边太多,我
我正在尝试使用三角形 strip 绘制一个平面。我了解如何手动执行此操作,但我真的很难使用 for 循环来执行此操作。到目前为止,下面的代码绘制了两个三角形。 //vertices for trian
如果我想通过 id 顶点获取名称,我可以使用这个函数:VAS(g, "name",id)但是如果我想要相反的方式,通过名称获取 id,我该怎么做呢? 最佳答案 igraph 本身不提供按名称查找顶点的
我有一个三角形,其任意顶点位于 3D 空间中。 我知道通过以下操作很容易找到这种三角形的质心: float centroid[3] = { 0, 0, 0 }; for (int i = 0; i =
我有一个点数组。每个点都有位置(x, y, z) 和法 vector (xn, yn, zn) ,一共6个 double 。考虑到浮点容差,我需要在此数组中找到唯一元素并删除重复条目。 实现它的简单有
我有一个相互连接的边列表 (E),如何找到从一个顶点连接到另一个顶点的最短路径? 我正在考虑使用 lowest common ancestors ,但边缘没有明确定义的根,所以我认为该解决方案不起作用
我现在正在使用计算着色器开发粒子系统。我将所有粒子都放在着色器存储缓冲区中。一个粒子包含两个顶点,当前位置和先前位置。 struct Particle{ glm::vec4 _currPo
我将我的顶点剪裁在边缘上,如这张专辑所示: http://imgur.com/a/VkCrJ 当我的地形大小为 400 x 400 时,我得到裁剪,但在 40x40 或更小时,我没有得到任何裁剪。这是
总是在顶点着色器中而不是在片段着色器中更好地进行硬计算吗?即使是具有超过 100.000 个多边形的高网格模型(假设有一堆独特的顶点)? 最佳答案 不,它并不总是更好。 选择合适的计算位置的最佳方法是
我想编辑一个立方体上的 1 个顶点,但我不知道该怎么做。我试过到处寻找此功能,但找不到解决方案。 这是我想要实现的目标的图像: 最佳答案 http://answers.unity3d.com/ques
我是一名优秀的程序员,十分优秀!