https://www.dropbox.com/s/4zkhtdv4yaqhpxy/Screenshot%20from%202015-01-28%2010%3A42%3A02%201.png?dl=0 有人可以向我解释一下,我做错了什么吗?我希望立方体的每个面都有一种纯色。创建立方体的代码位于 RunCube.coffee 文件中,顶点和颜色在 Cube.coffee 文件中定义。我认为问题是我不知道如何使用颜色索引。 这是 github https://github.com/trimpirim/shiny-soice 上的存储库
更新: 我有 Cube 及其所有数据。
@vertices: [
[ 6.89954888016507530, 0.39691390817415106, -4.02972512706645780],
[-0.78006682662096161, -3.78853119791598660, -7.00275139558893490],
[-5.79336942493284560, 3.47790796230961650, -4.28264251507835430],
[ 1.88624628185319150, 7.66335306839975420, -1.30961624655587690],
[ 0.78006682662096205, 3.78853119791598920, 7.00275139558893490],
[ 5.79336942493284290, -3.47790796230961740, 4.28264251507835780],
[-1.88624628185319150, -7.66335306839975150, 1.30961624655588270],
[-6.89954888016507440, -0.39691390817415328, 4.02972512706646220]
];
@faces: [
[0, 1, 2], [0, 2, 3],
[0, 3, 4], [0, 4, 5],
[0, 5, 6], [0, 6, 1]
[2, 1, 6], [2, 6, 7],
[2, 7, 4], [2, 4, 3],
[4, 7, 6], [4, 6, 5]
];
@colors: [
[1.0, 0.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
]
有人可以告诉我,正确的颜色数据应该是什么样子?
最佳答案
编辑:
没有单独的颜色索引。顶点位置和颜色(或您能想到的任何其他属性)的索引相同。
要获得具有 6 种纯色的立方体,您必须重复数组的某些部分。
这是一种原型(prototype),顶点的样子:
vertices: [
{
position: [x,y,z],
color: [r, g, b, a]
},
{
position: [x,y,z],
color: [r, g, b, a]
},
...
];
位置为 [0,0,0]、颜色 [1,0,0,1] 的顶点与 位置为 [0,0,0] 的顶点不同,颜色[0,1,0,1]
。您希望立方体的一个 Angular 成为 3 个不同颜色的面的一部分。所以一个 Angular 一定有 3 个顶点,位置相同,但颜色不同。不幸的是,在这种情况下,位置不能共享。
所以你的定义应该是这样的:
var vertex_positions = [
// see that front face and back face has 8 unique positions
// front face
[0, 0, 0],
[1, 0, 0],
[1, 1, 0],
[0, 1, 0],
// back face
[0, 0, 1],
[1, 0, 1],
[1, 1, 1],
[0, 1, 1],
// see that bottom face and top face has 8 unique positions too,
// but they repeated with different order from front and back
// bottom face
[0, 0, 0],
[1, 0, 0],
[1, 0, 1],
[0, 0, 1],
// top face
[0, 1, 0],
[1, 1, 0],
[1, 1, 1],
[0, 1, 1],
// left and right face have 8 unique positions too, but again
// repeated from front, back / bottom, top
// left face
[0, 0, 0],
[0, 1, 0],
[0, 1, 1],
[0, 0, 1],
// right face
[1, 0, 0],
[1, 1, 0],
[1, 1, 1],
[1, 0, 1]
];
颜色,与位置相同数量的元素:
var vertex_colors = [
// front face
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
// back face
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
// bottom face
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
// top face
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
// left face
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
// right face
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
];
现在索引:
var triangles = [
// front face
[0, 1, 2],
[0, 2, 3],
// back face
[4, 5, 6],
[4, 6, 7],
// bottom face
[8, 9, 10],
[8, 10, 11],
// top face
[12, 13, 14],
[12, 14, 15],
// left face
[16, 17, 18],
[16, 18, 19],
// right face
[20, 21, 22],
[20, 22, 23]
];
立方体由 12 个三 Angular 形组成。对于纯色面,我们需要 2 个三 Angular 形 4 个唯一的顶点,因此我们需要 24 个不同的顶点定义。
正如gman所说,这是最传统的方式。还有其他方法可以达到相同的效果,但它们的用例很少。
PS:抱歉,我的索引可能不正确
关于javascript - WebGL 纯色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28188019/