引入的js
<script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script> <script src="../../plugins/CopyShader.js"></script> <script src="../../plugins/EffectComposer.js"></script> <script src="../../plugins/RenderPass.js"></script> <script src="../../plugins/ShaderPass.js"></script> <script src="../../plugins/BokehShader.js"></script> <script src="../../plugins/BokehPass.js"></script>
function initThree(elid,options) {
let scene,camera ,renderer,viewer
viewer={}
el = document.getElementById(elid)
const width = el.offsetWidth, height = el.offsetHeight,asp = width / height
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize(width, height);
el.append(renderer.domElement);
renderer.setClearColor('#000')
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
camera.position.set(10,10,10)
camera.lookAt(0,0,0)
scene.add(camera)
viewer.scene=scene
viewer.camera=camera
viewer.renderer=renderer
const controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法时,将此函数删除
controls.addEventListener( 'change', ()=>{
renderer.render( scene, camera );
});
viewer.controls=controls
renderer.render( scene, camera );
return viewer
}
let app=new initThree('box')
let scene=app.scene
let renderer=app.renderer
let camera=app.camera
camera.position.set(50,50,50)
const box = new THREE.Mesh(new THREE.BoxBufferGeometry(2,2,2) ,new THREE.MeshBasicMaterial({color:'red'}))
box.position.set(0,1,0)
scene.add(box)
const renderPass = new THREE.RenderPass( scene, camera );
const bokehPass = new THREE.BokehPass( scene, camera, {
focus: 1.0,
aperture: 0.025,
maxblur: 1.0,
width: el.offsetWidth,
height: el.offsetHeight
} )
const composer = new THREE.EffectComposer( renderer );
composer.addPass( renderPass )
composer.addPass( bokehPass )
const postprocessing = { }
const effectController = {
focus: 500.0,
aperture: 5,
maxblur: 1.0
};
postprocessing.composer = composer
postprocessing.bokeh = bokehPass
postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur
let number = 0
function render() {
postprocessing.composer.render( 0.1 )
effectController.aperture = effectController.aperture - 0.01
if(effectController.aperture < 0) {
effectController.aperture = 5
}
postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur
requestAnimationFrame(render)
}
render()