JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/60/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stemkoski/stemkoski.github.com/Three.js/js/ParticleEngine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>

JavaScript

$(function() {
    
    //scene
    scene = new THREE.Scene();
    //camera
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.set(0,-13,5);
    camera.lookAt(new THREE.Vector3( 0, 5, 0 ));
     
    //renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
 
    //controls
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
       
    //show canvas
    $("#canvas-container").html(renderer.domElement);
     
     
 //directional light
 var directionalLight = new THREE.DirectionalLight(0xffffff);
 directionalLight.position.set(6, 0, 6);
 scene.add(directionalLight);
  
    //plane
    var geometry = new THREE.PlaneGeometry(20, 20);
    var material = new THREE.MeshLambertMaterial( { color: 0x555555 } );
    var plane = new THREE.Mesh( geometry, material );
    scene.add(plane);
     
     
 //particle
     
    //rain
    var engine = [];
    for (var i = 0; i < 100; i++) {
    var settings = {
      positionStyle    : Type.CUBE,
      positionBase     : new THREE.Vector3( i%10*20-100, i/10*20-100, 10 ),
      positionSpread   : new THREE.Vector3( 20, 20, 0 ),
 
      velocityStyle    : Type.CUBE,
      velocityBase     : new THREE.Vector3( 0, 0, -50 ),
      velocitySpread   : new THREE.Vector3( 5, 5, 0 ), 
      accelerationBase : new THREE.Vector3( 100, 0, 0 ),
       
      particleTexture : THREE.ImageUtils.loadTexture( 'https://4.bp.blogspot.com/-jlRJN4wEAsE/UjCB93XRC8I/AAAAAAAAAOQ/8nwytoBEp-4/s1600/raindrop2flip.png' ),
 
      sizeBase    : 4,
      sizeSpread  : 0.1,
      colorBase   : new THREE.Vector3(0.66, 1.0, 0.7), // H,S,L
      colorSpread : new THREE.Vector3(0.00, 0.0, 0.2),
      opacityBase : 0.6,
 
      particlesPerSecond : 100,
      particleDeathAge   : 0.2,  
      emitterDeathAge    : 60
     };
     
     engine[i] = new ParticleEngine();
 		engine[i].setValues( settings );
   ...