UI Creation

The problem

Very often it may be necessary to create some interface for direct interaction with the user. Usually, in game engines such as Unity, Unreal Engine, and so on, the interface is created by clicking a couple of buttons.

Previously, the interface was created in a different way – the desired UI was stretched onto a plane, which was taken out somewhere into the distance. Further, another camera was created that projected this interface onto the user’s screen.

Unfortunately, this method cannot be recreated in advanced editor. The restrictions on working with cameras are described in the article Working With The Camera.

One of the ways to add UI is to work with the HTML code of the page. But this option will not be correct, as it will interfere with the work of augmented reality.

Working method

The first step to create an interface is to add a plane to the scene (it is better to do this through a script).

In this script, a plane is created and a material (the future interface) is added.

let loader = new THREE.ImageLoader;
let planeGeometry = new THREE.PlaneGeometry(20, 5, 10, 10);
let planeMaterial = new THREE.MeshBasicMaterial({
	map: loader.load("https://mywebar-a.akamaihd.net/1330/20322/Mywebar.png?hash=028902a08ce058c1a17f57b40d423ca9"),
	side:THREE.DoubleSide
});
plane = new THREE.Mesh(planeGeometry, planeMaterial);

It is also imperative to add a plane to the scene.

let loader = new THREE.ImageLoader;
let planeGeometry = new THREE.PlaneGeometry(20, 5, 10, 10);
let planeMaterial = new THREE.MeshBasicMaterial({
	map: loader.load("https://mywebar-a.akamaihd.net/1330/20322/Mywebar.png?hash=028902a08ce058c1a17f57b40d423ca9"),
	side:THREE.DoubleSide
});
plane = new THREE.Mesh(planeGeometry, planeMaterial);
this.add(plane);

Now the plane is on the scene. Next, it is necessary to make sure that it does not move in relation to the camera, that is, so that it looks like an interface.

To do this, a function has to be created and copying the camera parameters (position and rotation) has to be added there:

let loader = new THREE.ImageLoader;
let planeGeometry = new THREE.PlaneGeometry(20, 5, 10, 10);
let planeMaterial = new THREE.MeshBasicMaterial({
	map: loader.load("https://mywebar-a.akamaihd.net/1330/20322/Mywebar.png?hash=028902a08ce058c1a17f57b40d423ca9"),
	side:THREE.DoubleSide
});
plane = new THREE.Mesh(planeGeometry, planeMaterial);
this.add(plane);

function update() {

	plane.quaternion.copy( camera.quaternion );
	
}

Thus, with each frame copying camera parameters and transferring them to the plane will take place. Thus, it will all look like an interface.