JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
let camera, scene, renderer, randomVerts = [], verts, startTime, starsGeometry,currentVerts;
init();
animate();
function lerp (a, b, alpha){
return a + (b - a) * alpha
}
function clamp (val, min, max){
return val > max ? max : val < min ? min : val
}
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20000 );
camera.position.z = 20;
scene = new THREE.Scene();
const loader = new THREE.TextureLoader();
const texture = loader.load( 'https://i.imgur.com/tP7bbkQ.png' );
var pixels = 100;
var pixelSize = 0.17;
starsGeometry = new THREE.PlaneBufferGeometry( 20, 20,pixels,pixels);
starsGeometry.attributes.position.setDynamic(true);
for(var i =0;i<starsGeometry.attributes.position.count;i++){
randomVerts.push(
lerp(-2,2,Math.random()),
lerp(-2,2,Math.random()),
lerp(-3,3,Math.random())
)
}
verts=new Float32Array(starsGeometry.attributes.position.array);
currentVerts = starsGeometry.attributes.position.array;
console.log(starsGeometry);
var starsMaterial = new THREE.PointsMaterial( { color: 0x888888,size:pixelSize,transparent:true } );
var starField = new THREE.Points( starsGeometry, starsMaterial );
starsMaterial.onBeforeCompile = function(shader){
shader.vertexShader = shader.vertexShader.replace('void main() {',[
"varying vec2 globalUV;",
"void main() {",
"globalUV = uv;"
].join('\n'));
shader.fragmentShader = shader.fragmentShader.replace("uniform vec3 diffuse;",[
"varying vec2 globalUV;",
"uniform sampler2D tDiffuse;",
"uniform vec3 diffuse;",
].join('\n')).replace("gl_FragColor = vec4( outgoingLight, diffuseColor.a );",[
"vec4 texColor = texture2D( tDiffuse, globalUV );",
"outgoingLight *= texColor.xyz;",
"gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );"
].join('\n'));
...