makeGlow = () => {
let customMaterial = new THREE.ShaderMaterial(
{
uniforms:
{
"c": { type: "f", value: 0.2 },
"p": { type: "f", value: 1.9 },
glowColor: { type: "c", value: new THREE.Color(0xdddd00) },
viewVector: { type: "v3", value: camera.position }
},
vertexShader: vertexShader ,
fragmentShader: fragmentShader,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
} );
let sphereGeom = new THREE.SphereGeometry(
sunAttr.radius,
sunAttr.segments,
sunAttr.rings)
let moonGlow = new THREE.Mesh( sphereGeom.clone(), customMaterial.clone() );
//moonGlow.position = sun.position;
moonGlow.scale.multiplyScalar(1.4);
return moonGlow;
}
sun = makeSphere(sunAttr)
ratios = {return {
sunSize: 15,
sunColor: 0xfcd303,
earthRatio: 0.5,
}}
configSphere = (color, radius, glowing) => {
let sphereMaterial = new THREE.MeshLambertMaterial({ color: color });
if (glowing) {
sphereMaterial = new THREE.MeshBasicMaterial({ color: color });
}
const sphereAttr = {
radius: radius,
segments:16,
rings: 16,
material: sphereMaterial
};
return sphereAttr;
}
sunAttr = configSphere(ratios.sunColor, ratios.sunSize)
earthAttr = configSphere(0x0000cc, ratios.sunSize*ratios.earthRatio)
deg2rad = (deg) => (deg*Math.PI/180)
makeSphere = function(sphereAttr) {
let sp = new THREE.Mesh(
new THREE.SphereGeometry(
sphereAttr.radius,
sphereAttr.segments,
sphereAttr.rings),
sphereAttr.material);
sp.rotation.x = deg2rad(45);
//sp.position.z = spPos;
return sp;
}
renderer = { return new THREE.WebGLRenderer }
makeScene = () => {
let scene1 = new THREE.Scene();
let pointLight = new THREE.PointLight(0xFFFFFF, 0.25);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene1.add(pointLight);
scene1.background = new THREE.Color( 0x111111 );
let light = new THREE.AmbientLight( 0xa0a0a0 ); // soft white light
scene1.add( light );
return scene1;
}
import {slider, color, radio} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
