如何讓Json模型在場景中自動旋轉？

Question

當我使用mouseevent時，我可以旋轉ballmesh。

首先嚐試

var jsonLoader = new THREE.JSONLoader(); 
jsonLoader.load('models/ball.json', addJsonToScn); 

function addJsonToScn(geometry) { 
     var ball = new THREE.BufferGeometry().fromGeometry(geometry); 
     var mtl = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
     ballmesh = new THREE.Line(ball, mtl); 
     scene.add(ballmesh); 
    } 

document.addEventListener('click', rotateMesh, false); 

function rotateMesh() { 
    ballmesh.rotation.y += 0.1; 
} 


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

當我點擊窗口，網格可以沿y軸旋轉。

這意味着在點擊窗口之前，網格會完全加載到場景中。

但是，我想讓網格自動旋轉，所以我修改了代碼。

第二次嘗試

我在功能動畫添加

ballmesh.rotation.y += 0.1; 

（）;

var jsonLoader = new THREE.JSONLoader(); 
jsonLoader.load('models/ball.json', addJsonToScn); 

function addJsonToScn(geometry) { 
     var ball = new THREE.BufferGeometry().fromGeometry(geometry); 
     var mtl = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
     ballmesh = new THREE.Line(ball, mtl); 
     scene.add(ballmesh); 
    } 

document.addEventListener('click', rotateMesh, false); 

function rotateMesh() { 
    ballmesh.rotation.y += 0.1; 
} 


function animate() { 
    ballmesh.rotation.y += 0.1; 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
} 

我得到這個錯誤

TypeError: ballmesh is undefined 

它看起來像網不完全加載呢。

如果我想讓網格自動旋轉，我該怎麼做？

Answer 1

你在這裏掙扎的東西與three.js沒有任何關係，但是JavaScript提供了一個事件驅動的環境，而你需要考慮，當部分代碼在現實中被執行時。

在這個特殊的例子中，你發送一個呼叫請求加載一個模型，再加上一個「完成」事件到那個請求。即使您在此處註冊，該事件處理程序代碼只會在模型加載和處理後執行。

緊隨該請求發送之後，您的主代碼將繼續並開始爲場景製作動畫。但是，該完成事件尚未執行（模型仍在加載），並且您會得到未定義的變量錯誤。

在此之後的某個時刻，您的模型將被加載，並且附加到該代碼的事件處理程序現在將設置該變量...但由於未定義的變量，您的動畫循環已經斷開。

最瑣碎的方法來解決這個問題爲您具體的例子是忽略了網格，直到它準備：

function animate() { 
    if (ballmesh !== undefined) { 
     ballmesh.rotation.y += 0.1; 
    } 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
} 

另一種方式可能是開始從addJsonToScn事件處理循環播放動畫，雖然這種基本的方法只適用於那些你只想在單個加載事件中等待的簡單例子。