`
wjlgryx
  • 浏览: 308581 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

o3d API总结

velocityUPGoogleHTML 
阅读更多
Making an Application with O3D

Make the HTML for the webpage.
Step 1: Setup
...
<script type="text/javascript" src="../o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
...
<body onload="init();">
<div id="o3d" style="width: 800px; height: 600px;"></div>

Step 1: Setup cont. Initialize O3D
//Creates the client area.
function init() {
o3djs.util.makeClients(initStep2);
}
function initStep2(clientElements) {
g_o3dElement = clientElements[0];
g_math = o3djs.math;
g_client = g_o3dElement.client;
g_pack = g_client.createPack();
g_root = g_pack.createObject('Transform');
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_root,
g_client.renderGraphRoot);

Set the view and projection matrices
Step 1: Setup Cont. Make a Camera
var g_eye = [15, 25, 50];
var g_target = [0, 10, 0];
var g_up = [0, 1, 0];
function updateProjection() {
g_viewInfo.drawContext.projection =
g_math.matrix4.perspective(
g_math.degToRad(45), // field of view.
g_o3dWidth / g_o3dHeight, // aspect ratio
0.1, // Near plane.
5000); // Far plane.
}
function updateCamera() {
g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up);
g_viewInfo.drawContext.view = g_viewMatrix;
}

Make some materials.
Step 2: Put something on the screen.
var redMaterial = o3djs.material.createBasicMaterial(
g_pack,
g_viewInfo,
[0.2, 1, 0.2, 1]); // green
var checkerMaterial = o3djs.material.createMaterialFromFile(
g_pack,
'shaders/checker.shader',
g_viewInfo.performanceDrawList);
g_globalParams =
o3djs.material.createAndBindStandardParams(g_pack);
g_globalParams.lightWorldPos.value = [30, 60, 40];
g_globalParams.lightColor.value = [1, 1, 1, 1];

// Create a ground plane.
var shape = o3djs.primitives.createPlane(
g_pack, checkerMaterial, 100, 100, 10, 10);
var transform = g_pack.createObject('Transform');
transform.parent = g_root;
transform.addShape(shape);
// Create a cylinder.
var shape = o3djs.primitives.createCylinder(
g_pack, redMaterial, 2.5, 5, 20, 1,
g_math.matrix4.translation([0, 2.5, 0]));
g_playerTransform = g_pack.createObject('Transform');
g_playerTransform.parent = g_root;
g_playerTransform.addShape(shape);

Step 3: Let the user move something.
var g_keyDown = []; // which keys are down by key code.
function initStep2(...) {
...
o3djs.event.addEventListener(o3dElement, 'keydown', onKeyDown);
o3djs.event.addEventListener(o3dElement, 'keyup', onKeyUp);
}
function onKeyDown(e) {
g_keyDown[e.keyCode] = true;
}
function onKeyUp(e) {
g_keyDown[e.keyCode] = false;
}

Step 3: Per frame processing.
initStep2(...) {
...
g_client.setRenderCallback(onRender);
}
function onRender(renderEvent) {
var elapsedTime = renderEvent.elapsedTime;
handleMoveKeys(elapsedTime);
};


Step 3: Move something.
function handleMoveKeys(elapsedTime) {
var directionX = 0;
var directionZ = 0;
if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; }
if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; }
if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; }
if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; }
g_playerXPosition += directionX;
g_playerZPosition += directionZ;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}

Step 4: Make it frame rate independent
var MOVE_VELOCITY = 25; // in units per second.
function handleMoveKeys(elapsedTime) {
...
g_playerXPosition += MOVE_VELOCITY * directionX *
elapsedTime;
g_playerZPosition += MOVE_VELOCITY * directionZ *
elapsedTime;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}

Step 5: Make it move relative to the camera.
function computeMoveMatrixFromViewMatrix(viewMatrix) {
var cameraMatrix = g_math.matrix4.inverse(viewMatrix);
var xAxis = g_math.cross([0, 1, 0],
cameraMatrix[2].slice(0, 3));
var zAxis = g_math.cross(xAxis, [0, 1, 0]);
return [
xAxis.concat(0),
[0, 1, 0, 0],
zAxis.concat(0),
[0, 0, 0, 1]];
}
function updateCamera() {
...
g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix);
};

Step 5: Make it move relative to the camera.
function handleMoveKeys(elapsedTime) {
...
var moveTranslation = g_math.matrix4.transformPoint(
g_moveMatrix,
[MOVE_VELOCITY * directionX * elapsedTime,
0,
MOVE_VELOCITY * directionZ * elapsedTime]);
g_playerXPosition += moveTranslation[0];
g_playerZPosition += moveTranslation[2];
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 6: Make the camera follow the player.
function moveCamera() {
g_target = [g_playerXPosition, 10, g_playerZPosition];
updateCamera();
}
function onRender(renderEvent) {
moveCamera();
};

Step 7: Smooth the camera movement.
function moveCamera() {
var newTarget = [g_playerXPosition, 10, g_playerZPosition];
g_target = g_math.lerpVector(g_target, newTarget, 0.03);
updateCamera();
}

Step 8: Add some action.
function handleMoveKeys(elapsedTime) {
...
if (g_canJump) {
if (g_keyDown[32]) {
g_jumping = true;
g_canJump = false;
g_playerYVelocity = JUMP_VELOCITY;
}
} else {
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_jumping = false;
}
} else {
if (!g_keyDown[32]) {
g_canJump = true;
}
}
}
...
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
}

Step 9: Add effects.
function initStep2(clientElements) {
...
g_particleSystem = o3djs.particles.createParticleSystem(g_pack, g_viewInfo);
g_poofEmitter = g_particleSystem.createParticleEmitter();
g_poofEmitter.setState(o3djs.particles.ParticleStateIds.ADD);
g_poofEmitter.setColorRamp(
[1, 1, 1, 0.3,
1, 1, 1, 0]);
g_poofEmitter.setParameters({
numParticles: 30,
lifeTime: 0.5,
startTime: 0,
startSize: 5,
endSize: 10,
spinSpeedRange: 10},
function(index, parameters) {
var angle = Math.random() * 2 * Math.PI;
parameters.velocity = g_math.matrix4.transformPoint(
g_math.matrix4.rotationY(angle), [25, 2.5, 0]);
parameters.acceleration = g_math.mulVectorVector(
parameters.velocity, [-1.5, 1, -1.5]);
});
g_poof = g_poofEmitter.createOneShot(g_root);


Step 9: Add Effects
function handleMoveKeys(elapsedTime) {
...
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_poof.trigger(
[g_playerXPosition,
g_playerYPosition,
g_playerZPosition]);
g_jumping = false;
}

Step 10: Load a character.
function initStep2(...) {
...
var transform = g_pack.createObject('Transform');
g_playerTransform = transform;
var playerPack = g_client.createPack();
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3);
}
function initStep3(playerPack, playerParent, exception) {
o3djs.pack.preparePack(playerPack, g_viewInfo);
o3djs.material.bindParams(playerPack, g_globalParams);
g_playerTransform.parent = g_root;
...
}

Step 11: Orient the character.
var g_playerDirection = 0;
...
function handleMoveKeys(elapsedTime) {
...
if (directionX != 0 || directionZ != 0) {
var moveTranslation = ...
var targetDirection = Math.atan2(moveTranslation[0],
moveTranslation[2]);
g_playerDirection = g_math.lerpRadian(
g_playerDirection, targetDirection, 0.2);
...
}
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
g_playerTransform.rotateY(g_playerDirection);
}

Step 12: Animate the character.
var IDLE_START_TIME = 247 / 30;
var IDLE_END_TIME = 573 / 30;
var IDLE_TIME_RANGE = IDLE_END_TIME - IDLE_START_TIME;
var g_animTimer = IDLE_START_TIME;
function initStep2(...) {
...
var paramObject = playerPack.createObject('ParamObject');
g_animParam = paramObject.createParam('animTime',
'ParamFloat');
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3,
{opt_animSource: g_animParam});
...

Step 12: Animate the character.
function onRender(renderEvent) {
...
handleAnimation(elapsedTime);
};
function handleAnimation(elapsedTime) {
g_animTimer += elapsedTime;
if (g_animTimer >= IDLE_END_TIME) {
g_animTimer = g_math.modClamp(g_animTimer,
IDLE_TIME_RANGE,
IDLE_START_TIME);
}
g_animParam.value = g_animTimer;
}
Step 13: Add more animation.
Repeat step 12 for various actions.
See step13.html
diff step12.html and step13.html to see what changed.

Step 14: Load a background.
function initStep2(...) {
...
var loader = o3djs.loader.createLoader(initStep3);
loader.loadScene(g_client, playerPack, g_playerTransform,
'assets/character.o3dtgz', prepareScene,
{opt_animSource: g_animParam});
var worldPack = g_client.createPack();
g_worldTransform = worldPack.createObject('Transform');
loader.loadScene(g_client, worldPack, g_worldTransform,
'assets/background.o3dtgz', prepareScene)
loader.finish();
}
function prepareScene(pack, sceneRoot, exception) {
o3djs.pack.preparePack(pack, g_viewInfo);
o3djs.material.bindParams(pack, g_globalParams);
sceneRoot.parent = g_root;
}
function initStep3(...) {


http://code.google.com/apis/o3d





分享到：
| o3d API （一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    O3D 物体 编辑器

    1. **O3D库**：O3D是由Google开发的JavaScript API，旨在提供高性能的3D图形渲染能力，直接在浏览器中运行，无需任何插件。它利用WebGL技术，使开发者能够利用硬件加速来处理复杂的3D模型和场景。O3D库包含了一系列...

    O3D学习笔记[一]素材准备*.3ds转成*.o3dtgz

    总结来说，O3D学习笔记第一部分主要涉及了3DS模型的转换，这是3D开发中常见的需求，因为不同的软件和引擎通常使用不同的文件格式。通过了解3DS格式和O3DTGZ的特性，以及使用适当的工具和库，开发者可以有效地在O3D...

    google o3d例子3

    o3d是Google开发的基于web的3d编程API，因文件太大分三次上传

    谷歌O3D的javascript源码

    在"o3djs"这个压缩包文件中，我们可以找到O3D库的源代码，通过对源码的阅读和分析，可以更深入地理解O3D的工作机制，学习到如何使用这些API来构建自己的3D应用。同时，这也有助于提升JavaScript编程技巧和3D图形编程...

    O3D 实例 研究中

    1. **创建 O3D 对象**：通过 O3D JavaScript API 创建 O3D 上下文，连接到渲染表面。 2. **加载模型和资源**：使用 `o3djs.asset` 相关的函数加载 3D 模型、纹理和其他资源。 3. **设置视图**：定义相机的位置、视角...

    google o3d 编程例子1

    google开发的web3d编程APT o3d.提供的各种3d效果例子，因文件太大，分三个包传上

    O3D文档说明（主要关键字的说明及翻译）

    在O3D文档中，我们关注的是3D图形渲染的关键概念和术语，这些内容对于理解O3D框架的架构和工作原理至关重要。以下是对这些关键术语的详细解释： 1. **Draw Context 绘制上下文**：绘制上下文是3D渲染的核心组件，它...

    o3d lib1 graph javascript ajax

    o3d lib1 graph javascript ajax

    3D-o3d.zip

    在3D-o3d.zip这个压缩包中，我们看到的是Objective-3D视频游戏引擎的相关资料，这是一个专门用于3D游戏开发的工具。 Objective-3D游戏引擎，以其强大的功能和灵活性，为开发者提供了构建逼真3D游戏环境的可能性。它...

    o3d goolge javascript

    o3d goolge javascript texture graph

    google o3d 编程例子2

    o3d是Google开发的基于web的3d编程API，因文件太大分三次上传

    o3dv_0.8.3.zip

    "o3dv_0.8.3.zip" 是一个压缩包文件，包含了 Online3DViewer 的 0.8.3 版本。Online3DViewer 是一个基于 Web 的三维模型查看器，它允许用户在浏览器中查看和交互三维模型，无需安装任何额外的软件。这个工具主要利用...

    野村综研O3W架构资料（内部）

    #### 四、总结 随着信息技术的不断发展，企业面临的新挑战要求更为高效、安全的解决方案。野村综研推出的Infoworks和O3W中间件不仅解决了当前问题，还为企业向未来技术演进奠定了基础。通过这些创新的技术手段，...

    up_1020948_google-api-php-client_3o3hp.rar

    【标题】"up_1020948_google-api-php-client_3o3hp.rar" 是一个关于Google API PHP客户端的源码压缩包，它包含了一系列用于与Google API交互的PHP示例代码。这个客户端库是开发人员在PHP环境中访问Google服务的重要...

    CaO-Al2O3和CaO-SiO2-Al2O3渣系中组元活度的计算 (2013年)

    根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...

    o3d:从 code.google.compo3d 导入

    2. **易用性**：O3D通过封装WebGL的底层API，提供了一套高级接口，简化了3D编程的复杂性，使得开发者可以更快地学习和上手。 3. **丰富的功能集**：O3D包含了一系列实用工具和功能，如材质系统、动画系统、碰撞检测...

    淘宝Top api

    "淘宝Top API"是淘宝开放平台提供的一套接口服务，允许开发者通过编程方式与淘宝进行数据交互，实现个性化应用或电商服务。这个标题暗示我们将探讨的是如何利用这些API来访问和操作淘宝的数据。 首先，"sessionkey...

Magicbox
Global site tag (gtag.js) - Google Analytics