Google 三维 JavaScript API 发布_JavaScript

O3D 是一个开源的Web API，其可以创建相当牛X的基于浏览器的可交互式的3D应用。这个API在很有可能会形成以后的Web上的3D图形的标准。下面是这个API的主站点： http://code.google.com/apis/o3d/ 。O3D目前支持Windows, Mac和Linux三种平台。

下面是一些简单地使用O3D的API的如何创建一个立方体，更详细的内容请访问O3D的网站。

1）首选我们先创建一个比较原始的立方体。使用createCube()方法。

functioncreateCube(material) {
  varcubeShape = g_pack.createObject('Shape');
  varcubePrimitive = g_pack.createObject('Primitive');
  varstreamBank = g_pack.createObject('StreamBank');
 
  cubePrimitive.material = material;
  cubePrimitive.owner(cubeShape);
  cubePrimitive.streamBank = streamBank;
  .
  .
  .

2）然后，我们需要指定一些顶点信息。
其中，我们利用三角形来构造3D图形。一个立方体有12个三角面，两个构成一个面，然后有8个顶点。

cubePrimitive.primitiveType = g_o3d.Primitive.TRIANGLELIST;
cubePrimitive.numberPrimitives = 12; 
// 12 triangles
cubePrimitive.numberVertices = 8;    
// 8 vertices in total
cubePrimitive.createDrawElement(g_pack, null);   
// Create the draw element for this primitive.

3）指定一下8个顶点的坐标。

varpositionArray = [
    -0.5, -0.5,  0.5,  
// vertex 0
     0.5, -0.5,  0.5,  
// vertex 1
    -0.5,  0.5,  0.5,  
// vertex 2
     0.5,  0.5,  0.5,  
// vertex 3
    -0.5,  0.5, -0.5,  
// vertex 4
     0.5,  0.5, -0.5,  
// vertex 5
    -0.5, -0.5, -0.5,  
// vertex 6
     0.5, -0.5, -0.5   
// vertex 7
  ];

4）把顶点坐标数组加入Buffer中。

// Create buffers containing the vertex data.
varpositionsBuffer = g_pack.createObject('VertexBuffer');
varpositionsField = positionsBuffer.createField('FloatField', 3);
positionsBuffer.set(positionArray);

5）把Buffer放到Stream Bank中。

// Associate the positions Buffer with the StreamBank.
streamBank.setVertexStream(
  g_o3d.Stream.POSITION, 
// semantic: This stream stores vertex positions
  0,                     
// semantic index: First (and only) position stream
  positionsField,        
// field: the field this stream uses.
  0);                    
// start_index: How many elements to skip in the field.

6）连接点成为三角面，并把三角面两两一组组成立方面。

varindicesArray = [
      0, 1, 2,  
// face 1
      2, 1, 3,
      2, 3, 4,  
// face 2
      4, 3, 5,
      4, 5, 6,  
// face 3
      6, 5, 7,
      6, 7, 0,  
// face 4
      0, 7, 1,
      1, 7, 3,  
// face 5
      3, 7, 5,
      6, 0, 4,  
// face 6
      4, 0, 2
  ];

完整的源码请参看这里：（打开网页后查看源码）
http://o3d.googlecode.com/svn/trunk/samples/hellocube.html