Add a cursor/reticle to center of screen

Questions
,
1

Hi,

I am trying to add a cursor or reticle to center of screen. I followed some examples of internet but the cursor not shows on screen

This is my code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>three.js webgl - effects - stereo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
      <style>
        body {
          background:#777;
          padding:0;
          margin:0;
          font-weight: bold;
          overflow:hidden;
        }

        #info {
          position: absolute;
          top: 0px; width: 100%;
          color: #ffffff;
          padding: 5px;
          font-family:Monospace;
          font-size:13px;
          text-align:center;
          z-index:1000;
        }

        a {
          color: #ffffff;
        }

        #oldie a { color:#da0 }
      </style>
    </head>

    <body>

    <script src="js/three.js"></script>
    <script src="js/DeviceOrientationControls.js"></script>

    <script src="js/StereoEffect.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/Gallery.js"></script>

    <script>

      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var container;

      var camera, scene, renderer, effect, controls;
      var gallery, cursor;

      var SCALE = 3;

      var CursorSize = 500

      var DEMOS = [
        {
          'slug': 'smiley',
          'href': '#',
          'preview': 'textures/gallery/freddy.png'
        },
      ];


      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;


      init();
      animate();

      function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
        controls = new THREE.DeviceOrientationControls( camera );
        camera.position.z = 5;


        scene = new THREE.Scene();
        scene.background = new THREE.CubeTextureLoader()
          .setPath( 'textures/cube/universe/' )
          .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

        var reticle = new THREE.Mesh(
          new THREE.RingBufferGeometry( 0.85 * CursorSize, CursorSize, 32),
          new THREE.MeshBasicMaterial( {color: 0xffffff, blending: THREE.AdditiveBlending, side: THREE.DoubleSide })
        );
        reticle.position.z = -3 * SCALE;
        reticle.lookAt(camera.position)
        camera.add(reticle);
**        scene.add(camera);**




        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        effect = new THREE.StereoEffect( renderer );
        effect.setSize( window.innerWidth, window.innerHeight );
        effect.separation = 0.6;


        window.addEventListener( 'resize', onWindowResize, false );

      }

      function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        effect.setSize( window.innerWidth, window.innerHeight );

      }



      function animate() {

        requestAnimationFrame( animate );
        controls.update();

        render();

      }

      function render() {

        effect.render( scene, camera );

      }

    </script>

    </body>
    </html>

If I change:

camera.add(reticle);
scene.add(camera);

to
scene.add(reticle);

The reticle is showed but each time that loads the scene is on a different position

What I am doing wrong?

Thanks

2

The z-value is too high. If I decrease the value, your ring is shown in front of the camera:

3

One noob question, If set a element.position.x to ‘n’. What is n? grades, radians, …?

4

Object3D.position: Represents the local position in world units.
Object3D.rotation: Represents the local rotation in radians.

5

Thanks for your help