https://synabiz.co.jp/top/script/Point.js

1var Point,
2  bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
3
4Point = (function() {
5  function Point(i, bg) {
6    var timeout;
7    this.i = i;
8    this.bg = bg;
9    this.getNextVertex = bind(this.getNextVertex, this);
10    this.sizeChange = bind(this.sizeChange, this);
11    this.moveTo = bind(this.moveTo, this);
12    this.disappear = bind(this.disappear, this);
13    this.appear = bind(this.appear, this);
14    this.createLine = bind(this.createLine, this);
15    this.frame = bind(this.frame, this);
16    this.nowIndex = 1;
17    this.lineFromSphere = this.lineToSphere = this.bg.sphere1;
18    this.lineFromVertex = this.lineToVertex = this.lineFromSphere.geometry.vertices[this.i];
19    this.x = 0;
20    this.y = 0;
21    this.z = 0;
22    this.color = new THREE.Color(0x39D188);
23    this.opacity = 1;
24    this.targetOpacity = 1;
25    this.lineOpacity = 0.7;
26    this.size = 0;
27    this.lineColor = new THREE.Color(0x39D188);
28    this.line = this.createLine();
29    this.bg.group2.add(this.line);
30    $window.on('frame', this.frame);
31    setTimeout((function(_this) {
32      return function() {
33        return _this.appear();
34      };
35    })(this), 5000 * Math.random());
36    timeout = null;
37    $main.find('.area1').on('active', (function(_this) {
38      return function(e) {
39        clearTimeout(timeout);
40        _this.nowIndex = 1;
41        _this.targetOpacity = 0.7;
42        _this.lineOpacity = 0.7;
43        return _this.lineColor = new THREE.Color(0x39D188);
44      };
45    })(this));
46    $main.find('.area2').on('active', (function(_this) {
47      return function(e) {
48        clearTimeout(timeout);
49        timeout = setTimeout(function() {
50          return _this.nowIndex = 2;
51        }, 500);
52        _this.targetOpacity = 0.2;
53        _this.lineOpacity = 0.2;
54        if (0.9 < Math.random()) {
55          return _this.lineColor = new THREE.Color(0xe055ab);
56        } else {
57          return _this.lineColor = new THREE.Color(0x39D188);
58        }
59      };
60    })(this)).on('inactive', (function(_this) {
61      return function() {};
62    })(this));
63    $main.find('.area3').on('active', (function(_this) {
64      return function(e) {
65        clearTimeout(timeout);
66        _this.nowIndex = 3;
67        _this.targetOpacity = 0;
68        _this.lineOpacity = 0.6;
69        return _this.lineColor = new THREE.Color(0xffffff);
70      };
71    })(this));
72  }
73
74  Point.prototype.frame = function() {
75    var lfv, ltv, vf, vt;
76    vf = this.lineFromVertex.clone();
77    vf.applyMatrix4(this.lineFromSphere.matrixWorld);
78    vt = this.lineToVertex.clone();
79    vt.applyMatrix4(this.lineToSphere.matrixWorld);
80    this.x = vt.x;
81    this.y = vt.y;
82    this.z = vt.z;
83    this.opacity += (this.targetOpacity - this.opacity) * 0.2;
84    this.line.geometry.verticesNeedUpdate = true;
85    lfv = this.line.geometry.vertices[0];
86    ltv = this.line.geometry.vertices[1];
87    lfv.x = vf.x;
88    lfv.y = vf.y;
89    lfv.z = vf.z;
90    ltv.x = vt.x;
91    ltv.y = vt.y;
92    ltv.z = vt.z;
93    this.line.material.opacity += (this.lineOpacity - this.line.material.opacity) * 0.2;
94    this.line.material.color.r += (this.lineColor.r - this.line.material.color.r) * 0.2;
95    this.line.material.color.g += (this.lineColor.g - this.line.material.color.g) * 0.2;
96    return this.line.material.color.b += (this.lineColor.b - this.line.material.color.b) * 0.2;
97  };
98
99  Point.prototype.createLine = function() {
100    var geometry;
101    geometry = new THREE.Geometry();
102    geometry.vertices.push(new THREE.Vector3());
103    geometry.vertices.push(new THREE.Vector3());
104    return new THREE.Line(geometry, new THREE.LineBasicMaterial({
105      color: 0x39D188,
106      opacity: this.lineOpacity,
107      transparent: true
108    }));
109  };
110
111  Point.prototype.appear = function() {
112    var nextVertex;
113    nextVertex = this.getNextVertex(this.lineFromVertex);
114    if (nextVertex) {
115      return this.sizeChange(this.bg.pointsSetting.startSize, TWEEN.Easing.Elastic.Out, this.bg.pointsSetting.d1, (function(_this) {
116        return function() {
117          return _this.moveTo(nextVertex);
118        };
119      })(this));
120    } else {
121      this.lineFromSphere = this.lineToSphere;
122      return setTimeout((function(_this) {
123        return function() {
124          return _this.appear();
125        };
126      })(this), this.bg.pointsSetting.delay * Math.random());
127    }
128  };
129
130  Point.prototype.disappear = function() {
131    this.lineFromVertex = this.lineToVertex;
132    this.lineFromSphere = this.lineToSphere;
133    return this.sizeChange(0, TWEEN.Easing.Elastic.In, this.bg.pointsSetting.d3, (function(_this) {
134      return function() {
135        return setTimeout(function() {
136          return _this.appear();
137        }, _this.bg.pointsSetting.delay * Math.random());
138      };
139    })(this));
140  };
141
142  Point.prototype.moveTo = function(v) {
143    var diff, startSize;
144    if (this.nowIndex === 2) {
145      if (this.lineFromSphere === this.bg.sphere1) {
146        this.lineToSphere = this.bg.sphere2;
147      } else {
148        this.lineToSphere = this.bg.sphere1;
149      }
150    } else {
151      this.lineFromSphere = this.lineToSphere = this.bg.sphere1;
152    }
153    this.lineToVertex = v;
154    $window.off('frame', this.frame);
155    startSize = this.size;
156    diff = this.bg.pointsSetting.endSize - this.size;
157    return animate({
158      duration: this.bg.pointsSetting.d2,
159      easing: TWEEN.Easing.Cubic.InOut,
160      step: (function(_this) {
161        return function(percent) {
162          var lfv, ltv, vf, vt;
163          vf = _this.lineFromVertex.clone();

164          vf.applyMatrix4(_this.lineFromSphere.matrixWorld);
165          vt = _this.lineToVertex.clone();
166          vt.applyMatrix4(_this.lineToSphere.matrixWorld);
167          _this.x = vf.x + (vt.x - vf.x) * percent;
168          _this.y = vf.y + (vt.y - vf.y) * percent;
169          _this.z = vf.z + (vt.z - vf.z) * percent;
170          _this.size = startSize + diff * percent;
171          _this.line.geometry.verticesNeedUpdate = true;
172          lfv = _this.line.geometry.vertices[0];
173          ltv = _this.line.geometry.vertices[1];
174          lfv.x = vf.x;
175          lfv.y = vf.y;
176          lfv.z = vf.z;
177          ltv.x = _this.x;
178          ltv.y = _this.y;
179          return ltv.z = _this.z;
180        };
181      })(this),
182      done: (function(_this) {
183        return function() {
184          $window.on('frame', _this.frame);
185          return _this.disappear();
186        };
187      })(this)
188    });
189  };
190
191  Point.prototype.sizeChange = function(size, easing, duration, cb) {
192    var diff, startSize;
193    startSize = this.size;
194    diff = size - this.size;
195    return animate({
196      duration: duration,
197      easing: easing,
198      step: (function(_this) {
199        return function(percent) {
200          return _this.size = startSize + diff * percent;
201        };
202      })(this),
203      done: (function(_this) {
204        return function() {
205          return cb();
206        };
207      })(this)
208    });
209  };
210
211  Point.prototype.getNextVertex = function(vertex) {
212    var distance, farVertex, farVertexList, i, j, len, len1, nearVertexList, otherSphere, ref, ref1, v, vf, vt;
213    if (this.nowIndex === 2) {
214      if (this.lineFromSphere === this.bg.sphere1) {
215        otherSphere = this.bg.sphere2;
216      } else {
217        otherSphere = this.bg.sphere1;
218      }
219      farVertexList = [];
220      ref = this.bg.sphere1.geometry.vertices;
221      for (i = 0, len = ref.length; i < len; i++) {
222        v = ref[i];
223        distance = Math.pow(vertex.x - v.x, 2) + Math.pow(vertex.y - v.y, 2) + Math.pow(vertex.z - v.z, 2);
224        if (2000000 < distance) {
225          farVertexList.push(v);
226        }
227      }
228      farVertex = farVertexList[Math.floor(Math.random() * farVertexList.length)];
229      vf = vertex.clone();
230      vf.applyMatrix4(this.lineFromSphere.matrixWorld);
231      vt = farVertex.clone();
232      vt.applyMatrix4(otherSphere.matrixWorld);
233      distance = Math.pow(vf.x - vt.x, 2) + Math.pow(vf.y - vt.y, 2) + Math.pow(vf.z - vt.z, 2);
234      if (distance < 1000000) {
235        return farVertex;
236      } else {
237        return false;
238      }
239    } else {
240      nearVertexList = [];
241      ref1 = this.bg.sphere1.geometry.vertices;
242      for (j = 0, len1 = ref1.length; j < len1; j++) {
243        v = ref1[j];
244        distance = Math.pow(vertex.x - v.x, 2) + Math.pow(vertex.y - v.y, 2) + Math.pow(vertex.z - v.z, 2);
245        if ((0 < distance && distance < 15000)) {
246          nearVertexList.push(v);
247        }
248      }
249      return nearVertexList[Math.floor(Math.random() * nearVertexList.length)];
250    }
251  };
252
253  return Point;
254
255})();