使用图像作为贴图创建粒子答案

【问题标题】：Creating a particle using an image as a map使用图像作为贴图创建粒子
【发布时间】：2012-06-19 22:22:20
【问题描述】：

我在使用图像作为纹理贴图来创建粒子时遇到问题。以下是我的代码：

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"
),

但我正在实现自己的资产加载器，因此不希望单独使用它。目前我上面的代码没有显示错误，但没有显示任何粒子。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

粒子正在显示，但相机离它很远。

改变这一行：

camera.position.z = 8000;

这样的：

camera.position.z = 50;

【讨论】：