BABAK0T0 BABAK0T0

Center the text

There are several ways to center the text. One way of doing it is by using bounding. The bounding is the information associated with the geometry that tells what space is taken by that geometry. It can be a box or a sphere.

By default, Three.js is using sphere bounding. What we want is a box bounding, to be more precise

textGeometry.computeBoundingBox();

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);
	return mix(rand(fl), rand(fl + 1.0), fc);
}

	const EARTH_RADIUS = 6371; // Earth radius in km

	function distanceBetweenTwoCoordinates(lonA, latA, lonB, latB) {
	const x = (lonB - lonA) * Math.cos((latA + latB) / 2);
	const y = (latB - latA);
	return Math.sqrt( x2 + y2 ) * EARTH_RADIUS;
	}

	var cameraZ = camera.position.z;
	var planeZ = 5;
	var distance = cameraZ - planeZ;
	var aspect = viewWidth / viewHeight;
	var vFov = camera.fov * Math.PI / 180;
	var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
	var planeWidthAtDistance = planeHeightAtDistance * aspect;

	// or

	const objs = new THREE.Group();
	const minRadius = 3;
	const maxRadius = 6;

	for(let i = 0; i < 50; i++)
	{
	const angle = Math.random() * Math.PI * 2; // Random angle
	const radius = minRadius + Math.random() * maxRadius; // Random radius between [3,9]
	const x = Math.cos(angle) * radius; // Get the x position using cosinus
	const z = Math.sin(angle) * radius; // Get the z position using sinus

	/**
	* The environment map is like an image of what's surrounding the scene.
	* You can use it to add reflection or refraction to your objects.
	* It can also be used as lighting information.
	**/

	const material = new THREE.MeshStandardMaterial();
	material.metalness = 0.7;
	material.roughness = 0.2;

	// Create an empty BufferGeometry
	const geometry = new THREE.BufferGeometry()

	// Create a Float32Array containing the vertices position (3 by 3)
	const positionsArray = new Float32Array([
	0, 0, 0, // First vertex
	0, 1, 0, // Second vertex
	1, 0, 0 // Third vertex
	])


	/**
	* Default Amplitude Adjustment [0, 1]
	* DOM coord [0, 0] is located in left top corner
	* Three.js coord [0, 0] is located in center of the screen
	*
	*
	* Position.y axis being positive when going upward in Three.js
	* But the clientY axis being positive when going downward in the webpage.
	* You can simply invert the cursor.y while updating it by adding a minus (-)