JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://threejs.org/build/three.js"></script>
JavaScript
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, stats, materials = [], parameters;
var mouseX = 0, mouseY = 0;
var rowCount= 20;
var columnCount=30;
var stepCount = 1;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 85, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
camera.position.x = 10;
camera.position.y = 9;
scene = new THREE.Scene();
var textureLoader = new THREE.TextureLoader();
var material = {};
var particles = {};
var geometry = {};
var texture = {};
imageCount = 0;
// DOES NOT WORK
// var originalTexture = textureLoader.load('https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
for(i=0;i<rowCount;i++){
for(j=0;j<columnCount;j++){
// DOES NOT WORK
// texture[imageCount] = originalTexture.clone();
texture[imageCount] = textureLoader.load('https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
texture[imageCount].repeat.set(1/columnCount, 1/rowCount);
texture[imageCount].offset.y = 1/rowCount * i;
texture[imageCount].offset.x = 1/columnCount * j;
geometry[imageCount] = new THREE.BufferGeometry();
var x = j*2;
var y = i*2;
var z = 1;
vertice1 = [];
geometry[imageCount].addAttribute( 'position', new THREE.Float32BufferAttribute([x, y, z], 3 ) );
material = new THREE.PointsMaterial( { size: 2, map: texture[imageCount], depthTest: true, transparent: false } );
particles = new THREE.Points( geometry[imageCount], material );
scene.add(particles);
imageCount++;
}
}
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate()...