three打造一个三维电影胶卷滚动动画效果代码
代码语言:html
所属分类:三维
代码描述:three打造一个三维电影胶卷滚动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow:hidden } </style> </head> <body translate="no" > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script> const infinite = false; const waveLength = 1.1; const slideCount = 8; const precision = 25; const raduis = 0.7; const filmWidth = 0.3; const filmColor = '#876'; const three = configureThree(); const customDepthMaterial = createDepthMaterial(); const uniforms = { rotation: { value: 0 } }; const film = new THREE.Object3D(); three.scene.add(film); for (let i = 0; i < slideCount * 3; i++) addSlide(i, `//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90`); let rotation = 1.2; requestAnimationFrame(function render(t) { moveFilm(t); three.render(); requestAnimationFrame(render); }); // constols let touchStartY; let rotationAtStart; addEventListener('touchstart', e => { touchStartY = e.touches[0].clientY; rotationAtStart = rotation; }); addEventListener('touchmove', e => { rotation = rotationAtStart + (e.touches[0].clientY - touchStartY) / 50; }); addEventListener('wheel', e => { rotation -= e.deltaY / 400; }); // function configureThree() { const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.localClippingEnabled = true; document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); scene.add(new THREE.AmbientLight('white', 0.3)); scene.add(createDirectionalLight()); const camera = new THREE.OrthographicCamera(); camera.position.set(0, 0, 1.5); camera.lookAt(scene.position); return { scene, render }; function render() { if (renderer.width !== innerWidth || renderer.height !== innerHeight) { renderer.setSize(innerWidth, innerHeight); camera.left = -innerWidth / innerHeight; camera.right = -camera.left; camera.updateProjectionMatrix(); } renderer.render(scene, camera); } } function createDirectionalLight() { const dirLight = new THREE.DirectionalLight('white', 0.7); dirLight.castShadow = true; dirLight.position.set(-0.1, 0.1, 1); dirLight.shadow.mapSize.width = 1024; dirLight.shadow.mapSize.height = 2048; dirLight.shadow.camera.left = -1; dirLight.shadow.camera.right = 1; dirLight.shadow.camera.top = 2; dirLight.shadow.camera.bottom = -2; dirLight.shadow.camera.near = 0.1; dirLight.shadow.camera.far = 2; return dirLight; } function addSlide(i, url) { const img = document.createElement('img'); img.crossOrigin = 'anonymous'; img.src = url; img.onload = () => { const geom = createGeometry(i); let slide = new THREE.Mesh(geom, createMaterial(img, i, -1)); slide.receiveShadow = true; film.add(slide); slide = new THREE.Mesh(geom, createMaterial(img, i, 1)); slide.castShadow = true; slide.customDepthMaterial = customDepthMaterial; slide.customDepthMaterial.map = slide.material.map; film.add(slide); }; } function createMaterial(img, index, side) { const mat = new THREE.MeshStandardMaterial({ map: cteateTexture(img), side: THREE.DoubleSide, clippingPlanes: [new THREE.Plane(new THREE.Vector3(0, 0, side), 0.0001)], alphaTest: 0.5 }); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0