沿着几何three.js所精灵的尺寸 [英] Size of sprites along geometry Three.js

问题描述

我要显示沿图精灵的动画。特别是移动精灵行走的身影。
因此，如下所示：

  http://armsglobe.chromeexperiments.com/
 

我立足于这个问题的答案：

<$p$p><$c$c>http://stackoverflow.com/questions/25898635/three-js-how-to-animate-particles-along-a-line

这是我的结果，精灵开始时很小，那么他们得到更大。我想谁都是一样的大小。

但我需要你的精灵相同的大小。我看了看code，但不知道该怎么办所有精灵相同的大小。

我将不胜AP preciate如果你能帮助。

解决方案

雪碧不能使用 sizeAttenuation 功能是假的。
您需要使用点云。
HTTP：//$c$cpen.io/seanseansean/pen/EaBZEY

在参数您寻找pontCloud材料是 sizeAttenuation = FALSE 。

将相对于画布大小所有粒子的大小。不会改变的角度来看

  VAR几何=新THREE.Geometry（）;
    geometry.vertices.push（新THREE.Vector3（））;
VAR大小= 32; //意味着32PXVAR sectorIcon =新THREE.PointCloud（几何，新THREE.PointCloudMaterial（{大小：大小，颜色，新的THREE.Color（0XFFFFFF），depthTest：1，depthWrite：假的，不透明度：0.5，sizeAttenuation：假的，混合：三种。 AdditiveBlending，透明：真的，地图：THREE.ImageUtils.loadTexture（IMG /部门/+ value.image_file）}））;
 

I want to show an animation of sprites along the figure. specifically moving sprites walking figure. so as shown here:

http://armsglobe.chromeexperiments.com/

I am basing on the answer to this question:

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

This is my result, sprites start out small, then they get bigger. I want who are the same size.

but I need you all sprites the same size. I looked at the code but does not know what to do for all sprites the same size .

I would greatly appreciate if you can help.

解决方案

Sprite cannot use sizeAttenuation feature to be false. You need to use Pointcloud. http://codepen.io/seanseansean/pen/EaBZEY

Parameter in pontCloud material you searching for is the sizeAttenuation= false.

Will make all particles size relative to canvas size. will not change in perspective.

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) } ) );

这篇关于沿着几何three.js所精灵的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！