threejs effects -1 立体浮雕效果和视差屏障效果

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 立体浮雕效果和视差屏障效果相关推荐

35个立体动感的视差滚动效果网站作品
这篇文章收集了35个具有立体动感效果的视差滚动网页设计作品分享给大家.视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今 ...
推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
【特别推荐】精心挑选的6款优秀的 jQuery 视差滚动效果插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
计算机多媒体技术视差估计,面向立体视频的视差_运动同步联立预测算法
<面向立体视频的视差_运动同步联立预测算法>由会员分享,可在线阅读,更多相关<面向立体视频的视差_运动同步联立预测算法(6页珍藏版)>请在技术文库上搜索. 1.第 22 卷第 ...
计算机多媒体技术视差估计,立体视频中视差估计研究
摘要: 伴随着计算机技术的快速发展,视频编解码技术得到了很大程度的提高.然而,随着人们对视频信息的渴求,单视点视频信息已经不再能够满足人们的要求.近年来,具有3D视觉功能的立体视频技术及多视点视频技术 ...
使用Skrollr创建视差滚动效果页面
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.随着用户对视觉体验的要求不断提高,WEB开发者开始在网页中加入各种特效元素以 ...
jquery实现的视差滚动教程(视差大背景效果)
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.现在越来越多的网 ...
【面试题】1014- 面试官：如何使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...
QQTIM首页视差滚动效果案例
<QQ TIM>案例 html 在头部引入html5shiv.min.js文件,此处作用是判断浏览器是否是IE9以下版本的, 如果是,则执行兼容性文件,不是的话就跳过 <!--[if ...

threejs effects -1 立体浮雕效果和视差屏障效果

AnaglyphEffect实现立体浮雕渲染效果

ParallaxBarrierEffect实现视差屏障效果

threejs effects -1 立体浮雕效果和视差屏障效果相关推荐

最新文章

热门文章