合併具有不同顏色的網格

使用Three.js r75合併具有不同顏色的網格

我想顯示根據從綠色到紅色的整數值更改顏色的多維數據集。我堅持使用了多種方法。我無法使cubeMat.material.color.setRGB工作，並創建一個新的Three.Color似乎也不工作。請注意，我將所有幾何圖形合併爲一個繪圖調用。我希望這不是問題。

[UPDATE] 我確認rgb值是用getStyle正確設置的，但是它們不能正確呈現。所有立方體堆疊應該是不同的顏色。

function colorData(percentage){ 
    var rgbString = "", 
     r = parseInt(percentage * 25.5), 
     g = parseInt(((percentage * 25.5) - 255) * -1), 
     b = 0; 

    rgbString = "rgb("+r+","+g+",0)"; 
    return rgbString; 
} 

... 
var position = latLongToSphere(objectCoord[1], objectCoord[0], 300), 
      rgb = colorData(objectMag), 
      cubeColor = new THREE.Color(rgb), 
      cubeMat = new THREE.MeshBasicMaterial({color: cubeColor}), 
      cubeHeight = objectMag * 175, 
      cubeGeom = new THREE.BoxGeometry(3,3,cubeHeight,1,1,1), 
      cube = new THREE.Mesh(cubeGeom, cubeMat); 

     // set position of cube on globe, point to center, merge together for one draw call 
     cube.geometry.colorsNeedUpdate = true; 
     cube.position.set(position.x, position.y, position.z); 
     cube.lookAt(lookCenter); 
     cube.updateMatrix(); 
     console.log(cube.material.color.getStyle()); 
     geom.merge(cube.geometry, cube.matrix);

來源

2016-04-03 Michael Paccione

要合併的幾何形狀，所以你可以用一個繪圖調用和單一材料呈現，但希望每個合併後的幾何形狀有不同的顏色。

您可以通過在幾何中定義vertexColors（或faceColor）來實現該目的。這個模式遵循：

// geometry 
var geometry = new THREE.Geometry(); 

for (var count = 0; count < 10; count ++) { 

    var geo = new THREE.BoxGeometry(5, 5, 5); 

    geo.translate(THREE.Math.randFloat(- 5, 5), THREE.Math.randFloat(- 5, 5), THREE.Math.randFloat(- 5, 5)); 

    var color = new THREE.Color().setHSL(Math.random(), 0.5, 0.5); 

    for (var i = 0; i < geo.faces.length; i ++) { 

     var face = geo.faces[ i ]; 
     face.vertexColors.push(color, color, color); // all the same in this case 
     //face.color.set(color); // this works, too; use one or the other 

    } 

    geometry.merge(geo); 

}

然後，當您指定的材質爲合併後的幾何形狀，設置vertexColors像這樣：

// material 
var material = new THREE.MeshPhongMaterial({ 
    color: 0xffffff, 
    vertexColors: THREE.VertexColors // or THREE.FaceColors, if defined 
});

幾何體將與單個繪製調用進行渲染。您可以通過在控制檯中鍵入renderer.info來驗證。 renderer.info.render.calls應該是1.

three.js r.75

來源

2016-04-03 18:17:06 WestLangley

這是非常好的謝謝你！好奇這是什麼與緩衝幾何看起來......剛瞭解它，我想我應該使用它。我只在相應的場景中移動相機。 –

這是否與將框幾何體設置爲緩衝區幾何體一樣簡單，還是因爲在合併之前必須對其進行構造的方式有更多要求。 –

我不認爲'BufferGeometry'合併得到了適當的支持。 – WestLangley

cubeMat.material.color.setRGB不會工作，因爲它就像你正在調用的材料兩次（cubeMat和材料），試試這個來代替：

cube.material.color.setRGB(value, value, value);

來源

2016-04-03 09:57:27 leota

我試過但沒有工作。：/ –

@MichaelPaccione你是否收到任何錯誤？ – leota

所以我已經確認我的輸入現在是正確的。我正在使用Three.Color appraoch以rgb字符串值設置初始顏色。然後，我檢查後得到風格的顏色是正確的，但在屏幕上它不是 - 他們都是相同的顏色。立方體堆棧應該完全不同。 –

原來如果合併材料幾何不能有不同的顏色。我必須在合併前設置每個立方體的面部顏色。

見

Changing material color on a merged mesh with three js

Three js materials of different colors are showing up as one color

來源

2016-04-03 16:59:04

合併具有不同顏色的網格

回答

相關問題