JSDM

HTML

 
1
<!--fixed it so now it works-->

CSS

xxxxxxxxxx
2
 
1
canvas { margin: 0px; padding: 0px; background-color: #000; }
2
body {margin: 0px; padding: 0px; background-color: #111111; }
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

x
 
1
/*
2
Torus Particle Canvas Animation - just a quick fun pink canvas thing for rodeo-006
3
used some code from three.js docs - http://threejs.org/examples/canvas_particles_random.html
4
also used some code from PV3D - http://www.dehash.com/torus-tweener/
5
Three.js + canvas + GSAP
6
*/
7
8
// edit#1 - gsap here temporary - unfortunately need to replace the excellent gsap with hand coded tween  because three.js is already included
9
// edit#2 - does not work as it is - requires another include gsap  http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js
10
// edit#3 - wrote a simple tween function so now it works - just not quite as well as with gsap :)
11
12
13
var container, camera, scene, renderer, group, particle;
14
var mouseX = 0, mouseY = 0;
15
var w = window.innerWidth;
16
var h = window.innerHeight;
17
18
init();
19
animate();
20
//TweenLite.ticker.addEventListener("tick", render);
21
function init() {
22
  container = document.createElement( 'div' );
23
  document.body.appendChild( container );
24
  camera = new THREE.PerspectiveCamera( 75, w / h, 1, 3000 );
25
  camera.position.z = 1000;
26
  scene = new THREE.Scene();
27
  var PI2 = Math.PI * 2;
28
  var program = function ( context ) {
29
    context.beginPath();
30
    context.arc( 0, 0, 1, 0, PI2, true );
31
    context.closePath();
32
    context.fill();
33
  }
34
  group = new THREE.Object3D();
35
  scene.add( group );
36
  var t = new THREE.TorusGeometry( 450, 250, 12, 12, PI2);
37
  for ( var i = 0; i < t.vertices.length; i++ ) {
38
    particle = new THREE.Particle(
39
        new THREE.ParticleCanvasMaterial( { color: 0xEA80B0, program: program } ) );
40
    particle.position.x = 0;
41
    particle.position.y = 0;
42
    particle.position.z = 0;
43
    particle.scale.x = particle.scale.y = 10;
44
  //  TweenMax.to(particle.position, 2, {x:t.vertices[i].x, y:t.vertices[i].y,z:t.vertices[i].z,ease:Power2.easeInOut,delay:((i + 1)/10)});
45
     makeTween(particle.position,i,t.vertices[i].x,t.vertices[i].y,t.vertices[i].z,i+60);
46
    group.add( particle );
47
  }
48
  renderer = new THREE.CanvasRenderer();
49
  renderer.setSize( w, h );
50
  container.appendChild( renderer.domElement );
51
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
52
  document.addEventListener( 'touchstart', onDocumentTouchStart, false );
53
  document.addEventListener( 'touchmove', onDocumentTouchMove, false );
54
  //
55
  window.addEventListener( 'resize', onWindowResize, false );
56
}
57
58
function onWindowResize() {
59
  w = window.innerWidth;
60
  h = window.innerHeight;
61
  camera.aspect = w/h;
62
  camera.updateProjectionMatrix();
63
  renderer.setSize( w, h );
64
65
}
66
//
67
function onDocumentMouseMove( event ) {
68
  mouseX = event.clientX - w/2;
69
  mouseY = event.clientY - h/2;
70
}
71
72
function onDocumentTouchStart( event ) {
73
  if ( event.touches.length === 1 ) {
74
    event.preventDefault();
75
    mouseX = event.touches[ 0 ].pageX - w/2;
76
    mouseY = event.touches[ 0 ].pageY - h/2;
77
  }
78
}
79
80
function onDocumentTouchMove( event ) {
81
  if ( event.touches.length === 1 ) {
82
    event.preventDefault();
83
    mouseX = event.touches[ 0 ].pageX - w/2;
84
    mouseY = event.touches[ 0 ].pageY - h/2;
85
  }
86
}
87
88
//
89
function animate() {
90
  requestAnimationFrame( animate );
91
  render();
92
}
93
94
function render() {
95
  camera.position.x += ( mouseX - camera.position.x ) * 0.05;
96
  camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
97
  camera.lookAt( scene.position );
98
  group.rotation.x += 0.01;
99
  group.rotation.y += 0.02;
100
  renderer.render( scene, camera );
101
}
102
103
// simple tween
104
function makeTween(o,d,tx,ty,tz,t){
105
  var cnt=0;
106
var f=function(){
107
    cnt++; if(cnt>d){
108
    if (cnt>=t+d){o.x = tx; o.y = ty; o.z = tz;
109
      clearInterval(o.tweenInterval);
110
      //console.log("stopped"+cnt);
111
    } else {
112
      o.x =linearTween(cnt-d,0,tx,t);
113
      o.y =linearTween(cnt-d,0,ty,t);
114
      o.z =linearTween(cnt-d,0,tz,t);
115
    } } }
116
  clearInterval(o.tweenInterval);
117
  o.tweenInterval = setInterval(f,1000/60);
118
}
119
//http://www.robertpenner.com/easing/penner_easing_as1.txt
120
 function linearTween(t, b, c, d) {return c*t/d + b;};
121
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................