-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathThree.js
More file actions
75 lines (59 loc) · 2.28 KB
/
Three.js
File metadata and controls
75 lines (59 loc) · 2.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var scene = new THREE.Scene();
document.addEventListener('mousemove', onMouseMove, false);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var mouseX;
var mouseY;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
var distance = Math.min(200, window.innerWidth / 4);
var geometry = new THREE.Geometry();
for (var i = 0; i < 1600; i++) {
var vertex = new THREE.Vector3();
var theta = THREE.Math.randFloatSpread(360) * Math.PI / 180;
var phi = THREE.Math.randFloatSpread(360) * Math.PI /180;
vertex.x = distance * Math.sin(theta) * Math.cos(phi);
vertex.y = distance * Math.sin(theta) * Math.sin(phi);
vertex.z = distance * Math.cos(theta);
geometry.vertices.push(vertex);
}
var particles = new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0xff44ff, size: 2 }));
particles.boundingSphere = 50;
var renderingParent = new THREE.Group();
renderingParent.add(particles);
var resizeContainer = new THREE.Group();
resizeContainer.add(renderingParent);
scene.add(resizeContainer);
camera.position.z = 400;
var animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
var myTween;
function onMouseMove(event) {
if (myTween)
myTween.kill();
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
myTween = gsap.to(particles.rotation, { duration: 0.1, x: mouseY * -1, y: mouseX });
//particles.rotation.x = mouseY*-1;
//particles.rotation.y = mouseX;
}
animate();
// Scaling animation
var animProps = { scale: 1, xRot: 0, yRot: 0 };
gsap.to(animProps, {
duration: 10, scale: 1.3, repeat: -1, yoyo: true, ease: "sine", onUpdate: function () {
renderingParent.scale.set(animProps.scale, animProps.scale, animProps.scale);
}
});
gsap.to(animProps, {
duration: 120, xRot: Math.PI * 2, yRot: Math.PI * 4, repeat: -1, yoyo: true, ease: "none", onUpdate: function () {
renderingParent.rotation.set(animProps.xRot, animProps.yRot, 0);
}
});