-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
105 lines (85 loc) · 2.43 KB
/
main.js
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import * as THREE from "three";
import gsap from "gsap";
import vertexShader from "./shaders/vertex.glsl";
import fragmentShader from "./shaders/fragment.glsl";
import atmosphereVertexShader from "./shaders/atmosphereVertex.glsl";
import atmosphereFragmentShader from "./shaders/atmosphereFragment.glsl";
import { Float16BufferAttribute } from "three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
innerWidth / innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// Create a sphere
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(5, 50, 50),
new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
globeTexture: {
value: new THREE.TextureLoader().load("./img/globe.jpg"),
},
},
})
);
// Create an atmosphere
const atmosphere = new THREE.Mesh(
new THREE.SphereGeometry(5, 50, 50),
new THREE.ShaderMaterial({
vertexShader: atmosphereVertexShader,
fragmentShader: atmosphereFragmentShader,
blending: THREE.AdditiveBlending,
side: THREE.BackSide,
})
);
atmosphere.scale.set(1.1, 1.1, 1.1);
scene.add(atmosphere);
const group = new THREE.Group();
group.add(sphere);
scene.add(group);
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
});
const starVertices = [];
for (let i = 0; i < 10000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = -Math.random() * 5000;
starVertices.push(x, y, z);
}
starGeometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(starVertices, 3)
);
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
camera.position.z = 17;
const mouse = {
x: 0,
y: 0,
};
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
sphere.rotation.y += 0.003;
gsap.to(group.rotation, {
x: -mouse.y * 0.3,
y: mouse.x * 0.5,
duration: 2,
});
}
animate();
addEventListener("mousemove", () => {
mouse.x = (event.clientX / innerWidth) * 2 - 1;
mouse.y = -(event.clientY / innerHeight) * 2 + 1;
});