使用图像作为地图创建粒子

我在创建使用图像作为纹理贴图上的粒子时遇到了麻烦。下面是我的代码：使用图像作为地图创建粒子

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

使用图像作为地图创建粒子

回答

相关问题