I am having extreme difficulty to create a simple ThreeJS application that renders 3D text on the scene. All the examples on the website are too heavy to get a beginner like me to get started. So far, I cannot make the scene appear without hacks and I want to use my own canvas element to add css properties to it.

This is the following code I have written to make a cube appear in the scene.

import * as THREE from 'three';
import 'bootstrap';
import css from '../css/custom_css.css';

let scene = new THREE.Scene();

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;

let camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xE8E2DD, 1);

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

// Create the shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
// Create a material, colour or image texture
let material = new THREE.MeshBasicMaterial( {
    color: 0xFF0000,
    wireframe: true
});

// Cube
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);

let material_text = new THREE.MeshPhongMaterial({
    color: 0xdddddd
});

var loader = new THREE.FontLoader();

loader.load( '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,
        bevelOffset: 0,
        bevelSegments: 5
    } );

    let textMesh = new THREE.Mesh(geometry, material_text);
    scene.add(textMesh);

    console.log('added mesh')
} );


camera.position.z = 5;

// Game Logic
let update = function(){
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.005;
};

// Draw Scene
let render = function(){
  renderer.render(scene, camera);
};

// Run game loop, update, render, repeat
let gameLoop = function(){
    requestAnimationFrame(gameLoop);

    update();
    render();
};

gameLoop();

I know it is a canvas issue because everyone is suggesting to simply add

var renderer = new THREE.WebGLRenderer( { canvas: my_canvas } );

, but that does not work for me. I know it doesn't because if I remove that and keep in

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

then I can see objects in my scene.

Why is it not allowing me to place the scene on my canvas?

My canvas is written as

<!--                            Canvas                         -->
<canvas id="my_canvas" class="container-fluid h-100 w-100 p-0 position-fixed" style="background-color: white; z-index: -1"> </canvas>

Edit: For anyone willing, could you also tell me why my text is not appearing in the scene and only the cube is? Thanks

Edit: canvas: document.getElementById('my_canvas') -- did not work ;(

I am having extreme difficulty to create a simple ThreeJS application that renders 3D text on the scene. All the examples on the website are too heavy to get a beginner like me to get started. So far, I cannot make the scene appear without hacks and I want to use my own canvas element to add css properties to it.

This is the following code I have written to make a cube appear in the scene.

import * as THREE from 'three';
import 'bootstrap';
import css from '../css/custom_css.css';

let scene = new THREE.Scene();

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;

let camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xE8E2DD, 1);

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

// Create the shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
// Create a material, colour or image texture
let material = new THREE.MeshBasicMaterial( {
    color: 0xFF0000,
    wireframe: true
});

// Cube
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);

let material_text = new THREE.MeshPhongMaterial({
    color: 0xdddddd
});

var loader = new THREE.FontLoader();

loader.load( '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,
        bevelOffset: 0,
        bevelSegments: 5
    } );

    let textMesh = new THREE.Mesh(geometry, material_text);
    scene.add(textMesh);

    console.log('added mesh')
} );


camera.position.z = 5;

// Game Logic
let update = function(){
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.005;
};

// Draw Scene
let render = function(){
  renderer.render(scene, camera);
};

// Run game loop, update, render, repeat
let gameLoop = function(){
    requestAnimationFrame(gameLoop);

    update();
    render();
};

gameLoop();

I know it is a canvas issue because everyone is suggesting to simply add

var renderer = new THREE.WebGLRenderer( { canvas: my_canvas } );

, but that does not work for me. I know it doesn't because if I remove that and keep in

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

then I can see objects in my scene.

Why is it not allowing me to place the scene on my canvas?

My canvas is written as

<!--                            Canvas                         -->
<canvas id="my_canvas" class="container-fluid h-100 w-100 p-0 position-fixed" style="background-color: white; z-index: -1"> </canvas>

Edit: For anyone willing, could you also tell me why my text is not appearing in the scene and only the cube is? Thanks

Edit: canvas: document.getElementById('my_canvas') -- did not work ;(

• javascript
• html
• css
• three.js

• Can you please demonstrate your issue with a live example. That will make it much easier to help you. – Mugen87 Commented Sep 8, 2019 at 9:44
• I am confused why this example works, and it doesn't in my code :/ – J.Doe Commented Sep 8, 2019 at 14:40
• 1 Maybe a CSS issue? Can you try to remove all styles in order to verify that the canvas is actually visible inside the viewport. – Mugen87 Commented Sep 8, 2019 at 15:07

2 Answers 2

You have to do 3 things in order:

1. Create your canvas in the document.
2. Select your canvas via JS
3. Pass your canvas selector to the ThreeJS renderer.

In HTML:

<canvas id="my_canvas"></canvas>
<script>
    // Make sure your script tags are at the end of the document.
    // Otherwise, your selectors may not work
</script>

In JavaScript:

// Select the canvas from the document
var canvReference = document.getElementById("my_canvas");

// Then pass it to the renderer constructor
var renderer = new THREE.WebGLRenderer({
    antialias:true,
    canvas: canvReference
});

After you have that working, you can assign custom CSS rules via CSS:

#my_canvas {
    width: 100%;
    height: 100%;
}

I've e across this issue in the past, you need to remove position-fixed from your canvas CSS classes. (As @Mugen87 states in his ment).

<canvas id="my_canvas" class="container-fluid h-100 w-100 p-0" style="background-color: white; z-index: -1"> </canvas>