How to create a sprite image button and add it to a 3D canvas?

Question

Im working on a 3D Canvas using p5.js and three.js.

My question is: How to set the image on the corner of the 3D canvas? Notice that when i work on the canvas i don't want the image to disappear but also not move, as I might rotate or move around in the scene.

The link below shows the problem. Basically i want the "reset_Camera" image on the corner of the 3D scene.

I tried using Three.SpriteText but didn't work for me.

HTML & CSS

<input type="image" src="images/resetCameraIcon.png"/>

<canvas width="960" height="528" style="width: 960px; height: 528.545px;
display: block; padding-left: 0px; padding-right: 0px; margin-left: auto;
margin-right: auto; margin-top: 20px;"></canvas>

Javascript:

//Add new Camera
canvas_Camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 10000);
canvas_Camera.position.set( 2, 0.8, 2); //Set camera position

//Add new Scene
canvas_Scene = new THREE.Scene();

//Add new Renderer
canvas_Renderer = new THREE.WebGLRenderer({ antialias: true });
canvas_Renderer.setSize(canvasWidth, canvasHeight); //Set Renderer Size

//Assign 3D Space to canvas
canvas_Element = canvas_Renderer.domElement;

//Add CSS Styles on Canvas
...lines

//Add Canvas to index.html
canvas_Parent.appendChild(canvas_Element);

Please have a look how the red sprites are rendered in the following example. I think you can use the code from `createHUDSprites()` and `updateHUDSprites()` from your own app. https://threejs.org/examples/webgl_sprites.html — Mugen87, Jan 13 '19 at 10:07
Thanks for your answer @Mugen87, although your suggestion is efficient, it requires many lines of code. And also it is not working in my case. — Loizos Vasileiou, Jan 13 '19 at 14:53
@prisoner849, thank you for your answer. For the CSS I tried: which works great, but when the zoom of the browser is not 100%, things are getting messy. — Loizos Vasileiou, Jan 13 '19 at 14:53
@LoizosVasileiou Well, it depends on what you want in the result, if you want to have scalable interface, then Mugen87's solution is more acceptable in this case. — prisoner849, Jan 13 '19 at 15:42
Besides, if you want to support VR, it's not possible to use HTML elements. — Mugen87, Jan 13 '19 at 16:12
I found this which really helps : https://jsfiddle.net/0sd9k7gp/4/ — Loizos Vasileiou, Jan 16 '19 at 18:44

How to create a sprite image button and add it to a 3D canvas?

0 Answers0