Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; overflow:hidden }
JavaScript
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, `https://picsum.photos/id/${10+i*2}/200/200`) 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 }); mat.onBeforeCompile = shader => { shader.uniforms.rotation = uniforms.rotation; shader.uniforms.slideIndex = {value: index}; let main = 'void main(' let out = 'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' shader.fragmentShader = shader.fragmentShader.split(main).join( ` uniform float rotation; uniform float slideIndex; ` + main).split(out).join(out + ` float value = abs(slideIndex + vUv.x - rotation - 2.0); value = clamp(value, 0., 1.); if (abs(vUv.y - 0.5) < 0.38 && abs(vUv.x - 0.5) < 0.46) { float grayscale = dot(gl_FragColor.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(grayscale), value); } `); } return mat; } function createDepthMaterial() { const mat = new THREE.MeshDepthMaterial( { depthPacking: THREE.RGBADepthPacking, alphaTest: 0.5 }); mat.onBeforeCompile = shader => { shader.fragmentShader = shader .fragmentShader.split('}') .join(`if (fragCoordZ>0.5) {discard;}}`) //console.log(shader.fragmentShader) } return mat; } function cteateTexture(img) { const pad = 10; const width = img.width + pad*2; const holesCount = 10; const w = width/holesCount/2; const h = w; const canvas = document.createElement('canvas'); canvas.height = img.height + pad*4+h*2; canvas.width = width; const ctx = canvas.getContext('2d'); ctx.fillStyle = filmColor; ctx.fillRect(0,0,1e5,1e5); ctx.drawImage(img, pad, pad*2+h); for (let i = 0; i
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>电影螺旋three.js-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号