JSFiddle - React, Tailwind, and code Playground

by bidolah

HTML

<html>
	<head>
		<title>My first three.js app</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>		
	</body>
</html>

JavaScript

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );
scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );var camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
camera.position.z = 2750;
camera.position.y = 500;
camera.rotation.x = -0.25;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
function render() {
	renderer.render( scene, camera );
}


function init() {
	//
	var particles = 500000;
	var geometry = new THREE.BufferGeometry();
	var positions = [];
	var colors = [];
	var color = new THREE.Color();
	var n = 1000, n2 = n / 2; // particles spread in the cube
	for ( var i = 0; i < particles; i ++ ) {
		// positions
		var x = Math.random() * n - n2;
		var y = Math.random() * n - n2;
		var z = Math.random() * n - n2;
		positions.push( x, y, z );
		// colors
		var vx = ( x / n ) + 0.5;
		var vy = ( y / n ) + 0.5;
		var vz = ( z / n ) + 0.5;
		color.setRGB( vx, vy, vz );
		colors.push( color.r, color.g, color.b );
	}
	geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
	geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
	geometry.computeBoundingSphere();
	//
	var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
	points = new THREE.Points( geometry, material );
	scene.add( points );
}

init();
render();