的前提:3 JS的函數調用更改背景圖片
我試圖創建具有固定圖像的背景和在它前面的幾何形狀的靜態場景。由於場景是靜態的,我不需要和envMap
。
我在this SO question和this 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);
變量backgroundScene
和backgroundCamera
是全球性的,並按照以下步驟被稱爲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
。
發生了什麼事情的任何想法?謝謝你的幫助!