html5悬浮圆圈背景动画特效,html5圆圈浮动背景动画特效
特效描述:html5 圆圈浮动 背景动画特效。html5圆圈浮动背景动画特效
代码结构
1. 引入JS
2. HTML代码
var container;
var camera, scene, projector, renderer;
var PI2 = Math.PI * 2;
var programFill = function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.fill();
}
var programStroke = function ( context ) {
context.lineWidth = 0.05;
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.stroke();
}
var mouse = { x: 0, y: 0 }, INTERSECTED;
init();
animate();
function init() {
container = document.createElement( 'div' );
container.id = 'bgc';
container.style.position = 'relative';
container.style.zIndex = '0';
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 300, 500 );
scene = new THREE.Scene();
for ( var i = 0; i < 100; i ++ ) {
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808080 + 0x808080, program: programStroke } ) );
particle.position.x = Math.random() * 800 - 400;
particle.position.y = Math.random() * 800 - 400;
particle.position.z = Math.random() * 800 - 400;
particle.scale.x = particle.scale.y = Math.random() * 10 + 10;
scene.add( particle );
}
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
var radius = 600;
var theta = 0;
function render() {
// rotate camera
theta += 0.2;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
camera.lookAt( scene.position );
// find intersections
camera.updateMatrixWorld();
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.material.program = programFill;
}
} else {
if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
INTERSECTED = null;
}
renderer.render( scene, camera );
}
html5悬浮圆圈背景动画特效,html5圆圈浮动背景动画特效相关推荐
- 彩色圆圈的html代码,HTML5 Canvas彩色圆点粒子飘动动画特效
js代码 var c = new Cbg({ container: ".canvas", //随机生成动画,默认无控制 control: "auto", //鼠 ...
- 如何设置HTML背景特效,HTML5之按钮背景不同动画特效设计
今天来给大家介绍一下HTML5,讲什么呢,讲讲一组效果非常酷的鼠标滑过按钮背景动画特效. 在该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画background-size和backg ...
- 背景动态线条js特效html5代码
下载地址 背景动态线条特效html5代码,基于canvas画布实现的背景线条动画特效. dd:
- 查看php文件的效果,HTML5的交互式动画效果文件夹预览查看特效
HTML5交互式动画效果文件夹预览查看特效 HTML5交互式动画效果文件夹预览查看特效是一款当鼠标经过的时候文件夹里面的图片悬停显示预览效果. js代码 (function() { new DeviF ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...
- SVG灯泡动画js特效HTML5代码
下载地址 SVG灯泡动画特效HTML5代码是一款0和1代码灯泡特效下载. dd:
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- html5云朵效果,纯CSS3打造逼真的多层云彩动画特效
这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构 该多层 ...
- html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
最新文章
- Debian/Ubuntu/Centos下编译安装RocksDB
- Segment Routing — SRv6 — Overview
- 机器学习笔记 :LSTM 变体 (conv-LSTM、Peephole LSTM、 coupled LSTM、conv-GRU)
- java 闹钟_JAVA可视化闹钟源码
- 您是否尝试过MicroProfile Starter?
- Singleton 和 Monostate 模式
- 牧马人鼠标g13鼠标宏_经典再升级:达尔优牧马人五代游戏鼠标
- spring——事务管理
- oracle CHARINDEX 函数用法
- 从 1.9 到 1.11,聊聊 PyFlink 的核心功能演进(附 Demo 代码)
- 为什么visual的联机浏览功能不能用_Minecraft非正版联机教程
- Tomcat乱码解决方法
- 智慧校园人脸识别门禁系统设计方案
- 视频无法播放,视频打不开怎么办?可用这款视频修复工具快速修复
- 002_SSSS_ Denoising Diffusion Implicit Models
- 计算机接口接触不良,如何处理电脑耳机插口接触不良
- 生活如此美好 我却如此暴躁
- MATLAB无约束优化(UOM)
- tp5下Could not open input file: think解决办法
- manjaro linux无线网卡,为 Manjaro 18.1.4 配置无线网卡