CODEWITHSUNDEEP
javascript3dthree.js
Rodolfo R
Rodolfo R

Reputation: 447

Three.js Placing image in front of the camera

I'm trying to make a flight simulator for a project, and I'm trying to place a cockpit image in front of my camera, which is being controlled with FirstPersonControls, I've tried many things but I can't make it work.

here's what I got so far: The cockpit image should be in front of the camera

I got this running in a: Codepen Project

This is where I'm trying to place 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();
  }

Any help would be appreciated

Upvotes: 1

Views: 945

Answers (2)

prisoner849
prisoner849

Reputation: 17576

Another option is to put the cockpit in the img tag, which is in front of the renderer's canvas:

html:

<img src="https://i.imgur.com/VfF0ada.png" style="position:absolute; width:100%; height:100%"/>

js:

renderer = new THREE.WebGLRenderer({});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

https://codepen.io/prisoner849/pen/qYgKvz?editors=0010

Upvotes: 2

Ben West
Ben West

Reputation: 4596

Make it a child of the camera so that they move together.

camera.add( cockpit )
scene.add( camera )

Upvotes: 2

Related Questions