Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; padding: 0; } #container { position: fixed; touch-action: none; }
JavaScript
var container = void 0; var camera = void 0, scene = void 0, renderer = void 0; var uniforms = void 0; var loader = new THREE.TextureLoader(); var texture = void 0, _500 = void 0; loader.setCrossOrigin("anonymous"); loader.load('//www.jq22.com/gxwj/noise2.png', function (tex) { texture = tex; texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.minFilter = THREE.LinearFilter; loader.load('//www.jq22.com/gxwj/500.png', function (tex) { _500 = tex; init(); animate(); }); }); function init() { container = document.getElementById('container'); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry(2, 2); uniforms = { u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() }, u_pxaspect: { type: 'f', value: window.devicePixelRatio }, u_noise: { type: "t", value: texture }, u_text500: { type: "t", value: _500 }, u_mouse: { type: "v2", value: new THREE.Vector2(-.1, -.1) } }; var material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); material.extensions.derivatives = true; var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); onWindowResize(); window.addEventListener('resize', onWindowResize, false); document.addEventListener('pointermove', function (e) { var ratio = window.innerHeight / window.innerWidth; uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio; uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1; e.preventDefault(); }); } function onWindowResize(event) { renderer.setSize(window.innerWidth, window.innerHeight); uniforms.u_resolution.value.x = renderer.domElement.width; uniforms.u_resolution.value.y = renderer.domElement.height; } function animate(delta) { requestAnimationFrame(animate); render(delta); } var capturer = new CCapture({ verbose: true, framerate: 60, // motionBlurFrames: 4, quality: 90, format: 'webm', workersPath: 'js/' }); var capturing = false; isCapturing = function isCapturing(val) { if (val === false && window.capturing === true) { capturer.stop(); capturer.save(); } else if (val === true && window.capturing === false) { capturer.start(); } capturing = val; }; toggleCapture = function toggleCapture() { isCapturing(!capturing); }; window.addEventListener('keyup', function (e) { if (e.keyCode == 68) toggleCapture(); }); var then = 0; function render(delta) { uniforms.u_time.value = delta * 0.0005; renderer.render(scene, camera); if (capturing) { capturer.capture(renderer.domElement); } }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ThreeJS光影效果-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号