在threejs

Question

我有一个工作在其中颗粒通过帆布使用程序功能上呈现到一个球形物体，这样threejs例如创建用于webgl的渲染器的球形颗粒基本材料：

var material = new THREE.ParticleCanvasMaterial({ 

     color: 0xffffff, 
     program: function (context) { 

     context.beginPath(); 
     context.arc(0, 0, 1, 0, PI2, true); 
     context.closePath(); 
     context.fill(); 

     } 

    }); 

    for (var i = 0; i < 1000; i ++) { 

     particle = new THREE.Particle(material); 
     particle.position.x = Math.random() * 2 - 1; 
     particle.position.y = Math.random() * 2 - 1; 
     particle.position.z = Math.random() * 2 - 1; 
     particle.position.normalize(); 
     particle.position.multiplyScalar(Math.random() * 10 + 600); 

     initParticle(particle, i * 10); 

     scene.add(particle); 

    } 

然而，我我想切换到webGL渲染器，以便运行速度更快，但它没有程序选项。似乎也许我需要使用地图，但我不知道如何。任何人都有关于如何调整此代码以完成与webGL渲染器相同的任何想法。

Answer 1

以下示范如何使用WebGLRenderer程序上创建您的颗粒纹理的例子：http://jsfiddle.net/7yDGy/1/

但是，如果你想使用你自己的纹理，只是你想要的任何纹理加载到map领域：

var texture = THREE.ImageUtils.loadTexture('/images/my_texture.png'); 
// Do NOT set this flag. Explanation provided by WestLangley in the comments 
// texture.needsUpdate=true; 

var material = new THREE.ParticleBasicMaterial({ 
    // ... 
    map: texture, 
    // add all relevant fields as described in the link above 
}); 

// geometry should contain your particle vertices 
var particle = new THREE.ParticleSystem(geometry, material); 
scene.add(particle);