Three.js创建以立方体顶点为中心的球体

时间:2014-10-15 11:30:59

标签: javascript three.js html5-canvas

我有一个立方体,我需要为每个立方体顶点创建一个小球体,我该怎么办?我试着写一些东西,但似乎没什么用。下面是我的立方体:

var geometry0 = new THREE.Geometry()
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new     
THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5,   
0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new    
THREE.Vector3(0.5, 0.5, -0.5)]; 
geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6),   
new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1,   
2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new  
THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)]; 

geometry0.computeFaceNormals();
 geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial( { color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0 });
mesh0 = new THREE.Mesh( geometry0, material0);
egh0 = new THREE.EdgesHelper( mesh0, 0x000 );
egh0.material.linewidth = 2;
scene.add( egh0 );

1 个答案:

答案 0 :(得分:0)

我将迭代立方体的顶点,并为每个顶点创建一个以该点为中心的球体。

代码示例如下(绘制半径为0.2的红色球体):

var spheres = [];
for (var i=0 ; i<geometry0.vertices.length ; i++){
  var sphereGeometry = new THREE.SphereGeometry(0.2,10,10);
  var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,opacity:1});
  var spheres[i] = new THREE.Mesh(sphereGeometry,sphereMaterial);
  spheres[i].position.set(geometry0.vertices[i].x,
                      geometry0.vertices[i].y,
                      geometry0.vertices[i].z);
  scene.add(spheres[i]);
}