我尝试在 Three.js 中做一个 RGB 立方体,但我必须使用顶点,没有纹理。我看了一些教程,但是我的代码不起作用,我可以求教吗?谢谢。
https://jsfiddle.net/yjru14q3/
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.vertexColors = colors;
var colors = [];
colors[0] = new THREE.Color( 0, 0, 0 );
....
var vertices = [];
vertices[0] = new THREE.Vector3( 0, 0, 0 );
....
var material = new THREE.MeshBasicMaterial({
vertexColors: THREE.VertexColors,
side: THREE.DoubleSide, // in case we go inside the cube
});
var cube = new THREE.Mesh(geom, material);
scene.add(cube);
最佳答案
当您为 THREE.Points()
使用几何时,geometry.colors[]
的使用与 vertexColors: THREE.VertexColors
一起使用。
如果要为THREE.Mesh()
的面顶点应用顶点颜色,那么最好遵循this example。 :
var geom = new THREE.BoxGeometry(1, 1, 1);
var faceIndices = ['a', 'b', 'c'];
var vertexIndex, point;
geom.faces.forEach(function(face) { // loop through faces
for (var i = 0; i < 3; i++) {
vertexIndex = face[ faceIndices[ i ] ]; // get the face's vertex's index
point = geom.vertices[vertexIndex]; // knowing the index, find the vertex in array of vertices
color = new THREE.Color( // create a color
point.x + 0.5, //apply xyz as rgb
point.y + 0.5,
point.z + 0.5
);
face.vertexColors[ i ] = color; //store the color in the face's vertexColors array
}
});
var mat = new THREE.MeshBasicMaterial({
vertexColors: THREE.VertexColors
});
var cube = new THREE.Mesh(geom, mat);
scene.add(cube);
jsfiddle例子
关于javascript - Three.js 带顶点的 RGB 立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42843053/