JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>three.js canvas/webgl - geometry - text</title>
    <meta charset="utf-8">
 
</head>
<body>
    <style type="text/css">
        body
        {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
  <script type="text/javascript" src="http://files.cnblogs.com/iamzhanglei/Three.js"></script><script type="text/javascript" src="http://files.cnblogs.com/iamzhanglei/RequestAnimationFrame.js"></script><script type="text/javascript" src="http://files.cnblogs.com/iamzhanglei/Tween.js"></script><script type="text/javascript" src="http://files.cnblogs.com/iamzhanglei/Sparks.js"></script><!-- load the font file from canvas-text --><script type="text/javascript" src="http://files.cnblogs.com/iamzhanglei/helvetiker_regular.typeface.js">
</script>
    <script type="text/javascript">

        var container;

        var camera, scene, renderer;

        var text, plane;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;


        var heartShape, particleCloud, sparksEmitter, emitterPos;
        var _rotation = 0;
        var timeOnShapePath = 0;

        init();
        animate();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            var info = document.createElement('div');
            info.style.position = 'absolute';
            info.style.top = '10px';
            info.style.width = '100%';
            info.style.textAlign = 'center';
            info.innerHTML = 'Happy Birthday to fangfangying!';
            container.appendChild(info);

            camera = new THREE.Camera(50, window.innerWidth / window.innerHeight, 1, 1000);
           ...