<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程052 - 制作立方体添加重影特效</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
<script src="ThreeJS/EffectComposer.js"></script>
<script src="ThreeJS/RenderPass.js"></script>
<script src="ThreeJS/ShaderPass.js"></script>
<script src="ThreeJS/RGBShiftShader.js"></script>
</head>
<body>
<p><button id="myButton1">添加重影特效</button>
<button id="myButton2">保持原状</button>
</p>
<div id="myContainer"></div>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$("#myContainer").append(myRenderer.domElement);
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(71, 121, 44);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
var myScene = new THREE.Scene();
//创建立方体
var myGeometry = new THREE.BoxBufferGeometry(50, 50, 50);
var myMap = THREE.ImageUtils.loadTexture("images/img073.jpg");
var myMaterial = new THREE.MeshBasicMaterial({ map: myMap });
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myMesh.position.y = 2;
myScene.add(myMesh);
//在场景中实现后期特效(添加重影特效)
var myEffectComposer = new THREE.EffectComposer(myRenderer);
myEffectComposer.addPass(new THREE.RenderPass(myScene, myCamera));
var myShaderPass = new THREE.ShaderPass(THREE.RGBShiftShader);
myShaderPass.uniforms['amount'].value = 0.005;
myEffectComposer.addPass(myShaderPass);
//渲染添加重影特效之后的图形
animate();
function animate() {
requestAnimationFrame(animate);
myEffectComposer.render();
}
//响应单击“添加重影特效”按钮
$("#myButton1").click(function () {
myEffectComposer.addPass(myShaderPass);
});
//响应单击“保持原状”按钮
$("#myButton2").click(function () {
myEffectComposer.addPass(new THREE.RenderPass(myScene, myCamera));
});
</script>
</body>
</html>
