相关疑难解决方法(0)

three.js透明地图问题

我正在创建大量的粒子(确切地说是80.000)并且我已经设置了透明贴图,但并非所有粒子都是透明的.

我正在使用透明的PNG图像: particle.png (它几乎不可见,但它没关系)作为材质图,虽然它显示了如下所示的黑色背景:

粒子

如果你仔细观察,一些颗粒很好地混合在一起(没有重叠的黑色边缘),尽管有些颗粒没有.可能是因为有太多重叠的透明物体或不应该是一个问题?

这是负责生成粒子的片段:

// load the texture
var map = THREE.ImageUtils.loadTexture('img/particle.png');

// create temp variables
var geometry, material;

// create an array with ParticleSystems (I need multiple systems because I have different colours, thus different materials)
var systems = [];

// Loop through every colour
for(var i = 0; i < colors.length; i++) {
    // Create a new geometry
    geometry = new THREE.Geometry();

    // create a new material
    material = new THREE.ParticleBasicMaterial({
        color: colors[i],
        size: 20,
        map: map, …
Run Code Online (Sandbox Code Playgroud)

javascript webgl three.js

8
推荐指数
2
解决办法
6742
查看次数

在Three.js PointCloud中将square改为circle?

我正在使用PLYLoader加载.ply文件,并使用three.js中的PointCloud对象进行渲染.

var loader = new THREE.PLYLoader();
loader.addEventListener('load', function (event) {
    var geometry = event.content;
    var material = new THREE.PointCloudMaterial({ vertexColors: true, size: 0.01 });
    var mesh = new THREE.PointCloud(geometry, material);
    scene.add(mesh);
});
loader.load(file_url);
Run Code Online (Sandbox Code Playgroud)

它工作正常,点数正确呈现.但是这些点呈现为正方形.是否可以将它们更改为圆形?如果是这样,怎么样?

我发现这个旧线程显示了一个three.js样本的图片.我们可以清楚地看到圈子.然而,今天相同的样本显示了正方形(在他们将ParticleSystem更改为PointCloud之后).

谢谢

javascript 3d point-clouds three.js

6
推荐指数
1
解决办法
4169
查看次数

渲染粒子系统中的球体(或点)

我正在使用Three.JS库在Web浏览器中显示点云.点云在启动时生成一次,不再添加或删除其他点.但它确实需要旋转,平移和缩放.我已经通过了教程关于three.js所产生的颗粒在这里

使用该示例,我可以创建正方形的粒子或使用球体的图像来创建纹理.图像更接近我想要的,但是可以在不使用图像的情况下生成点云吗?例如球体几何体.

图像的问题在于,当你有数千个点时,它们似乎有时会在边缘处相互遮挡.从我可以收集的信息来看,点的png文件中的黑色区域似乎会阻挡当前点后面的图像.(但对于后面的点而言它是透明的)

这种模糊图像是我想用形状生成点的原因.我曾尝试更换particles = new THREE.Geometry()THREE.SphereGeometry(radius, segments, rings),并试图顶点更改为球体.

所以我的问题是.如何修改示例代码以使其呈现球体(或点)而不是正方形?此外,粒子系统对于我的特定情况是最有效的系统还是我应该只生成粒子并设置它们各自的位置?正如我所提到的,我只生成一次点,但随后旋转,缩放,平移点.(我使用TrackBall示例代码来使鼠标事件正常工作).

谢谢你的帮助

javascript 3d three.js

3
推荐指数
1
解决办法
8348
查看次数

标签 统计

javascript ×3

three.js ×3

3d ×2

point-clouds ×1

webgl ×1