-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsolar.js
157 lines (128 loc) · 3.82 KB
/
solar.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
import * as THREE from 'three'
import GUI from 'lil-gui'
//renderer
const canvas = document.querySelector('#c')
const renderer = new THREE.WebGLRenderer({antialias: true, canvas})
const gui = new GUI()
//camera
const fov = 40
const aspect = 2
const near = 0.1
const far = 1000
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
camera.position.set(0, 50, 0)
camera.up.set(0, 0, 1)
camera.lookAt(0, 0, 0)
//scene
const scene = new THREE.Scene()
{
const color = 0xFFFFFF
const intensity = 3
const light = new THREE.PointLight(color, intensity)
scene.add(light)
}
const objects = []
const radius = 1
const widthSegments = 50
const heightSegments = 50
const sphereGeometry = new THREE.SphereGeometry(
radius, widthSegments, heightSegments
)
//solar system
const solarSystem = new THREE.Object3D()
scene.add(solarSystem)
objects.push(solarSystem)
// sun
const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00})
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
sunMesh.scale.set(5, 5, 5)
// scene.add(sunMesh)
solarSystem.add(sunMesh)
objects.push(sunMesh)
//earth system
const earthOrbit = new THREE.Object3D()
earthOrbit.position.x = 10
solarSystem.add(earthOrbit)
objects.push(earthOrbit)
// earth
const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244})
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
// earthMesh.position.x = 10// set in its parent THREE.Object3D object "earthOrbit"
// scene.add(earthMesh)
// sunMesh.add(earthMesh)
// solarSystem.add(earthMesh)
earthOrbit.add(earthMesh)
objects.push(earthMesh)
//moon
const moonOrbit = new THREE.Object3D()
moonOrbit.position.x = 2
earthOrbit.add(moonOrbit)
const moonMaterial = new THREE.MeshPhongMaterial({color: 0x888888, emissive: 0x222222})
const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
moonMesh.scale.set(.5, .5, .5)
moonOrbit.add(moonMesh)
objects.push(moonMesh)
// add an AxesHelper to each node
// objects.forEach((node) => {
// const axes = new THREE.AxesHelper()
// axes.material.depthTest = false
// axes.renderOrder = 1
// node.add(axes)
// })
class AxisGridHelper {
constructor(node, units = 10) {
const axes = new THREE.AxesHelper()
axes.material.depthTest = false
axes.renderOrder = 2//after the grid
node.add(axes)
const grid = new THREE.GridHelper(units, units)
grid.material.depthTest = false
grid.renderOrder = 1
node.add(grid)
this.grid = grid
this.axes = axes
this.visible = false
}
get visible() {
return this._visible
}
set visible(v) {
this._visible = v
this.grid.visible = v
this.axes.visible = v
}
}
function makeAxisGrid(node, label, units) {
const helper = new AxisGridHelper(node, units)
gui.add(helper, 'visible').name(label)
}
makeAxisGrid(solarSystem, 'solarSystem', 25)
makeAxisGrid(sunMesh, 'sunMesh')
makeAxisGrid(earthOrbit, 'earthOrbit')
makeAxisGrid(earthMesh, 'earthMesh')
makeAxisGrid(moonOrbit, 'moonOrbit')
makeAxisGrid(moonMesh, 'moonMesh')
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement
const width = canvas.clientWidth
const height = canvas.clientHeight
const needResize = camera.width !== width || canvas.height !== height
if (needResize) {
renderer.setSize(width, height, false)
}
return needResize
}
function render(time) {
time *= 0.001
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement
camera.aspect = canvas.clientWidth / canvas.clientHeight
camera.updateProjectionMatrix()
}
objects.forEach((obj) => {
obj.rotation.y = time
})
renderer.render(scene, camera)
requestAnimationFrame(render)
}
requestAnimationFrame(render)