JSFiddle - React, Tailwind, and code Playground

by watney

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        
    </head>
    <body>
      <script src="https://threejs.org/build/three.js"></script>
    </body>
</html>

JavaScript

window.onload= function(){

    //scene
    var scene= new THREE.Scene();
    
    //camera
    var camera= new THREE.PerspectiveCamera(
        70,
        window.innerWidth/window.innerHeight,
        0.01,
        1000
    );
    
    camera.position.set(0,0,5);
    
    //light
    var directionalLight= new THREE.DirectionalLight(0xffffff, 2);
    directionalLight.position.set(5,5,0);
    scene.add(directionalLight);
    
    //renderer
    var renderer= new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight );
    
    document.body.appendChild(renderer.domElement);
    
    
    var loader= new THREE.FontLoader();
    
    loader.load(
        'https://rawgit.com/mrdoob/three.js/dev/examples/fonts/helvetiker_regular.typeface.json',
        function ( font ) {
            var geometry = new THREE.TextGeometry(
                'Hello three.js!',{
                    font: font,
                    size: 80,
                    height: 5,
                    curveSegments: 12,
                    bevelEnabled: true,
                    bevelThickness: 10,
                    bevelSize: 8,
                    bevelSegments:5
                    });
                    
            var material = new THREE.MeshPhongMaterial(
            { color: 0xffffff}
            );
            
            var mesh = new THREE.Mesh(geometry,material);
            
            scene.add(mesh);
        },
        function(error){
            console.log(error);
                    
                    
                    
        });   
    renderer.render(scene,camera);
    
}