JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
var container, stats;
var camera, scene, renderer, particles, geometry, material, positions, colors, alphas,sizes, sumDisplacement, x,y,z;
var mouseX = 0,
mouseY = 0;
var uniforms = {
color: { value: new THREE.Color( 0xffffff ) },
texture: { value: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/ball.png") }
};
var shaderMaterialInstanced = new THREE.RawShaderMaterial( {
uniforms: uniforms,
vertexShader: `
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute float size;
attribute vec3 customColor;
attribute vec3 offset;
attribute float alpha;
varying float vAlpha;
varying vec3 vColor;
void main() {
vColor = customColor;
vAlpha = alpha;
vec3 newPosition = position + offset;
vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );
gl_PointSize = size * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}`,
fragmentShader: `
precision highp float;
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
varying float vAlpha;
void main() {
gl_FragColor = vec4( color * vColor, vAlpha );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}`,
depthTest: true,
transparent: true,
alphaTest: 0.5,
blending: THREE.NormalBlending,
});
init();
animate(animate);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 2, 200000);
camera.position.z = 10000;
scene = new THREE.Scene();
geometry = new THREE.BufferGeometry();
positions = new Float32Array(3000);
colors = new Float32Array(3000);
sizes = new Float32Array(1000);
alphas = new Float32Array(1000);
for (i = 0; i < 1000; i++) {
x = 2000 * Math.random() - 1000;
y = 2000 * Math.random() - 1000;
z =...