Как по-разному раскрасить сегменты, сделанные на каждой грани куба, выполненного с использованием buffergeomtry с атрибутом position? Хотите что-то вроде изображения
Хотите добиться чего-то похожего на изображении. У меня есть куб, созданный с использованием буферной геометрии. созданные вершины следующие.
bg.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
// front
-1, 1, 1, // 0
-1, -1, 1, // 1
1, 1, 1, // 2
1, -1, 1, // 3
// right
1, 1, 1, // 4
1, -1, 1, // 5
1, 1, -1, // 6
1, -1, -1, // 7
// back
1, 1, -1, // 8
1, -1, -1, // 9
-1, 1, -1, // 10
-1, -1, -1, // 11
// left
-1, 1, -1, // 12
-1, -1, -1, // 13
-1, 1, 1, // 14
-1, -1, 1, // 15
-.3, .2, -1, //16
-1, .2, .3, //17
// top
-1, 1, -1, // 18
-1, 1, 1, // 19
1, 1, -1, // 20
1, 1, 1, // 21
.1, .2, -1, //22
-1, -.3, -.3, // 23
// bottom
-1, -1, 1, // 24
-1, -1, -1, // 25
1, -1, 1, // 26
1, -1, -1 , // 27
.5, -1, .2, //28
-.4, -1, -.5,//29
-.2, .4, 1, // 30
.5, -.3, 1, // 31
1, -.4, .3, //32
1, .4, -.6 //33
]), 3));
bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
// front 0
0, 1, 1,
3, 1, 1,
// right 6
4, 5, 5,
7, 5, 5,
// back 12
8, 9, 9,
11, 9, 9,
// left 18
12, 13, 13,
15, 13, 13,
// top 24
18, 19, 20,
21, 19, 19,
22, 21, 20,
16, 18, 18,
22, 27, 27,
23, 18, 19,
8, 10, 10,
// bottom 30
//20, 21, 22,
//23, 22, 21,
28, 24, 26,
29, 27, 28,
29, 25, 28,
29, 28, 27,
16, 25, 25,
16, 22, 22,
17, 23, 23,
17, 12, 12,
16, 22 ,22,
17, 14, 14,
23, 15, 15,
23, 18, 18,
31, 31, 2,
30, 0, 1,
30, 31, 31,
31, 3, 3,
32, 33, 33,
32, 4, 4,
32, 7, 7,
33, 4, 4,
33, 6, 6
]), 1));
Я хочу, чтобы у куба было несколько случайно выглядящих точек на каждой грани, и чтобы разные цвета были заполнены в разделе, соединенном этими точками. Разделы созданы, единственная проблема, с которой я сталкиваюсь, состоит в том, чтобы придать цвет всем этим разделам по-разному, поскольку не все разделы получают цвета, а только некоторые из них. Кто-то помогает мне в этом, поскольку я пытаюсь добиться этого с прошлой недели.
Вот полная функция, которую я использую для создания куба.
function populateScene() {
var bg = new THREE.BufferGeometry();
bg.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
// front
-1, 1, 1, // 0
-1, -1, 1, // 1
1, 1, 1, // 2
1, -1, 1, // 3
// right
1, 1, 1, // 4
1, -1, 1, // 5
1, 1, -1, // 6
1, -1, -1, // 7
// back
1, 1, -1, // 8
1, -1, -1, // 9
-1, 1, -1, // 10
-1, -1, -1, // 11
// left
-1, 1, -1, // 12
-1, -1, -1, // 13
-1, 1, 1, // 14
-1, -1, 1, // 15
-.3, .2, -1, //16
-1, .2, .3, //17
// top
-1, 1, -1, // 18
-1, 1, 1, // 19
1, 1, -1, // 20
1, 1, 1, // 21
.1, .2, -1, //22
-1, -.3, -.3, // 23
// bottom
-1, -1, 1, // 24
-1, -1, -1, // 25
1, -1, 1, // 26
1, -1, -1 , // 27
.5, -1, .2, //28
-.4, -1, -.5,//29
-.2, .4, 1, // 30
.5, -.3, 1, // 31
1, -.4, .3, //32
1, .4, -.6 //33
]), 3));
bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
// front 0
0, 1, 1,
3, 1, 1,
// right 6
4, 5, 5,
7, 5, 5,
// back 12
8, 9, 9,
11, 9, 9,
// left 18
12, 13, 13,
15, 13, 13,
// top 24
18, 19, 20,
21, 19, 19,
22, 21, 20,
16, 18, 18,
22, 27, 27,
23, 18, 19,
8, 10, 10,
// bottom 30
//20, 21, 22,
//23, 22, 21,
28, 24, 26,
29, 27, 28,
29, 25, 28,
29, 28, 27,
16, 25, 25,
16, 22, 22,
17, 23, 23,
17, 12, 12,
16, 22 ,22,
17, 14, 14,
23, 15, 15,
23, 18, 18,
31, 31, 2,
30, 0, 1,
30, 31, 31,
31, 3, 3,
32, 33, 33,
32, 4, 4,
32, 7, 7,
33, 4, 4,
33, 6, 6
]), 1));
bg.clearGroups();
// start, count, material index
bg.addGroup(0, 6, 0);
bg.addGroup(6, 6, 1);
bg.addGroup(13, 7, 2);
bg.addGroup(20, 8, 3);
bg.addGroup(24, 6, 4);
bg.addGroup(31, 7, 5);
bg.addGroup(45, 74, 6);
var materials = [
new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors,faceColors: THREE.FaceColors, side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ side: THREE.DoubleSide,color:0xefa14a,wireframe:true}),
new THREE.MeshBasicMaterial({ faceColor: THREE.FaceColors, side: THREE.DoubleSide,color:0xefa14a,wireframe:true})
// new THREE.MeshBasicMaterial( {
// faceColor: THREE.FaceColors, color:0xefa14a,
// side: THREE.DoubleSide, vertexColors: THREE.VertexColors, wireframe: true
// } )
];
mesh = new THREE.Mesh(bg, materials);
mesh.scale.set(5, 5, 5);
var numFaces=200
var colors = new Float32Array( numFaces * 3 * 3 );
var displacement = new Float32Array( numFaces * 3 * 3 );
var color = new THREE.Color();
console.log(numFaces)
for ( var f = 0; f < numFaces; f ++ ) {
var index = 9 * f;
var h = 0.2 * Math.random();
var s = 0.5 + 0.5 * Math.random();
var l = 0.5 + 0.5 * Math.random();
color.setHSL( h, s, l );
var d = 10 * ( 0.6 - Math.random() );
for ( var i = 0; i < 4 ; i ++ ) {
colors[ index + ( 1 * i ) ] = color.r;
colors[ index + ( 2 * i ) + 1 ] = color.g;
colors[ index + ( 3 * i ) + 2 ] = color.b;
colors[ index + ( 4 * i ) + 2 ] = color.r;
colors[ index + ( 5 * i ) + 2 ] = color.g;
colors[ index + ( 6 * i ) + 2 ] = color.b;
displacement[ index + ( 3 * i ) ] = d;
displacement[ index + ( 3 * i ) + 1 ] = d;
displacement[ index + ( 3 * i ) + 2 ] = d;
}
}
bg.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
// bg.addAttribute('customColor ', new THREE.BufferAttribute(new Float32Array(colors), 3))
bg.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 3 ) );
bg.faces = new THREE.Color("rgb(255,0,0)");
scene.add(mesh);
uniforms = {
myColor: { type: "c", value: new THREE.Color( 0xffffff ) }
};
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
// uniforms: {
// color: colors
// },
// vertexShader: document.getElementById( 'vertexshader' ).textContent,
// vertexColors: THREE.VertexColors,
// fragmentShader: document.getElementById( 'fragmentshader' ).textContent
});
var loader = new THREE.TextureLoader();
var texture = loader.load( 'img/dot.png' );
var pointsMaterial = new THREE.PointsMaterial( {
map: texture,
size: 10,
alphaTest: 0.5,
sizeAttenuation: false
} );
//console.log(geometry.vertices);
var group = new THREE.Group();
scene.add( group );
mesh = new THREE.Mesh( bg, shaderMaterial );
group.add( mesh );
var points = new THREE.Points( bg, pointsMaterial );
group.add(points);
group.scale.set(5, 5, 5);
}
Вот вершинный и фрагментный шейдеры.
равномерная амплитуда поплавка; атрибут vec3 customColor; атрибут смещения vec3; варьирование vec3 vNormal; варьирующийся vec3 vColor; void main() { vNormal = нормальный; vColor = customColor; vec3 newPosition = позиция + нормальная * амплитуда * смещение; gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0); } <script type="x-shader/x-fragment" id="fragmentshader">
varying vec3 vNormal;
varying vec3 vColor;
void main() {
const float ambient = 1.0;
vec3 light = vec3( 1.0 );
light = normalize( light );
float directional = max( dot( vNormal, light ), 1.0 );
gl_FragColor =vec3(1.0,0.0,1.0);
}
</script>