-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
67 lines (43 loc) · 2.03 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
import './style.css'
import milkyway from './milky-way-ga42a3ae51_1920.jpg'
import earthimg from './8081_earthmap4k.jpg'
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set( 55 , 10 , 0 );
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.setZ(30);
const earthTexture = new THREE.TextureLoader().load(earthimg)
const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshStandardMaterial( { map: earthTexture, } );
const sphere = new THREE.Mesh( geometry, material );
const ambientLight = new THREE.AmbientLight(0xffffff);
const controls = new OrbitControls(camera, renderer.domElement);
scene.add(sphere, ambientLight)
const spaceTexture = new THREE.TextureLoader().load(milkyway)
scene.background = spaceTexture
const addStar = () => {
const geometry = new THREE.SphereGeometry( 0.25 );
const material = new THREE.MeshStandardMaterial( { color: 0xffffff } );
const star = new THREE.Mesh( geometry, material );
const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100))
star.position.set(x,y,z);
scene.add(star)
}
Array(200).fill().forEach(addStar)
const animate = () => {
requestAnimationFrame( animate );
sphere.rotation.y += 0.005
// star.rotation.x += 0.1
controls.update();
controls.autoRotate = true;
// Array(200).fill().forEach(addStar)
renderer.render(scene, camera);
}
animate();