I have successfully created a basic 3D scene using JavaScript. The scene features a THREE.SphereGeometry paired with a THREE.MeshNormalMaterial. However, I am now faced with the challenge of adding a text layer on top of the Three.js scene.
Query: What is the best way to position 2D text over a rendered Three.js scene?
<html>
<head>
<title>First page.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/errordocs/style/general.css" rel="stylesheet" type="text/css">
<script src="https://threejs.org/build/three.js" crossorigin="anonymous"></script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script>
var scene, camera, renderer;
var geometry, material, mesh;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x222222 );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 1;
geometry = new THREE.SphereGeometry( 0.1, 20, 20 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
</script>
</body>
</html>