title: three.js change object dynamically related to distance
body: <p>I made a graphical website with three.js.</p>
  
  <p>It's concept is universe that has so many texts.</p>
  
  <p>When distance of between camera and mesh is close, mesh is text.</p>
  
  <p>But if distance is far, it change to square.</p>
  
  <p>I wonder that change mesh related to distance is possible?</p>
  
  <p>I searched in google few hours, there is no information about this.</p>
  
  <p>code here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Define Variables
  var myElement = document.getElementById("threejs");
  let camera, scene, renderer;
  const mouse = new THREE.Vector2();
  clicked = new THREE.Vector2();
  const target = new THREE.Vector2();
  const windowHalf = new THREE.Vector2( window.innerWidth / 2, window.innerHeight / 2 );
  const moveState = {forward: 0, back: 0};
  var isMobile = false;
  var hold = -1;
  
  /****** Define Function ******/
  /*****************************/
  
  checkMobile = () =&gt; {
    var UserAgent = navigator.userAgent;
  
    if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
        isMobile = true;
    } else {
        isMobile = false;
    }
  }
  checkMobile();
  
  onMouseMove = (event) =&gt; {
    mouse.x = ( (event.clientX/2) - (windowHalf.x/2) );
    mouse.y = ( (event.clientY/2) - (windowHalf.y/2) );
    clicked.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    clicked.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  }
  
  
  onResize = (event) =&gt; {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    windowHalf.set( width / 2, height / 2 );
   
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize( width, height );
  }
  
  onContextMenu = (event) =&gt; { 
    event.preventDefault();
  }
  
  onMouseDown = (event) =&gt; {
    hold = event.which;
  }
  
  onMouseUp = () =&gt; {
    hold = -1;
  };
  
  // TEST
  
  //
  
  // Start Script
  init = () =&gt; {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 1000;
  
    scene = new THREE.Scene();
  
    const geometry = new THREE.BoxBufferGeometry();
    const material = new THREE.MeshNormalMaterial({ transparent: true });
    
    if(isMobile) {
      var controls = new THREE.DeviceOrientationControls(camera);
    } else {
      console.log('isMobile false');
    }
    
    group = new THREE.Group();
    
    for ( let i = 0; i &lt; 800; i ++ ) {   
      let sprite = new THREE.TextSprite({
        textSize: 2,
        redrawInterval: 1,
        texture: {
          text: 'TEST',
          fontFamily: 'Arial, Helvetica, sans-serif',
        },
        material: {
          color: 'white',
        },
      });
      sprite.position.x = Math.random() * 180-100;
      sprite.position.y = Math.random() * 180-100;
      sprite.position.z = Math.random() * 1000-40;
      group.add(sprite);
  
    }
    scene.add(group);
  
    renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    // Event handler
    document.addEventListener('mousemove', onMouseMove, false);
    document.addEventListener('mousedown', onMouseDown, false);
    document.addEventListener('mouseup', onMouseUp, false);
    document.addEventListener('contextmenu', onContextMenu, false);
    
    window.addEventListener('resize', onResize, false);
    
    // Helper
    var axesHelper = new THREE.AxesHelper( 15 );
    scene.add( axesHelper );
  
    animate = () =&gt; {
      // For camera follow mouse cursor
      target.x = ( 1 - mouse.x ) * 0.002;
      target.y = ( 1 - mouse.y ) * 0.002;
      camera.rotation.x += 0.05 * ( target.y - camera.rotation.x );
      camera.rotation.y += 0.05 * ( target.x - camera.rotation.y );
      
      if(isMobile) {
        controls.update();
      }
      switch(hold) {
        case 1:
          if(camera.position.z &gt; 0) {
            camera.position.z -= 4;
          }
          break;
        case 3:
          camera.position.z += 4;
          break;
      }
      
      // Object opacity related to distance between camera and object
      for (i = 0; i &lt; 800; i++) {
        var distance = camera.position.distanceTo(group.children[i].position);
        var opacity = -1 / 400 * distance + 1;
        if (opacity &lt; 0) {
          opacity = 0;
        }
        group.children[i].material.opacity = opacity;
      }
      
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
    }
    // Run
    animate();
  }
  // Run
  init();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    width: 100%;
    height: 100%;
    
  /*  background: #11e8bb;  Old browsers */
  /*  background: -moz-linear-gradient(top,  #11e8bb 0%, #8200c9 100%);  FF3.6-15 */
  /*  background: -webkit-linear-gradient(top,  #11e8bb 0%,#8200c9 100%);  Chrome10-25,Safari5.1-6 */
  /*  background: linear-gradient(to bottom,  #11e8bb 0%,#8200c9 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: radial-gradient(circle, #ed1654, #f61e6c, #f76098);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#8200c9',GradientType=0 ); /* IE6-9 */
  }
  
  body {
    margin: 0;
  }
  canvas {
    width: 100%;
    height: 100%;
  }
  #threejs {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  header {
    position: fixed;
    z-index: 9999;
    background-color: white;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    height: 50px;
  }
  /* Header Left */
  .header-left {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  .header-left img {
    width: 80px;
    height: 20px;
  }
  /* Header Right */
  .header-right {
    flex: 1;
    padding-left: 200px;
  }
  .header-right a {
    text-decoration: none;
    color: black;
    font-weight: 600;
  }
  .header-right a:nth-child(2) {
    padding-left: 50px;
    padding-right: 50px;
  }
  /* Main Company */
  .down-btn {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    bottom: 0;
    color: white;
    left: 50%;
    font-size: 2rem;
    cursor: pointer;
  }
  .down-btn a {
    text-decoration: none;
    color: white;
    padding-bottom: 20px;
  }
  /* Section */
  section {
    background-color: aliceblue;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;!--  &lt;script src="three.js"&gt;&lt;/script&gt;--&gt;
    &lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"&gt;&lt;/script&gt; 
    &lt;script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/three.texttexture"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/three.textsprite"&gt;&lt;/script&gt;
    &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
      &lt;div class="header-left"&gt;
        &lt;a href="#"&gt;MAIN&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="header-right"&gt;
        &lt;a href="#"&gt;ABOUT&lt;/a&gt;
        &lt;a href="#"&gt;PRODUCT&lt;/a&gt;
        &lt;a href="#"&gt;CONTACT&lt;/a&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div id="threejs"&gt;&lt;/div&gt;
    &lt;script src="src.js"&gt;&lt;/script&gt;
    &lt;div class="down-btn"&gt;
      &lt;a href="#section"&gt;&amp;darr;&lt;/a&gt;
    &lt;/div&gt;
    &lt;section id="section"&gt;
      SECTION
    &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Mouse left click : move forward / right click : move backward)
  I implemented almost done except change mesh.</p>
  
  <p>Is it possible or any solution about this issue?</p>
  
  <p>Thanks.</p>