JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
JavaScript
var camera, scene, renderer;
var materialShader, outlineColor = new THREE.Color();
var group;
var params = {
outlineColor: '#ffffff'
};
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2100 );
camera.position.z = 1500;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
// create sprites
var amount = 200;
var radius = 500;
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'https://threejs.org/examples/textures/sprite1.png' );
group = new THREE.Group();
var material = new THREE.SpriteMaterial( { map: texture, color: 0xffffff, fog: true } );
for ( var i = 0; i < amount; i ++ ) {
var x = Math.random() - 0.5;
var y = Math.random() - 0.5;
var z = Math.random() - 0.5;
var m = material.clone();
m.onBeforeCompile = onBeforeCompile;
var sprite = new THREE.Sprite( m );
sprite.position.set( x, y, z );
sprite.position.normalize();
sprite.position.multiplyScalar( radius );
group.add( sprite );
}
scene.add( group );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
var gui = new dat.GUI();
gui.addColor( params, 'outlineColor' ).onChange( function ( value ) {
outlineColor.set( value );
} );
gui.open();
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onBeforeCompile( shader ) {
// code based on: https://www.daniel-buckley.com/blog/2017/12/6/dev-diary-research-report-2d-sprite-outline-shaders
var width = window.innerWidth;
var height = window.innerHeight;
shader.uniforms.outlineColor = { value: outlineColor };
shader.uniforms.resolution = { value: new THREE.Vector2( width, height ) };
shader.fragmentShader = 'uniform vec3...