Reputation: 2634
I'm having trouble creating a particle using an image as a map on a texture. Below is my code:
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);
}
A fiddle with this code is here: jsfiddle
I am aware I can use the Three Image Helper as follows:
map: THREE.ImageUtils.loadTexture(
"FILE PATH"
),
But I am implementing my own asset loader and so do not wish to use it on an individual basis. Currently my code above shows no errors but no particle is displayed.
Upvotes: 1
Views: 1876
Reputation: 15113
The particle is being displayed, but the camera is very far of it.
Change this line:
camera.position.z = 8000;
To something like this:
camera.position.z = 50;
Upvotes: 2