Three.js Placing image in front of the camera

Question

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:

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

@Rabbid76 How would I do that ?

Rodolfo R
– Rodolfo R

2018-05-21 07:47:25 +00:00
Commented May 21, 2018 at 7:47 — Rodolfo R
– Rodolfo R, Commented May 21, 2018 at 7:47

Ben West · Accepted Answer · 2018-05-21 07:49:36Z

2

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

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

answered May 21, 2018 at 7:49

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rodolfo R Over a year ago

Where would I place that? , inside the function? , sorry I'm really new at this, I tried that but it doesn't show the image

Ben West Over a year ago

Instead of scene.add( cockpit )

prisoner849 · Accepted Answer · 2018-05-21 08:33:26Z

2

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

answered May 21, 2018 at 8:33

prisoner849

17.7k4 gold badges40 silver badges74 bronze badges

2 Comments

Rodolfo R Over a year ago

Wait that's css,I just realized.. I need it in three js

prisoner849 Over a year ago

@RodolfoR :) It's up to you. If you want to make it more complicated, so be it.

Collectives™ on Stack Overflow

Three.js Placing image in front of the camera

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related