html5 canvas实现梦幻的3D刺猬球
今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球。页面非常梦幻。效果图如下:
html代码:
<div>
<canvas width="1366" height="62" style="width: 1366px; height: 62px;">
</canvas>
</div>
js代码:
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight, r = 200, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2, camera, scene, renderer; init();
animate(); function init() { var container; container = document.createElement('div');
document.body.appendChild(container); camera = new THREE.PerspectiveCamera(80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000);
camera.position.z = 1000; scene = new THREE.Scene(); var i, line, vertex1, vertex2, material, p,
parameters = [[3.5, 0x90CEBF, 0.5, 1]], geometry = new THREE.Geometry(); for (i = 0; i < 1500; i++) { var vertex1 = new THREE.Vector3();
vertex1.x = Math.random() * 2 - 1;
vertex1.y = Math.random() * 2 - 1;
vertex1.z = Math.random() * 2 - 1;
vertex1.normalize();
vertex1.multiplyScalar(r); vertex2 = vertex1.clone();
vertex2.multiplyScalar(Math.random() * 0.09 + 1); geometry.vertices.push(vertex1);
geometry.vertices.push(vertex2); } for (i = 0; i < parameters.length; ++i) { p = parameters[i]; material = new THREE.LineBasicMaterial({ color: p[1], opacity: p[2], linewidth: p[3] }); line = new THREE.Line(geometry, material, THREE.LinePieces);
line.scale.x = line.scale.y = line.scale.z = p[0];
line.originalScale = p[0];
line.rotation.y = Math.random() * Math.PI;
line.updateMatrix();
scene.add(line); } renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false); // window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if (event.touches.length > 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY; } } // function animate() { requestAnimationFrame(animate); render(); } function render() { camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
camera.lookAt(scene.position); renderer.render(scene, camera); var time = Date.now() * 0.0001; for (var i = 0; i < scene.children.length; i++) { var object = scene.children[i]; if (object instanceof THREE.Line) { object.rotation.y = time * (i < 4 ? (i + 1) : -(i + 1)); } } }
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/6585
html5 canvas实现梦幻的3D刺猬球的更多相关文章
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
- 50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- HTML5 Canvas 梦幻的文字飞扬动画教程
之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览 源码下载 实现代码如下: html ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
随机推荐
- Zuul使用Ribbon配置自动重试
spring cloud的版本不断演进,导致很多配置的配置方式不断改变,有时某个配置在一个版本里面默认是true,后边一升级默认成了false,这点让人有点不爽. 言归正传 0.所使用版本 sprin ...
- 首页设计的可用性和PET
网站的首页是一个让人头疼的东西.有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页.也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而 ...
- 使用Python的turtle库实现七段数码管绘制
七段数码管绘制:七段数码管是由7段数码管拼接而成,每段有亮或不亮两种情况,改进的七段数码管还包括一个小数点位置.七段数码管能形成2=128种状态,其中部分状态能够显示易于人们理解的数字或字母含义.因此 ...
- Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
- 转:造HTTP请求Header实现“伪造来源IP”
构造 HTTP请求 Header 实现“伪造来源 IP ” 在阅读本文前,大家要有一个概念,在实现正常的TCP/IP 双方通信情况下,是无法伪造来源 IP 的,也就是说,在 TCP/IP 协议中,可以 ...
- DBA_实践指南系列4_Oracle Erp R12系统备份和恢复Backup(案例)
2013-12-04 Created By BaoXinjian
- Linux内核同步 - classic RCU的实现
一.前言 无论你愿意或者不愿意,linux kernel的版本总是不断的向前推进,做为一个热衷于专研内核的工程师,最大的痛苦莫过于此:当你熟悉了一个版本的内核之后,内核已经推进到一个新的版本,你曾经熟 ...
- /proc/meminfo分析(一)
本文主要分析/proc/meminfo文件的各种输出信息的具体含义. 一.MemTotal MemTotal对应当前系统中可以使用的物理内存. 这个域实际是对应内核中的totalram_pages这个 ...
- JavaScript / Html 转 pdf、图片
Javascript 将 HTML 页面生成 PDF html2canvas: https://github.com/niklasvh/html2canvas jsPDF: https://githu ...
- PCIE的DMA和PIO介绍
墨尘 百家号01-2422:14 在PCIE中有两种数据传输方式: DMA(Direct Memory Access),直接内存访问,在该模式下,数据传送不是由CPU负责处理,而是由一个特殊的处理器D ...