1.利用html元素的div背景图来设置。
2.利用render设置color来渲染【只能设置rgb颜色,无法设置图片】
3.利用threejs的EffectComposer渲染通道来处理。谁先addPass。则谁先渲染.部分代码如下:
sceneBG = new THREE.Scene();
var materialColor = new THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture("../images/bg_network2.jpg"),
depthTest: false
});
materialColor.map.wrapS;
materialColor.map.wrapT;
console.log(materialColor);
var bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), materialColor);
bgPlane.position.z = -100;
bgPlane.scale.set(window.innerWidth * 2, window.innerHeight * 2, 1);
sceneBG.add(bgPlane);
cameraBG = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);
cameraBG.position.z = 50;
var effectCopy = new THREE.ShaderPass(THREE.FXAAShader);
effectCopy.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;
composer.addPass(bgPass);
composer.addPass(Pass);
composer.addPass(effectCopy);
部分代码,仅提供思路。