在粒子系统渲染球（或点） [英] Rendering spheres (or points) in a particle system
问题描述
我现在用的是Three.JS库来显示一个点云中的网络浏览器。点云是在启动时生成一次并没有进一步的点被添加或移除。但它确实需要旋转，平移和缩放。我已经通过本教程了关于three.js 这里
I am using the Three.JS library to display a point cloud in a web brower. The point cloud is generated once at start up and no further points are added or removed. But it does need to be rotated, panned and zoomed. I've gone through the tutorial about creating particles in three.js here
使用例如我可以创建颗粒是方形或使用的球的图像，以创建一个纹理。图像更接近我想要的，但有可能生成点云不使用的形象呢？球体形状的例子。
Using the example I can create particles that are squares or use an image of a sphere to create a texture. The image is closer to what I want, but is it possible to generate the point clouds without using the image? The sphere geometry for example.
与图像的问题是，当你有几千点，看来他们有时会掩盖对方周围的边缘。从我可以收集它的形象立刻好像黑色区域中的一个点的PNG文件块的当前点后面。 （但它是透明的，分差距进一步拉大）
The problem with the image is that when you have thousands of points it seems they sometimes obscure each other around the edges. From what I can gather it seems like the black region in a point's png file blocks the image immediately behind the current point. (But it is transparent to points further behind)
在这种图像模糊化是我想生成使用形状点的原因。我曾尝试更换粒子=新THREE.Geometry（）与 THREE.SphereGeometry（半径，段环）和试图改变顶点到球体
This obscuring of the images is the reason I would like to generate the points using shapes. I have tried replacing particles = new THREE.Geometry() with THREE.SphereGeometry(radius, segments, rings) and tried to change the vertices to spheres.
所以我的问题是。如何修改的例子code，使其呈现，而不是正方形球（或点）？另外，是粒子系统最有效的方式为我的具体情况，或者我应该只生成颗粒，并设置各自的立场？正如我所说，我只有一次产生了点，但随后旋转，缩放，平移点。 （我用轨迹球样品code，以获得鼠标事件的工作）。
So my question is. How do I modify the example code so that it renders spheres (or points) instead of squares? Also, is a particle system the most efficient system for my particular case or should I just generate the particles and set their individual positions? As I mentioned I only generate the points once, but then rotate, zoom, pan the points. (I used the TrackBall sample code to get the mouse events working).
感谢您的帮助
推荐答案
我不认为渲染点云领域是非常有效的。你应该能够得到与粒子系统，并使用纹理或小帆布程序画了一个圈。
I don't think rendering a point cloud with spheres is very efficient. You should be able to get away with a particle system and use a texture or a small canvas program to draw a circle.
一首 three.js样品的使用帆布程序，这里有很重要位：
One of the first three.js sample uses a canvas program, here are the important bits:
var PI2 = Math.PI * 2;
var program = function ( context )
{
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.fill();
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
color: Math.random() * 0x808008 + 0x808080,
program: program
} ) );
随意调整code的WebGL的渲染器。
Feel free to adapt the code for the WebGL renderer.
另外聪明的解决方案我已经看到了的使用的连接codeD WebM视频来存储数据，并传递到通过粒子系统three.js呈现一个GLSL着色器/mrdoob.github.com/three.js/">examples
Another clever solution I've seen in the examples is using an encoded webm video to store the data and pass that to a GLSL shader which is rendered through a particle system in three.js
如果您的点云来自Kinect的，这些资源可能是有用的：
If your point cloud comes from a Kinect, these resources might be useful:
- DepthCam
- KinectJS
这篇关于在粒子系统渲染球（或点）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
