AnaglyphEffect实现立体浮雕渲染效果
①首先引用插件包，该js文件在threejs工程文件夹的example目录下的js/effects/可以找到
<script type="text/javascript" src="js/effects/AnaglyphEffect.js" ></script>
②实例化AnaglyphEffect对象，并传入参数，设置属性
//必须使用普通渲染方式renderer=new THREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerHeight,window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);//再添加效果var width=window.innerWidth || 2;var height=window.innerHeight || 2;effect=new THREE.AnaglyphEffect(renderer);effect.setSize(width,height);
③最后在循环渲染
function render(){//renderer.render(scene,camera);effect.render(scene,camera);//该渲染基于renderer}
ParallaxBarrierEffect实现视差屏障效果
①首先引用插件包
<script type="text/javascript" src="js/effects/ParallaxBarrierEffect.js" ></script>
②实例化ParallaxBarrierEffect对象，并传入参数，设置属性
var width=window.innerWidth || 2;var height=window.innerHeight || 2;effect=new THREE.ParallaxBarrierEffect(renderer);effect.setSize(width,height);
③最后在循环渲染
function render(){//renderer.render(scene,camera);effect.render(scene,camera);//该渲染基于renderer}
效果例子查看地址
代码示例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>立体浮雕和视差屏障效果展示</title><script type="text/javascript" src="js/three.js" ></script><script type="text/javascript" src="js/libs/stats.min.js" ></script><script type="text/javascript" src="js/libs/dat.gui.min.js" ></script><script type="text/javascript" src="js/WebGL.js" ></script><script type="text/javascript" src="js/effects/AnaglyphEffect.js" ></script><script type="text/javascript" src="js/effects/ParallaxBarrierEffect.js" ></script><style>body{padding: 0;margin: 0;overflow: hidden;}</style></head><body><script>if(WEBGL.isWebGLAvailable()===false){alert("该浏览器不支持WebGL!");document.body.appendChild(WEBGL.getWebGLErrorMessage());}var scene,renderer,camera,controls,stats;var cubeTexture=new THREE.CubeTextureLoader().setPath("img/two/").load(["px.png","nx.png","py.png","ny.png","pz.png","nz.png",]);var effect;var effect1;function init(){scene=new THREE.Scene();scene.background=cubeTexture;renderer=new THREE.WebGLRenderer({antialias:true,});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.01,100);camera.position.set(0,3,3);stats=new Stats();document.body.appendChild(stats.domElement);scene.add(new THREE.AmbientLight(0xffffff));var width=window.innerWidth || 2;var height=window.innerHeight || 2;//立体浮雕effect=new THREE.AnaglyphEffect(renderer);effect.setSize(width,height);//视差屏障effect1=new THREE.ParallaxBarrierEffect(renderer);effect1.setSize(width,height);};var axes;var spheres=[];function initModel(){axes=new THREE.AxesHelper(30);axes.visible=false;scene.add(axes);var geometry=new THREE.SphereBufferGeometry(0.1,32,16);var material=new THREE.MeshBasicMaterial({color:0xffffff,envMap:cubeTexture});for (var i=0;i<500;i++) {var mesh=new THREE.Mesh(geometry,material);mesh.position.set(Math.random()*10-5,Math.random()*10-5,Math.random()*10-5);var s=Math.random()*3+1mesh.scale.set(s,s,s);scene.add(mesh);spheres.push(mesh);}}var setting;function initGui(){setting={axesVisible:false,effects:"AnaglyphEffect"};var gui=new dat.GUI();gui.add(setting,"axesVisible").onChange(function(e){axes.visible=e;});gui.add(setting,"effects",['none','AnaglyphEffect','ParallaxBarrierEffect']).name("选择渲染效果");}var mouseX=0,mouseY=0;var windowHalfX=window.innerWidth/2;var windowHalfY=window.innerHeight/2;function onDocumentMouseMove(event){mouseX=(event.clientX-windowHalfX)/100;mouseY=(event.clientY-windowHalfY)/100;}document.addEventListener("mousemove",onDocumentMouseMove,false);function onWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}function render(){camera.position.x+=(mouseX-camera.position.x)*0.05;camera.position.y+=(-mouseY-camera.position.y)*0.05;camera.lookAt(scene.position);var timer=Date.now()*0.0001;for(var i=0;i<500;i++){var sphere=spheres[i];sphere.position.x=5*Math.sin(timer+i);sphere.position.y=5*Math.sin(timer+i*1.1);}switch (setting.effects){case "none":renderer.render(scene,camera);break;case "AnaglyphEffect":effect.render(scene,camera);break;case "ParallaxBarrierEffect":effect1.render(scene,camera);break;}}function animate(){render();stats.update();window.onresize=onWindowResize();requestAnimationFrame(animate);}function threeStart(){init();initModel();initGui();animate();}threeStart();</script></body></html>
如果觉得《threejs effects -1 立体浮雕效果和视差屏障效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
