global.THREE = require("three");
require("three/examples/js/controls/OrbitControls");
const canvasSketch = require("canvas-sketch");
const settings = {
animate: true,
context: "webgl",
scaleToView: true
};
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
const sketch = ({ context }) => {
// RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: context.canvas,
alpha: true,
});
renderer.setClearColor("#121212", 1);
// CAMERA
const camera = new THREE.PerspectiveCamera(100, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000);
camera.position.set(30, 5, 35);
// ORBIT CONTROLS
const controls = new THREE.OrbitControls(camera, context.canvas);
controls.target.set(30, 0, 0);
// SCENE
const scene = new THREE.Scene();
// TEXTURES
const loader = new THREE.TextureLoader();
const sunTexture = loader.load("assets/sun.jpg");
const mercuryTexture = loader.load("assets/mercury.jpg");
const venusTexture = loader.load("assets/venus.jpg");
const earthTexture = loader.load("assets/earth.jpg");
const marsTexture = loader.load("assets/mars.jpg");
const jupiterTexture = loader.load("assets/jupiter.jpg");
const saturnTexture = loader.load("assets/saturn.jpg");
const uranusTexture = loader.load("assets/uranus.jpg");
const neptuneTexture = loader.load("assets/neptune.jpg");
const plutoTexture = loader.load("assets/pluto.jpeg");
// MATERIALS
const sunMaterial = new THREE.MeshStandardMaterial({ map: sunTexture });
const mercuryMaterial = new THREE.MeshStandardMaterial({ map: mercuryTexture });
const venusMaterial = new THREE.MeshStandardMaterial({ map: venusTexture });
const earthMaterial = new THREE.MeshStandardMaterial({ map: earthTexture});
const marsMaterial = new THREE.MeshStandardMaterial({ map: marsTexture });
const jupiterMaterial = new THREE.MeshStandardMaterial({ map: jupiterTexture });
const saturnMaterial = new THREE.MeshStandardMaterial({ map: saturnTexture });
const uranusMaterial = new THREE.MeshStandardMaterial({ map: uranusTexture });
const neptuneMaterial = new THREE.MeshStandardMaterial({ map: neptuneTexture });
const plutoMaterial = new THREE.MeshStandardMaterial({ map: plutoTexture });
// MESHES
const geometry = new THREE.SphereGeometry(1, 32, 16);
const sunMesh = new THREE.Mesh(geometry, sunMaterial);
sunMesh.position.set(0, 0, 0);
sunMesh.scale.setScalar(10);
scene.add(sunMesh);
const mercuryGroup = new THREE.Group();
const mercuryMesh = new THREE.Mesh(geometry, mercuryMaterial);
createPlanet(scene, mercuryMesh, mercuryGroup, 25, 0.8);
const venusGroup = new THREE.Group();
const venusMesh = new THREE.Mesh(geometry, venusMaterial);
createPlanet(scene, venusMesh, venusGroup, 28, 0.9);
const earthGroup = new THREE.Group();
const earthMesh = new THREE.Mesh(geometry, earthMaterial);
createPlanet(scene, earthMesh, earthGroup, 31, 1);
const marsGroup = new THREE.Group();
const marsMesh = new THREE.Mesh(geometry, marsMaterial);
createPlanet(scene, marsMesh, marsGroup, 34, 0.8);
const jupiterGroup = new THREE.Group();
const jupiterMesh = new THREE.Mesh(geometry, jupiterMaterial);
createPlanet(scene, jupiterMesh, jupiterGroup, 42, 3.5);
const saturnGroup = new THREE.Group();
const saturnMesh = new THREE.Mesh(geometry, saturnMaterial);
createPlanet(scene, saturnMesh, saturnGroup, 50, 2.9);
const uranusGroup = new THREE.Group();
const uranusMesh = new THREE.Mesh(geometry, uranusMaterial);
createPlanet(scene, uranusMesh, uranusGroup, 56, 1.7);
const neptuneGroup = new THREE.Group();
const neptuneMesh = new THREE.Mesh(geometry, neptuneMaterial);
createPlanet(scene, neptuneMesh, neptuneGroup, 60, 1.65);
const plutoGroup = new THREE.Group();
const plutoMesh = new THREE.Mesh(geometry, plutoMaterial);
createPlanet(scene, plutoMesh, plutoGroup, 64, 0.5);
// LIGHTING
const light = new THREE.PointLight("white", 1.25);
light.position.set(0, 0, 0);
scene.add(light);
// illuminate the sun
createSpotlights(scene);
// HELPERS
// scene.add(new THREE.PointLightHelper(light, 1));
// scene.add(new THREE.GridHelper(50, 50));
// scene.add( new THREE.SpotLightHelper( spotlight ));
return {
render({ time }) {
sunMesh.rotation.y = time * 0.05
mercuryGroup.rotation.y = time * 0.5;
mercuryMesh.rotation.y = time * 0.20;
venusGroup.rotation.y = time * 0.35;
venusMesh.rotation.y = time * 0.18;
earthGroup.rotation.y = time * 0.3;
earthMesh.rotation.y = time * 0.15;
marsGroup.rotation.y = time * 0.2;
marsMesh.rotation.y = time * 0.2;
jupiterGroup.rotation.y = time * 0.05;
jupiterMesh.rotation.y = time * 0.05;
saturnGroup.rotation.y = time * 0.03;
saturnMesh.rotation.y = time * 0.25;
uranusGroup.rotation.y = time * 0.02;
uranusMesh.rotation.y = time * 0.25;
neptuneGroup.rotation.y = time * 0.015;
neptuneMesh.rotation.y = time * 0.25;
plutoGroup.rotation.y = time * 0.005;
plutoMesh.rotation.y = time * 0.2;
controls.update();
renderer.render(scene, camera);
},
unload() {
controls.dispose();
renderer.dispose();
}
};
};
function createPlanet(scene, mesh, group, x, scale) {
mesh.position.set(x, 0, 0);
mesh.scale.setScalar(scale);
group.add(mesh);
scene.add(group);
}
function createSpotlights(scene) {
var color = 0xFFFFFF;
var intensity = 5;
var distance = 25;
var angle = Math.PI/7;
new Array(6).fill('').forEach((item, i) => {
var spotlight = new THREE.SpotLight(color, intensity, distance, angle);
var value = i % 2 === 0 ? 25 : -25;
spotlight.position.set(
i < 2 ? value : 0,
i >= 2 && i < 4 ? value : 0,
i >= 4 ? value : 0
);
scene.add( spotlight );
});
}
canvasSketch(sketch, settings);
view raw final.js hosted with ❤ by GitHub