2017-02-03 29 views
1

的前提:3 JS的函數調用更改背景圖片

我試圖創建具有固定圖像的背景和在它前面的幾何形狀的靜態場景。由於場景是靜態的,我不需要和envMap

我在this SO questionthis demo建議了兩個場景和攝像機(一個用於背景,一個用於幾何圖形),並更新了程序以考慮THREE.ImageUtils.loadTexture() is deprecated。這裏是工作代碼:

// load the background texture 
var loader = new THREE.TextureLoader(); 
texture = loader.load('path_to_image.jpg'); 
var backgroundMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2, 0), 
    new THREE.MeshBasicMaterial({ 
     map: texture 
    }) 
); 
backgroundMesh.material.depthTest = false; 
backgroundMesh.material.depthWrite = false; 

// create your background scene 
backgroundScene = new THREE.Scene(); 
backgroundCamera = new THREE.Camera(); 
backgroundScene.add(backgroundCamera); 
backgroundScene.add(backgroundMesh); 

變量backgroundScenebackgroundCamera是全球性的,並按照以下步驟被稱爲init()函數內。所有的場景和照相機都採用後呈現:

renderer.autoClear = false; 
renderer.clear(); 
renderer.render(backgroundScene , backgroundCamera); 
renderer.render(scene, camera); 

問題:

我實現了一個應該當按下一個按鈕來更改背景圖片和幾何形狀的事件監聽器,但是這是不工作。

我認爲加載新紋理和更改backgroundScene變量的材質屬性,清除renderer並再次渲染場景將完成這項工作。下面是代碼:

var loader = new THREE.TextureLoader(); 
var texture = loader.load('path_to_new_image.jpg'); 
console.debug(texture); 
console.debug(backgroundScene.children[1].material.map); 
backgroundScene.children[1].material.map = texture; 
console.debug(backgroundScene.children[1].material.map); 

renderer.clear(); 
renderer.render(backgroundScene , backgroundCamera); 
renderer.render(scene, camera); 

console.debug()告訴我,新的紋理實際加載和backgroundScene材料相應改變。

但是,儘管幾何圖形呈現良好,但我留下了空白背景並且出現以下錯誤:[.Offscreen-For-WebGL-0x364ad7e56700]RENDER WARNING: there is no texture bound to the unit 0

發生了什麼事情的任何想法?謝謝你的幫助!

回答

1

您需要致電object.material.needsUpdate = true;才能使更改生效(請參閱here)。當物料的map屬性發生更改時,three.js需要重新設置紋理綁定,除非設置了needsUpdate-標誌,否則會跳過該紋理綁定。

另外,如果你只是改變material.map.image-屬性,它應該沒有額外的步驟。