orbits (three.js) (in progress)

index.html

<!-- 
https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
-->
<div id = 'three'>
</div>

orbits-three-js-in-progress.markdown

orbits (three.js) (in progress)

A Pen by Landgreen on CodePen.

License.

script.js

/////////////////////////////////////////
// Scene Setup
/////////////////////////////////////////
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("three").appendChild(renderer.domElement);

window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
/////////////////////////////////////////
// camera and controls
/////////////////////////////////////////
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(200, 50, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enableDamping = true;
controls.dampingFactor = 0.08;
//keys not working
// controls.enableKeys = true;
// controls.keyPanSpeed = 100
// controls.keys = {
//   LEFT: 37, //left arrow
//   UP: 38, // up arrow
//   RIGHT: 39, // right arrow
//   BOTTOM: 40 // down arrow
// }

/////////////////////////////////////////
// lights and fog
/////////////////////////////////////////
var lightA = new THREE.AmbientLight(0x222222); // soft white light
scene.add(lightA);
// scene.fog = new THREE.FogExp2(0x000000, 0.008);

/////////////////////////////////////////
// things
/////////////////////////////////////////
//sun
geometry = new THREE.SphereGeometry(5, 24, 24);
material = new THREE.MeshBasicMaterial({ color: 0xffffff });
let sun = new THREE.PointLight(0xffff99, 1, 0, 2);
sun.add(new THREE.Mesh(geometry, material));
sun.position.set(0, 0, 0);
scene.add(sun);

//planets
const planet = [];
for (let i = 0; i < 350; ++i) {
  const radius = 0.2 + Math.random() * Math.random() * 3;
  geometry = new THREE.SphereGeometry(radius, 16, 16);
  material = new THREE.MeshLambertMaterial({
    // transparent: true,
    // opacity: 0.7,
    color: randomColor({
      luminosity: "bright",
      hue: 'red'
    })
  });
  planet[i] = new THREE.Mesh(geometry, material);
  planet[i].radius = 10 + Math.random() * 120;
  planet[i].period = 0.01 + (Math.random() - 0.5) * 0.005;
  planet[i].position.set(planet[i].radius, 0, 0);
  scene.add(planet[i]);
}

/////////////////////////////////////////
// Render Loop
/////////////////////////////////////////
renderer.render(scene, camera);
let cycle = 0;
function animationLoop() {
  cycle++;
  requestAnimationFrame(animationLoop);
  // sun.rotation.y += 0.01
  for (let i = 0; i < planet.length; ++i) {
    // planet[i].rotation.y +=0.01
    planet[i].position.x =
      planet[i].radius * Math.cos(cycle * planet[i].period);
    planet[i].position.z =
      planet[i].radius * Math.sin(cycle * planet[i].period);
  }
  controls.update();
  renderer.render(scene, camera);
}
animationLoop();

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/464612/randomColor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/464612/orbitcontrols.js"></script>

style.css

/* body {
  margin: 0 auto;
  max-width: 600px;
}
#three {
  width: 600px;
  height: 600px;
  background: #000;
} */


body{
  overflow:hidden;
  background: #000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}