Я работаю над 3D Canvas, используя p5.js и three.js.
У меня вопрос: как установить изображение в углу 3D холста? Обратите внимание, что когда я работаю на холсте, я не хочу, чтобы изображение исчезало, но и не двигалось, поскольку я мог бы вращаться или перемещаться в сцене.
Ссылка ниже показывает проблему. В основном я хочу изображение "reset_Camera" в углу 3D-сцены.
Я пытался использовать Three.SpriteText, но у меня не получилось.
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);