I am currently working on a flight simulator project and faced a challenge in placing a cockpit image in front of my camera controlled by FirstPersonControls. Despite trying various methods, I have not been successful in making it work.
Here is what I have achieved so far: https://i.sstatic.net/cDyeY.png
The progress can be observed in this Codepen Project: Codepen Project
This section showcases where I am attempting to position the image:
function onTextureLoad(texture) {
console.log(texture);
var geometry = new THREE.PlaneGeometry(2, 2, 0);
var material = new THREE.MeshBasicMaterial({
map: texture, transparent: true, opacity: 1
});
var geometryco = new THREE.PlaneGeometry(100,100,100,100);
var cockpit = new THREE.Mesh(geometryco, material);
cockpit.position.set(0,20,0);
scene.add(cockpit);
render();
}Your assistance in resolving this issue would be greatly appreciated.