使用O3D javascript API构建一个O3D应用

董凡

2023-12-01

在HTML中导入所需要的js包。

一个复杂的3D应用包含场景、摄像机、3D几何体、灯管和材质等。

o3djs.require('o3djs.util');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.camera');
o3djs.require('o3djs.material');
 
//O3D程序的入口点
var g_client;
//3D视窗
var g_viewInfo;
//旋转角度
var g_animate_angle=0;
 
window.onload = function(){
    o3djs.util.makeClients(initialize);
}
 
function initialize(clientElements) {
  var o3d = clientElements[0];
 
  //初始化程序入口client
  g_client = o3d.client;
 
  // 创建场景容器
  var pack = g_client.createPack();
 
  // 创建视窗
  g_viewInfo = o3djs.rendergraph.createBasicView(
      pack,g_client.root,g_client.renderGraphRoot);
 
  // 创建材质
  var material = o3djs.material.createBasicMaterial(
      pack,g_viewInfo, [1, 0, 0, 1]);  
 
  // 创建一个正方体
  var cube = o3djs.primitives.createCube(pack, material, 0.5);
 
  // 创建3D物体的容器
  var transform = pack.createObject('Transform');
  transform.parent = g_client.root;
  transform.addShape(cube);
 
  // 初始化Camera
  o3djs.camera.fitContextToScene(g_client.root,
                                 g_client.width,
                                 g_client.height,
                                 g_viewInfo.drawContext);
 //添加帧循环回调函数
  g_client.setRenderCallback(onRender);
}
 
/**
 * 帧循环回调函数
 */
function onRender(event){
    //取得帧间隔时间
    var elapsedTime = event.elapsedTime;
    g_animate_angle += 0.1 * elapsedTime;
 
    // camera的位置
    var eye = [ Math.sin(g_animate_angle) * 1.0, 
                   1.0, 
                   Math.cos(g_animate_angle) * 1.0];
 
    // camera的指向
    var target = [0, 0, 0];
 
    //告诉camera哪个方向是向上，本例中是y轴指向。
    var up = [0, 1, 0];
 
    //更新camera的位置
    g_viewInfo.drawContext.view = o3djs.math.matrix4.lookAt(eye, target, up);
}

使用O3D javascript API构建一个O3D应用

相关阅读

相关文章

相关问答

相关文档