使用圖像作爲地圖創建粒子

我在創建使用圖像作爲紋理貼圖上的粒子時遇到了麻煩。下面是我的代碼：使用圖像作爲地圖創建粒子

var camera, scene, renderer, material, img, texture; 

init(); 
animate(); 

function init() { 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 8000; 
    scene.add(camera); 

    img = new Image(); 
    texture = new THREE.Texture(img); 

    img.onload = function() { 
    texture.needsUpdate = true; 
    makeParticle(); 
    }; 
    img.src = "http://www.aerotwist.com/tutorials/creating-particles-with-three-js/images/particle.png"; 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
} 

function makeParticle() { 
    material = new THREE.ParticleBasicMaterial({ 
    color: 0xE60000, 
    size: 20, 
    map: texture, 
    blending: THREE.AdditiveBlending, 
    transparent: true 
    }); 
    // make the particle 
    particle = new THREE.Particle(material); 
    particle.scale.x = particle.scale.y = 1; 
    scene.add(particle); 
} 


function animate() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
}

與此代碼小提琴是在這裏：jsfiddle

我知道我可以用三個圖像助手如下：

map: THREE.ImageUtils.loadTexture(
    "FILE PATH" 
),

但我實現我的自己的資產加載器，所以不希望個別使用它。目前我上面的代碼顯示沒有錯誤，但沒有顯示粒子。

來源

2012-06-19 Jamie Fearon

粒子正在顯示，但相機是非常遙遠的。

改變這一行：

camera.position.z = 8000;

爲了這樣的事情：

camera.position.z = 50;

來源

2012-06-19 14:22:20

使用圖像作爲地圖創建粒子

回答

相關問題