Google 三維 JavaScript API 發布

O3D 是一個開源的Web API，其可以創建相當牛X的基于瀏覽器的可交互式的3D應用。這個API在很有可能會形成以后的Web上的3D圖形的標準。下面是這個API的主站點： http://code.google.com/apis/o3d/ 。O3D目前支持Windows, Mac和Linux三種平臺。

下面是一些簡單地使用O3D的API的如何創建一個立方體，更詳細的內容請訪問O3D的網站。

1）首選我們先創建一個比較原始的立方體。使用createCube()方法。

function createCube(material) {
  var cubeShape = g_pack.createObject('Shape');
  var cubePrimitive = g_pack.createObject('Primitive');
  var streamBank = 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個頂點的坐標。

var positionArray = [
    -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.
var positionsBuffer = g_pack.createObject('VertexBuffer');
var positionsField = 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）連接點成為三角面，并把三角面兩兩一組組成立方面。

var indicesArray = [
      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

最后，讓我們看一看下面油Tube上的視頻，你就知道這個東西有多強了。油Tube鏈接。

---

挺好的網站:http://coolshell.cn/articles/599.html