three.js-如果單擊鼠標，如何切換相機位置？

Question

我是three.js的新手，如果這個問題看起來有點令人費解，我感到很抱歉。

因此，我已經在Three.js中設置了場景，但是我希望攝像機的位置從A點到B點平滑地動畫（我將在代碼中指定A和B的位置）。 我可能會使用Tween.js來簡化相機動畫。

我希望每當單擊鼠標左鍵時，相機的位置就會發生變化。 因此，基本上，每當在場景中的任何位置單擊鼠標左鍵時，攝像機的位置就會從位置A切換到位置B，反之亦然。

但是，我不確定如何復制這樣的內容。 我找到了有關如何在每次按住鼠標時更改位置的教程，但是沒有找到任何在單擊鼠標時在固定位置來回切換位置的方法。 我不知道是否要執行此操作，我必須在我的代碼的函數render（）部分中做出一個“ if”語句，該語句說明是否單擊了鼠標以更改相機位置，但是我想那太簡單了？

任何幫助表示贊賞。

編輯：

這是我的render（）場景的代碼：

function render() {

            var timer = Date.now() * 0.00030;

            camera.position.x += ( 0.5*Math.sin( timer ) * mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( 0.5*Math.cos( timer ) *- mouseY - camera.position.y ) * 0.05;
            camera.position.z = 0;

            camera.lookAt( scene.position );

            for ( i = 0; i < scene.children.length; i ++ ) {
                var object = scene.children[ i ];
                if ( object instanceof THREE.Points ) {
                    object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );
                }
            }

            for ( i = 0; i < materials.length; i ++ ) {
                color = parameters[i][0];
                h = ( 0 * ( color[0] + time ) % 360 ) / 360;
                materials[i].color.setHSL( h, color[1], color[2] );
            }

            renderer.render( scene, camera );

        }

為了澄清camera.position.z = 0; ，我希望為camera.position.z = 0;設置動畫camera.position.z = 0; 只要在我的場景上單擊鼠標左鍵，即可將鼠標移至其他特定位置。

Answer 1

您可以偵聽文檔上的鼠標事件，切換位置，然后調用render()重新繪制畫布。

 // list of positions in [x, y, z] coordinates var positions = [ [0, 0, 0], [5, 0, 0] ]; // set our first position var positionIndex = 0; var position = positions[positionIndex]; document.addEventListener('click', function() { // when a click happens ... positionIndex++; // reset position index back to 0 if it's past the end of the array positionIndex = positionIndex >= positions.length ? 0 : positionIndex; // update the current position position = positions[positionIndex]; // re-render the canvas render(); }); function render() { console.log('rendering at position', position); } // do our inital render render();