3d word rain

Usage no npm install needed!

<script type="module">
  import dWordRain from 'https://cdn.skypack.dev/3d-word-rain';



made by threejs

  • Hold down the left mouse button and drag to rotate. The center of rotation is the center of the text rain
  • Mouse wheel control camera's movement
  • the main body of the text rain is 25 * 25 * 25 text geometries, so maybe you can see the edge of the rain
  • To run the source file, you can run it through http-server ,and run gulp meanwhile(to convert node - > browser es5)
  • the bundle.js is not be uglified, it's really a big file
  • Maybe it's a little incongruous. If you are good at UI design, please tell me how to adjust the style~~


npm i 3d-word-rain


import by npm

const wordRain = require('3d-word-rain')

if you dont know what's the font.json file, you can see /fonts/Arial_Bold.json in the node_modules, and copy it to a static file to use by url(that you can request by a browser), must be a json file, not ttf/woff file! it can be searched by google or 百度.

import by script tag

<script src="dist/js/bundle.js"></script>

import 2d version by script tag

<script src="dist/js/bundle2.js"></script>

demo image


3d word rain


2d word rain


    now you can assign a element as a container, the default container is document.body.
    use it like this way.
    rain('path/to/font.json', rootElement)
    add mobile end support and exposing some attributes as following:
        - rain.scene        # for get the scene of 3d-word-rain
        - rain.renderer     # for get rendererElement
        - rain.cameraMaster # for controling the movement of camera
        - rain.stopFlag     # for checking whether it is animating or not
    add start function and stop function.
    use rain.stop() to stop animating, use rain.start() to restart animating.