三个 JS TextGeometry 始终面向用户

Question

这是我的源代码。 我正在尝试让 TextGeometry 始终看着相机？这可能吗？

代码：

      var stats;
      var camera, controls, scene, renderer;

      init();
      render();

      function init() {
      scene = new THREE.Scene();
      var ambient = new THREE.AmbientLight( 0xFFFFFF );
      scene.add( ambient );

      var container = document.getElementById('container');

      renderer = new THREE.WebGLRenderer({antialias: 1 });

      renderer.shadowMap.enabled = true;

      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x013A65);

      container.appendChild( renderer.domElement );

      camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
      camera.position.set(0,0,0);

      controls = new THREE.OrbitControls( camera, renderer.domElement );
      controls.addEventListener( 'change', render );
      controls.enableKeys = false;
      controls.enableZoom = true;
      controls.minDistance = 2000;
      controls.maxDistance = 3500;
      controls.maxPolarAngle = Math.PI/2; 

      // world
      var onError = function ( xhr ) { };
      THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
      var mtlLoader = new THREE.MTLLoader();
      mtlLoader.setPath( './assets/3d/' );
      mtlLoader.load( 'A.mtl',           function( materials ) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        mtlLoader.setPath( './assets/3d/' );
        objLoader.load( './assets/3d/A.obj',             function ( object ) {
        object.position.x = 0;
        object.position.y = 0;
        object.position.z = 0;
        scene.add( object );
        }, onError );
      });

      //Text
      var loader = new THREE.FontLoader();
      loader.load( './fonts/Open_Sans_Regular.json', function ( font ) {
        var textGeometry = new THREE.TextGeometry( "Test", {font: font, size: 22, height: 3, curveSegments: 1});var textMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, specular: 0xFFFFFF });var mesh1 = new THREE.Mesh( textGeometry, textMaterial );mesh1.position.x = -200;mesh1.position.y = 250;mesh1.position.z = 725;scene.add( mesh1);});   

      // lights
      light = new THREE.DirectionalLight( 0xFFFFFF );
      light.position.set( 1, 1, 1 );
      scene.add( light );

      window.addEventListener( 'resize', onWindowResize, true );
    }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
      }

      function animate() {
        requestAnimationFrame( animate );
        stats.update();
        render();
      }

      function render() {
        renderer.render( scene, camera );
      }

我已经在渲染函数中尝试过 mesh.lookAt(camera.position) 但没有成功。

最好的问候。

Answer 1

我相信您的问题是无论相机在哪里，如何使文本出现。您可以尝试将文本放在 div 容器中并使用 CSS 使位置成为绝对位置，而不是使用文本几何。 https://threejs.org/docs/#manual/en/introduction/Creating-text