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+1
mesh.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.onWindowResize();
requestAnimationFrame(animate);
}
function threeStart(){
init();
initModel();
initGui();
animate();
}
threeStart();
</script>
</body>
</html>