- 浏览: 297947 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
创建一个O3D对象
设置全局变量初始化通用库
创建一个O3D包管理对象
创建一个渲染图
设置绘图上下文(包括投影矩阵和观察转化矩阵)
创建材质效果对象,加载shader 文件或内容,付给材质效果对象
创建材质对象和形状对象,设置材质 draw list(透明或不透明)设置材质对象其他参数
j加载一个矩阵变换(transforms)和形状对象(shapes)到转换图对象(transform graph).
为图元对象(primitives)创建一个draw elements.
设置渲染回调操作函数, 3D图形每渲染一次都会执行渲染回调函数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Hello Cube: Getting started with O3D
</title>
<!--连接O3D 的js文件-->
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
//加载相关库
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
// javascript事件
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;
// 创建全局变量
var g_o3d;
var g_math;
var g_client;
var g_pack;
var g_clock = 0;
var g_timeMult = 1;
var g_cubeTransform;
var g_finished = false; // for selenium testing
/**
* 渲染回调函数
* 每渲染一次形状的位置就变换一次.
* @param {o3d.RenderEvent} renderEvent The render event object that gives
* us the elapsed time since the last time a frame was rendered.
*/
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime * g_timeMult;
// Rotate the cube around the Y axis.
g_cubeTransform.identity();
g_cubeTransform.rotateY(2.0 * g_clock);
}
/**
* Creates the client area.
*/
function init() {
o3djs.util.makeClients(initStep2);
}
/**
* Initializes O3D, creates the cube and sets up the transform and
* render graphs.
* @param {Array} clientElements Array of o3d object elements.
*/
function initStep2(clientElements) {
// 初始化全局变量和库.
var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
// Initialize O3D sample libraries.
o3djs.base.init(o3dElement);
// 创建包对象,材质、纹理效果等对象都是由包创建、管理和销毁.
g_pack = g_client.createPack();
// 创建渲染图的视图窗口对象.
var viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
// 设置视图窗口的投影矩阵(平行投影-orthographic或透视投影-perspective).
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30 度视野角度.
g_client.width / g_client.height,//比例
1, // z轴近点剪切平面.
5000); // z轴远点剪切平面.
// 设置观察点的位置方向角度
// cube is located.
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
//创建效果对象
var redEffect = g_pack.createObject('Effect');
//加载shader内容
var shaderString = document.getElementById('effect').value;
redEffect.loadFromFXString(shaderString);
// 创建材质对象.
var redMaterial = g_pack.createObject('Material');
// 设置材质对象drawList的方式(透明-zOrderedDrawList或不透明-performanceDrawList).
redMaterial.drawList = viewInfo.performanceDrawList;
// 应用效果给材质对象,效果对象提交shader文件给3D硬件处理
redMaterial.effect = redEffect;
// 创建一个立方体,应用材质效果.
var cubeShape = o3djs.primitives.createCube(g_pack,redMaterial,1);
// 创建转换图节点,把立方体加入到转换节点
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
//将转换节点加入到根节点下
g_cubeTransform.parent = g_client.root;
// 开始对立方体进行渲染
cubeShape.createDrawElements(g_pack, null);
// 执行渲染回调函数
g_client.setRenderCallback(renderCallback);
g_finished = true; // for selenium testing.
}
/**
* 清除所有对象.
*/
function uninit() {
if (g_client) {
g_client.cleanup();
}
}
</script>
</head>
<body>
<h1>Hello Cube</h1>
This example shows how to display a spinning red cube in O3D.
<br/>
<!-- Start of O3D plugin 必须以O3D开头-->
<div id="o3d" style="width: 600px; height: 600px;"></div>
<!-- End of O3D plugin -->
<!-- shader内容,告诉3D硬件,如何渲染的内容-->
<div style="display:none">
<!-- Start of effect -->
<textarea id="effect">
// 世界、视口、投影矩阵 ,这三个矩阵和顶点坐标矩阵计算,得出顶点的屏幕坐标
float4x4 worldViewProjection : WorldViewProjection;
// 顶点数据结构,
struct VertexShaderInput {
float4 position : POSITION;
};
//像素数据结构
struct PixelShaderInput {
float4 position : POSITION;
};
/**
* 此函数输入顶点的相关数据,返回给像素数据结构*/
PixelShaderInput vertexShaderFunction(VertexShaderInput input) {
PixelShaderInput output;
// 计算顶点位置=顶点坐标*世界坐标*视口坐标*投影坐标
output.position = mul(input.position, worldViewProjection);
return output;
}
/**
* 返回像素着色颜色,都是红色。.
*/
float4 pixelShaderFunction(PixelShaderInput input): COLOR {
return float4(1, 0, 0, 1); // Red.
}
//以下三行是必须的留的,不是注释,告诉3D硬件-顶点着色程序的入口点、像素着色程序的入口点
// #o3d VertexShaderEntryPoint vertexShaderFunction
// #o3d PixelShaderEntryPoint pixelShaderFunction
// #o3d MatrixLoadOrder RowMajor
</textarea>
<!-- End of effect -->
</div>
</body>
</html>
发表评论
-
bufferData
2011-07-21 14:30 965/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2406导入对话框选择格式,你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1870本文转自:http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2475面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 5995ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 824var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 10711、基本形状包括: o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1054//定义一个为白色并且是透明材质 var material = ... -
o3D 光照设定材质的光反射系数
2011-03-29 15:19 8651、创建材质 2、设定效果 3、创建光源的位置 4、设置材质环 ... -
Google 三维 JavaScript API
2011-03-28 15:59 847O3D 是一个开源的Web API,其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht(二)
2011-03-28 15:14 1339在上一个课程的基础上 ... -
3D引擎CopperLicht
2011-03-28 15:09 1685WebGL是一种3D绘图标准, ... -
o3d 文档原文
2011-03-18 18:00 819Basic TasksThe basic tasks perf ... -
WebGL的框架
2011-03-18 16:23 3803WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1858教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1493本文笔者翻译,如有错误请留言。 教程#1:Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 2971为广大html5 3d开发的朋友们演示 代码贴图,请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1087c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1580最近研究3d引擎在html5中的效果实现,需求当然是 ... -
o3d API总结
2011-03-17 13:52 848Making an Application with O3D ...
相关推荐
实现O3D的布局,拖动、旋转(FireFox)
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
google开发的web3d编程APT o3d.提供的各种3d效果例子,因文件太大,分三个包传上
3D-o3d.zip,objective-3d视频游戏引擎,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
o3d lib1 graph javascript ajax
关键字文档说明,含中文翻译~ 由于翻译由自己制作,因此可能比较简陋, 但是表明了O3D的整个架构体系,值得一眼~
o3d goolge javascript texture graph
CaO-Al2O3-B2O3-BaO四元系无氟连铸保护渣结构的探究,王志峰,束奇峰,探究了CaO-Al2O3-B2O3-BaO四元系无氟连铸保护渣的结构特征。研究得出了随着BaO含量的增加,渣中平均桥氧数增加,铝酸盐网络结构聚合度升
网状结构Bi2O3光催化剂的合成及其表征,马占营,姚秉华,以Bi(NO3)3•5H2O为原料,以天然棉花为模板结合热处理工艺,成功合成了具有网状结构的三斜晶相Bi2O3光催化材料,利用XRD、SEM、TG-DTA和UV-V
NULL 博文链接:https://xml.iteye.com/blog/531459
O3D 实例 这是我自己的实例,嘿嘿,好像研究的还可以
多孔花状Fe3O4@Bi2O3结构的制备及其在可见光下的光催化性能,汪洋,李士阔,本文通过一个简单的、直接的溶剂热的方法制备出了三维花状的Fe3O4@Bi2O3核壳结构。测试结果表明这些三维花状的微米球大约为420nm,壳�
网页 3D技术,谷歌O3D只适用于,chrome跟IE8
海胆状ZnO/In2O3纳米复合结构制备及光学性质研究,吕珊珊,方芳,利用操作简单的电化学沉积法制备海胆状ZnO/In2O3纳米复合结构。通过扫描电子显微镜(SEM)观察了复合结构的形貌;X射线衍射(XRD)研�
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...
基于机械剥离Ga2O3/SiO2/Si结构的场效应晶体管的电学特性研究,王赫,梁红伟,通过机械剥离的方法,从氧化镓单晶衬底上获得氧化镓薄片并转移至二氧化硅/硅衬底上,制成了氧化镓背栅场效应晶体管。在器件的转��
Ca(Mg1/3Ta2/3)O3薄膜的结构与介电性能,曹越,沈杰,用Pechini法通过不同次数涂覆成功制备了不同厚度的Ca(Mg1/3Ta2/3)O3均质薄膜,并用平行板电容器法测量了Ca(Mg1/3Ta2/3)O3薄膜介电性能。薄膜厚
Pt与Fe的加入对NSR催化剂Ba/Al2O3结构和性能的影响,罗金勇,孟明,通过制备了一系列Ba/Al2O3催化剂,本文探讨了进一步加入Pt、Fe对催化剂结构、NOx储存能力及耐硫中毒能力的影响。结果表明:Ba/Al2O3催化�
CaO-Al2O3-B2O3-5%SiO2四元相图研究,刘辰生,束奇峰,B2O3对降低保护渣熔点具有显著的作用,四元基础渣系CaO-Al2O3-B2O3-SiO2的研究对新型高铝钢保护渣和无氟保护渣具有重意义。本文结合Factsag