在three.js中使用PointsMaterial載入圖像

我正在學習three.js（r75）並嘗試加載圖像以用作着色器或粒子。渲染後圖像似乎正在加載。在three.js中使用PointsMaterial載入圖像

我在VM（VirtualBox，Win10 base）上使用Ubuntu並通過Python3和Flask運行本地主機服務器。我也嘗試拿出所有框架的東西，並使用Python的SimpleHTTPServer進行測試。通過Chrome標誌「覆蓋軟件渲染列表」啓用3D加速，並且所有示例都可以使用。

從搭便車開始工作，我正在按照Aerotwist上的教程https://aerotwist.com/tutorials/creating-particles-with-three-js/渲染粒子 - 但嘗試應用圖像時，我遇到的問題與我的天空盒完全相同。該教程在應用圖像之前沒有問題。

我所看到的只是一個空白的屏幕（在我的容器中的黑色背景）。

逐步加載時看到文件加載，它在完成呈現後（renderer.render(scene, camera)）似乎正在加載圖像（狀態200） - 但我可能是錯的。開發工具中沒有顯示錯誤。

我的印象是，THREE.ImageUtils.loadTexture()或THREE.TextureLoader.load()會默認處理圖片加載。映射到MeshLambertMaterial時圖像顯示。

似乎是唯一一個有這個問題的人（？！） - 沒有提到關於預加載的教程，而且沒有太多來自谷歌或堆棧溢出 - 任何人都可以建議我做了什麼錯誤或指向了我明顯的東西，請？

謝謝！ :)

這是代碼。

; function Solar3D() { 
'use strict'; 

var scene, renderer, camera, 
    container = $('#webgl-container'), 
    skyBox = null; 

init(); 

function init() { 
    renderer = new THREE.WebGLRenderer({ 
     antialias: true 
    }); 
    renderer.setClearColor(0x000000, 1); 

    var $container = $(container); 
    var containerWidth = $container.width(); 
    var containerHeight = $container.height(); 
    renderer.setSize(containerWidth, containerHeight); 
    container.append(renderer.domElement); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(75, containerWidth/containerHeight, 1, 5000); 
    camera.position.set(0, 155, 32); 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 

    scene.add(particles()); 

    render(); 
} 

function particles() { 
    // https://aerotwist.com/tutorials/creating-particles-with-three-js/ 
    var particleCount = 1800, 
     particles = new THREE.Geometry(), 
     pMaterial = new THREE.PointsMaterial({ 
      color: 0xFFFFFF, 
      size: 20, 
      map: THREE.ImageUtils.loadTexture(
       '/app/static/img/particle.png'), 
      blending: THREE.AdditiveBlending, 
      transparent: true 
     }); 

    for (var p = 0; p < particleCount; p++) { 
     var pX = Math.random() * 500 - 250, 
      pY = Math.random() * 500 - 250, 
      pZ = Math.random() * 500 - 250, 
      particle = new THREE.Vector3(pX, pY, pZ); 
     particles.vertices.push(particle); 
    } 

    var particleSystem = new THREE.Points(
     particles, 
     pMaterial); 

    particleSystem.sortParticles = true; 

    return particleSystem; 
} 

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

function loadTexture(path) { 
    return new THREE.TextureLoader().load(path); 
}

}

來源

2016-04-02 JoF

所以我想答案是顯而易見的！

當我試圖渲染背景時，我不想使動畫複雜化 - 我沒有重新渲染我的場景。

在動畫（或更新）循環中呈現，允許圖像在實際呈現之前完全加載。

我的init()後添加animation();，並用以下

function animate() { 
    render(); 
    requestAnimFrame(animate); 
}

填補它們的完整性 - 我使用該動畫幀：

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})();

容易，當你知道了！感謝給我的問題一些考慮的人。

來源

2016-04-03 15:44:50 JoF

在three.js中使用PointsMaterial載入圖像

回答

相關問題