如何在三個 JS 中使 TextGeometry 跟隨鼠標？

Question

這是我的源代碼。 我試圖讓文本根據鼠標位置旋轉。

// Initialization
            const scene = new THREE.Scene();
      let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            let body = document.getElementsByTagName("body");
            let pageX = 0.5;
            let pageY = 0.5;

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

      document.getElementById("board").appendChild(renderer.domElement);

      // Handle resize event
      window.addEventListener('resize', () => {
        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      });

      camera.position.z = 20;

            // Create light
            let directLight = new THREE.DirectionalLight('#fff', 4);
            directLight.position.set(0, 7, 5);
            scene.add(directLight);

            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );

            function animate (){
              requestAnimationFrame( animate );
                var loader = new THREE.FontLoader();
                loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
                    var geometry = new THREE.TextGeometry( 'Hello three.js!', {
                        font: font,
                        size: 3,
                        height: 0.5,
                        curveSegments: 4,
                        bevelEnabled: true,
                        bevelThickness: 0.02,
                        bevelSize: 0.05,
                        bevelSegments: 3
                    } );
                    geometry.center();
                    var material = new THREE.MeshPhongMaterial(
                        { color: '#dbe4eb', specular: '#dbe4eb' }
                    );
                    var mesh = new THREE.Mesh( geometry, material );

                    mesh.rotation.x = (pageY - 0.5) * 2;
                    mesh.rotation.y = (pageX - 0.5) * 2;

                    scene.add( mesh );
                } );
        renderer.render(scene, camera);
      }

      animate();

            // Get mouse coordinates inside the browser
            document.body.addEventListener('mousemove', (event) => {

                pageX = event.pageX / window.innerWidth;
                pageY = event.pageY / window.innerHeight;

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

        </script>

這是我能得到的最好的。 問題是每次我移動鼠標時，它都會實例化一個新的網格並相應地旋轉它，而我只需要一個網格來跟隨鼠標。 任何人都可以幫忙嗎？ 提前致謝！

Answer 1

正如您已經發現的那樣，您在每一幀都重新加載字體並最終每次都重新創建網格。

為了解決這個問題，你需要在一些初始化函數中移動字體加載和對象創建，所以它只發生一次。

您希望保留在渲染循環中的唯一代碼部分是根據鼠標移動更新文本的旋轉：

mesh.rotation.x = (pageY - 0.5) * 2;
mesh.rotation.y = (pageX - 0.5) * 2;

但這會帶來另一個問題。 由於mesh是在字體加載器的回調函數內定義的本地對象，因此外部無法訪問它。 幸運的是，three.js 提供了一個名為.name的屬性，您可以使用它為對象命名。 例如

var mesh = new THREE.Mesh(geometry, material);
mesh.name = "myText";
scene.add(mesh);

稍后您可以使用以下方法獲取對此對象的引用：

scene.getObjectByName("myText")

下面是一個例子：

 var container, scene, camera, renderer, pageX, pageY; function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); pageX = 0.5; pageY = 0.5; renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById("container").appendChild(renderer.domElement); window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }); camera.position.z = 20; let directLight = new THREE.DirectionalLight('#fff', 4); directLight.position.set(0, 7, 5); scene.add(directLight); var light = new THREE.AmbientLight(0x404040); // soft white light scene.add(light); var loader = new THREE.FontLoader(); loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) { var geometry = new THREE.TextGeometry('Hello three.js!', { font: font, size: 3, height: 0.5, curveSegments: 4, bevelEnabled: true, bevelThickness: 0.02, bevelSize: 0.05, bevelSegments: 3 }); geometry.center(); var material = new THREE.MeshPhongMaterial({ color: '#dbe4eb', specular: '#dbe4eb' }); var mesh = new THREE.Mesh(geometry, material); mesh.name = "myText"; scene.add(mesh); animate(); }); document.body.addEventListener('mousemove', (event) => { pageX = event.pageX / window.innerWidth; pageY = event.pageY / window.innerHeight; }); } function animate() { requestAnimationFrame(animate); render(); } function render() { scene.getObjectByName("myText").rotation.x = (pageY - 0.5) * 2; scene.getObjectByName("myText").rotation.y = (pageX - 0.5) * 2; renderer.render(scene, camera); } init();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script> <div id="container"></div>