<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>
