沿几何体Three.js的精灵大小

时间:2015-12-07 16:50:42

标签: javascript animation three.js particles

我想在图中显示精灵的动画。特别是移动精灵行走的身影。 如图所示:

http://armsglobe.chromeexperiments.com/

我基于这个问题的答案:

http://stackoverflow.com/questions/25898635/three-js-how-to-animate-particles-along-a-line

enter image description here

这是我的结果,精灵从小开始,然后变得更大。我想要谁的大小相同。

但我需要你们所有的精灵都一样大小。我查看了代码,但不知道该为所有相同大小的精灵做些什么。

如果你能提供帮助,我将不胜感激。 enter image description here

1 个答案:

答案 0 :(得分:0)

Sprite无法使用sizeAttenuation功能。 您需要使用Pointcloudhttp://codepen.io/seanseansean/pen/EaBZEY

您搜索的pontCloud材质中的参数是sizeAttenuation= false

将使所有粒子大小相对于画布大小。不会改变观点。

var geometry = new THREE.Geometry();      
    geometry.vertices.push( new THREE.Vector3() );
var size = 32; // means 32px

var sectorIcon = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { size: size, color: new THREE.Color( 0xffffff ), depthTest: 1, depthWrite: false,  opacity: 0.5, sizeAttenuation: false, blending: THREE.AdditiveBlending, transparent: true, map: THREE.ImageUtils.loadTexture("img/sectors/"+value.image_file) } ) );