globe-creator

Create beautiful WebGL globes using ThreeJS.

Getting Started

1. Install this package using npm i globe-creator or yarn add globe-creator.
2. Create a canvas element. If you're using React, you'll want to give the canvas element a Ref.
3. Initialise globe-creator and pass your canvas element to it. if you're using React, you'll need to pass in the Ref you created in the previous step.

Example

import React, { useRef } from 'react';
import createGlobe from 'globe-creator';

const MyComponent = () => {
	const myCanvas = useRef(null);

	useEffect(() => {
    createGlobe({ canvas: myCanvas.current });
  }, []);

	return (
		<canvas ref={myCanvas} width={600} height={600} />
	);
};

export default MyComponent;

Available Options

You can pass the following options as function parameters to globe-crator:

• canvas (required, format: element, default: null): The canvas element on which to render the globe. Make sure your canvas has a width and height.
• antialias (optional, format: boolean, default: true): Whether or not to apply antialias smoothing to the globe. Disabling can improve device performance, but reduce render quality.
• cameraFOV (optional, format: integer, default: 90): The camera's field of view.
• cameraNear (optional, format: integer, default: 1): The camera's near field of view limit.
• cameraFar (optional, format: integer, default: 2000): The camera's far field of view limit.
• cameraX (optional, format: integer, default: 0): The camera's position on the X axis, where 0 is centered.
• cameraY (optional, format: integer, default: 0): The camera's position on the Y axis, where 0 is centered.
• cameraZ (optional, format: integer, default: 999): The camera's position on the Y axis, where 0 is centered.
• dotCount (optional, format: integer, default: 60000): The total amount of dots to render on the surface of the globe, before any image masking is applied. Higher numbers may impact performance.
• earthRadius (optional, format: integer, default: 600): The radius of the earth.
• landRadius (optional, format: integer, default: 600): The radius of the land dot layer.
• earthWidthSegments (optional, format: integer, default: 48): The number of width segments used to render the earth. Higher numbers will result in a smoother-looking sphere but may impact performance.
• earthHeightSegments (optional, format: integer, default: 48): The number of height segments used to render the earth. Higher numbers will result in a smoother-looking sphere but may impact performance.
• landImage (optional, format: PNG image, passed directly or as a base64 string, default: base 64 string image of continent land masses): The image used to mask the land dots and create shapes on the surface of the earth. By default the dots are masked using an image of the continent land masses. This must be a PNG image including transparency, passed directly or as a base64 string.
• background (optional, format: boolean, default: true): Whether or not the scene has a background.
• backgroundColor (optional, format: Threejs Vec3 color, default: 0x001933): The background color of the scene.
• ambientLightColor (optional, format: Threejs Vec3 color, default: 0x004188): The ambient light color of the scene. This light affects the earth, but does not affect the land dot layer.
• ambientLightIntensity (optional, format: float, default: 0.3): The intensity of the ambient light.
• earthColor (optional, format: Threejs Vec3 color, default: 0x1c1b25): The color of the earth.
• earthOpacity (optional, format: float, default: 0.8): The opacity of the earth.
• sunColor (optional, format: Threejs Vec3 color, default: 0x0062cc): The color of the sun light, which is visible towards the bottom left of the globe. This light affects the earth, but does not affect the land dot layer.
• sunIntensity (optional, format: float, default: 0.4): The intensity of the sun light.
• highlightColor (optional, format: Threejs Vec3 color, default: 0x004188): The color of the highlight light, which is visible towards the top right of the globe. This light affects the earth, but does not affect the land dot layer.
• highlightIntensity (optional, format: float, default: 0.2): The color of the highlight light.