2012-07-09 113 views
3

我有一個粒子是圖像。當我旋轉粒子時,它會在後面留下一圈。我如何擺脫這個奇怪的圈子?如何在three.js中旋轉粒子

的小提琴是在這裏:http://jsfiddle.net/zUvsp/137/

代碼:

var camera, scene, renderer, material, img, texture, particle; 
init(); 
animate(); 

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

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

    img.onload = function() { 
    texture.needsUpdate = true; 
    makeParticle(); 
    }; 
    img.src = "http://www.atalasoft.com/cs/blogs/davidcilley/files/PNG_Mask.png"; 

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

function makeParticle() { 
    material = new THREE.ParticleBasicMaterial({ 
    map: texture, 
    blending: THREE.AdditiveBlending, 
    }); 
    // make the particle 
    particle = new THREE.Particle(material); 
    particle.scale.x = particle.scale.y = 1; 
    particle.position.x = 10; 
    scene.add(particle); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
    particle.rotation.z += 0.01 
} 

回答

0

-edit 我測試了我的理論,它不是問題,不要浪費你的時間

只是一個猜測,但我認爲它可能與你從不同的域加載紋理.png有關。 嘗試使用從您的代碼運行的相同域加載的圖像,並查看是否解決了問題。

我認爲這個問題可能與three.js無法訪問紋理上的像素數據有關,因爲Cross-origin問題。