Hello world with Three.js

August 24, 2021 ≈ 3 minutes 24 seconds

Most Three.js Hello World programs are just rotating cubes. Here we going to rotate the real Hello World text. And we would do it in one HTML file. We include the Three.js library through CDN and font directly from GitHub. Everything would work without a server, just open a final HTML file in the browser.

1. Create HTML file test.html and place boilerplate:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>body {margin: 0}</style>
</head>
<body></body>
</html>

2. Add script with type="module" into head (it allows us to include modules), and import Three.js

<script type="module">
    import * as THREE from 'https://cdn.skypack.dev/three';
</script>

3. Create a scene, camera, renderer, and light. After append rendered canvas to the body.

let scene = new THREE.Scene(); 

// Vertical field of view, aspect ratio, near plane, far plane
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 100, 55000);
let renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);
let light = new THREE.SpotLight(); // Light from a single point in one direction
light.position.set(0, 500, 200); scene.add(light);

document.body.appendChild(renderer.domElement);

4. Load font from github hardlink. Create geometry, material, and mesh. Animate.

let loader = new THREE.FontLoader();
// Hardlink to Three.js example
let font_src = 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/fonts/helvetiker_regular.typeface.json';
loader.load(font_src, font => {
    let text_geometry = new THREE.TextGeometry( 'Hello world!', {
        font, size: 42, 
        height: 10, // How deep are the letters
        bevelEnabled: true,
        bevelThickness: 1, // How deep into text bevel goes
        bevelSize: 1, // How far from text outline is bevel
    });
    text_geometry.center();

    let text_material = new THREE.MeshPhongMaterial({ // A material for shiny surfaces with specular highlights.
        color: 0xfff000, 
        specular: 0x0fffff, // How shiny the material is and the color of its shine 
    });

    let mesh = new THREE.Mesh(text_geometry, text_material); // triangular polygon mesh
    mesh.position.z = -400; scene.add( mesh );

    let animate = () => {
        requestAnimationFrame(animate);
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
    }; 
    animate();
});

That's it! Everything in one HTML file:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>body {margin: 0}</style>
    <script type="module">
        import * as THREE from 'https://cdn.skypack.dev/three';
        let scene = new THREE.Scene(); 
        // Vertical field of view, aspect ratio, near plane, far plane
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 100, 55000);
        let renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);
        let light = new THREE.SpotLight(); // Light from a single point in one direction
        light.position.set(0, 500, 200); scene.add(light);

        document.body.appendChild(renderer.domElement);

        let loader = new THREE.FontLoader();
        let font_src = 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/fonts/helvetiker_regular.typeface.json';
        loader.load(font_src, font => {
            let text_geometry = new THREE.TextGeometry( 'Hello world!', {
                font, size: 42, 
                height: 10, // How deep are the letters
                bevelEnabled: true,
                bevelThickness: 1, // How deep into text bevel goes
                bevelSize: 1, // How far from text outline is bevel
            });
            text_geometry.center();

            let text_material = new THREE.MeshPhongMaterial({ // A material for shiny surfaces with specular highlights.
                color: 0xfff000, 
                specular: 0x0fffff, // How shiny the material is and the color of its shine 
            });

            let mesh = new THREE.Mesh(text_geometry, text_material); // triangular polygon mesh
            mesh.position.z = -400; scene.add( mesh );

            let animate = () => {
                requestAnimationFrame(animate);
                mesh.rotation.y += 0.01;
                renderer.render(scene, camera);
            }; animate();
        });
    </script>
</head>
<body></body>
</html>

#javascript

Subscribe to our newsletter

If you provide url of your website, we send you free design concept of one element (by our choice)

Subscribing to our newsletter, you comply with subscription terms and Privacy Policy