三個JS按id選擇幾何圖形

背景：我是一個知道JS的開發者，但對三JS來說是比較新的。我已經完成了一些涉及基本重複動畫的靜態場景的小項目。三個JS按id選擇幾何圖形

我目前正在研究Google Globe項目http://workshop.chromeexperiments.com/globe/的修改版本。回想起來，我可能應該從頭開始，但這是看到他們的開發方法的好工具。我只希望我現在可以更新ThreeJS，而不是整個事情都崩潰了（太多不支持的方法和一些我永遠無法修復的錯誤，至少在我嘗試使用它的小時內）。

原來，他們正在將所有的幾何點合併成一個對象來加速FPS。爲了我的目的，我正在使用JSON更新地球上的點數，並且永遠不會超過100個（實際上可能不超過60個），因此他們需要保持個性化。我已經刪除了「合併」階段，所以我現在可以單獨分配數據到點，然後TWEEN高度變化動畫。

我的問題是，我如何手動選擇一個點（這是一個立方體幾何），以便我可以修改高度值？我已經通過Stack Overflow和GitHub上的三個JS進行了研究，我不確定我是否理解這個過程。我正在分配一個ID，以使其直接與正在傳入的數據相關聯（我知道WebGL爲粒子添加了一個單獨的名稱/ ID，但我需要的東西與我爲爲了簡單起見）。這似乎工作正常。但是，作爲一個JS開發者，我已經在jQuery中嘗試過.getElementById（id）和$（'＃'+ id），並且都不起作用。我意識到Geometry對象的行爲與HTML DOM對象的行爲不同，所以我想這就是我正在掙扎的地方。

代碼數據點添加到世界各地：

function addPoint(lat, lng, size, color, server) { 
    geometry = new THREE.Cube(0.75, 0.75, 1, 1, 1, 1, null, false, { px: true, 
    nx: true, py: true, ny: true, pz: false, nz: true}); 

    for (var i = 0; i < geometry.vertices.length; i++) { 
     var vertex = geometry.vertices[i]; 
     vertex.position.z += 0.5; 
    } 

    var point = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial ({ 
     vertexColors: THREE.FaceColors 
    })); 

    var phi = (90 - lat) * Math.PI/180; 
    var theta = (180 - lng) * Math.PI/180; 

    point.position.x = 200 * Math.sin(phi) * Math.cos(theta); 
    point.position.y = 200 * Math.cos(phi); 
    point.position.z = 200 * Math.sin(phi) * Math.sin(theta); 

    if($('#'+server).length > 0) { 
     server = server+'b'; 
    } 

    point.id = server; 

    point.lookAt(mesh.position); 

    point.scale.z = -size; 
    point.updateMatrix(); 

    for (var i = 0; i < point.geometry.faces.length; i++) { 
     point.geometry.faces[i].color = color; 
    } 

console.log(point.id); 

    scene.addObject(point); 
}

所以現在要回去了，我知道我不能使用point.id，因爲很明顯，這將只在函數內部引用。但我已經嘗試過'Globe.id'，'Globe.object.id'，'object.id'，但似乎沒有任何工作。我知道這是可能的，我似乎無法找到一種有效的方法。

來源

2012-10-05 ChrisCoray

好吧，我找到了一個方法，通過玩這個結構。

本質上，場景標記爲「globe」，所有對象都是其子項。這樣處理所述場景作爲一個數組，可以成功地使用以下結構傳遞一個對象到變種：

環球>場景>兒童> [對象]

使用匹配函數通過每個項目，我們循環和找到所需的幾何對象並將其分配給一個臨時變量的動畫/調整：

function updatePoints(server){ 
    var p, lineObject; 

    $.getJSON('/JSON/'+server+'.json', function(serverdata) { 

     /* script that sets p to either 0 or 1 depending on dataset */ 

     var pointId = server+p; 

     //Cycle through all of the child objects and find a patch in 
     for(var t = 3; t < globe.scene.children.length; t++) { 
      if(globe.scene.children[t].name === pointId) { 
       //set temp var "lineObject" to the matched object 
       lineObject = globe.scene.children[t]; 
      } 
     } 

     /* Manipulation based on data here, using lineObject */ 
    }); 
}

我不知道這一點是任何人都已經對問題，但我希望它可以幫助別人！ :)

編輯：剛纔意識到這不是一個鍵控陣列，所以我可以使用.length來獲得總共＃對象

來源

2012-10-08 19:04:43 ChrisCoray

三個JS按id選擇幾何圖形

回答

相關問題