JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
var camera, scene, renderer;
var geometry, material, mesh;
init();
requestAnimationFrame(animate);
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
Array.from({length: 100}).forEach((e, i) => {
let canvas = document.createElement("canvas", {width: 256, height: 64});
let context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 48px Arial";
context.fillText("THREE", 0, canvas.height);
let map = new THREE.CanvasTexture(canvas);
let spriteMaterial = new THREE.SpriteMaterial({map});
let sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(i * 0.2, Math.sin(i), 0);
sprite.scale.set(1, canvas.height / canvas.width);
scene.add(sprite);
});
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate(time) {
requestAnimationFrame( animate );
camera.position.x = time * .005;
renderer.render( scene, camera );
}