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

【问题标题】：Three.js create sphere centered on a cube verticesThree.js 创建以立方体顶点为中心的球体
【发布时间】：2014-12-10 11:10:59
【问题描述】：

我有一个立方体，我需要为每个立方体顶点创建一个小球体，我该怎么做？我试图写一些东西，但似乎没有任何效果。下面是我的立方体：

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 );

【问题讨论】：

标签： javascript three.js html5-canvas

【解决方案1】：

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

代码示例如下（绘制半径为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]);
}

【讨论】：