wjlgryx
- 浏览: 307035 次
- 性别:
- 来自: 北京
-
最新评论
-
开发小菜：
支持IE9以下的吗？
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使：
开发Html5必须得下载么，我用dw编写，把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼：
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo：
你好，我想问下，导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX：
下载学习，初学者膜拜一下。
html5 实现动画（三）
文章列表
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Shader Test
</title>
<mce:style type="text/css"><!--
html, body {
height: 100%;
margin: 0;
padding: 0;
...
ACA Microsoft的代理使用的角色文档
acf 系统管理配置
acm 音频压缩管理驱动程序,为Windows系统提供各种声音格式的编码和解码功能
aif 声音文件，支持压缩，可以使用Windows Media Player和QuickTime Player播放
AIF 音频文 ...
<html>
<head>
<title>Canvas</title>
<script>
window.onload = function(){
var elem = document.createElement("canvas");
elem.width = 500;
elem.height = 500;
document.body.appendChild( elem );
var context = elem.getContext("2d");
context.fi ...
欢迎来到WebGL教程的第一课！这一课以NeHe OpenGL教程的第二课内容为基础，NeHe OpenGL是一套针对游戏开发人员讲解3D图形技术的流行教程。本课将向你显示如何在一个网页上绘制一个三角形和一个正方形。也许它本身并不令人激动 ...
学习WebGL,在此之前也研究了一下google的O3D,后来发现google已经废止O3D 的开发,转向WebGL的开发。因此转向学习WebGL
WebGL其实是基于HTML5的canvas标签进行画图,顺道学习一下HTML5的一些新特性
<video> 标签定义视频，比如电影片段或其他视频流
<audio> 标签定义声音，比如音乐或其他音频流
<canvas> 标签定义图形，比如图表和其他图像
当然学习WebGL,少不了一些3D图形基础,一些建模工具等。
WebGL有很多封装好的框架，可以参看如下：
...
教程中的效果是让鸭子左右不停的转动，先转向左边，再转回来。
先将教程一的内容拷贝一份为教程二，
然后修改helloword.js文件，先添加一个函数：
var timesincelastchange=0;
var y=-0.001;
function spinduck(time){
timesincelastchange+=time;
if(times ...
C3DL是一个基于HTML5的WEBGL框架,官网地址：http://www.c3dl.org C3DL网站直接提供了JS LIB的下载和API，还有几个简单的教程，先从教程开始一步步学。官网教程1说的是对浏览器的选择,选用chrome10,或火狐4.X版本，这里需要注意使用chrome无法直接读取本地文件,需要使用服务器.后续介绍教程2,运行helloword第一步,先下载JS LIB。http://www.c3dl.org/index.php/download/ ，(截止2010-12-29最新是2.1)点击最新版本的"Non-compressed release"进行下 ...
游戏引擎Name Latest Release License Type NotesThe Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用gTile 0.0.1 Tile based Akihabara 1.3 GPL2/MIT Classic Repro 基于JS+HTML5的街机风格的游戏 3The Javascript 2D Game Engine GPL 注重于重力、物理、碰撞检测方面，使用HTML5 Canvas 和IE的ExplorerCanvas ...
使用轨迹球ARCBALL，你可以使用鼠标拖拉旋转物体！应用简单方便。var g_root=pack.createobject('Transform');//场景的根var g_dragging=false;第一步：创建轨迹球对象，并初始化两个4X4矩阵var g_aball = o3djs.arcball.create(g_client.width, g_client.height);var g_lastRot = g_math.matrix4.identity();var g_thisRot = g_math.matrix4.identity();第二步：注册三个鼠标事件o3djs.event ...
这个Demo还没有添加任何东西，但是却可以让我们了解到基于O3D开发的程序框架。一个O3D程序需要完成的任务如下：1 创建一个O3D object2 给全局变量赋值，并初始化程序库3 创建pack以管理O3D objects4 创建render graph5 建立draw context（远景和视野转换）6 创建一个效果，载入shader information7 创建材质和形状，设置材质绘制列表，并且设置其他材质参数8 将transforms和shapes加入到transform graph9 创建primitives的绘制单元10 设置回调函数，在3D场景每次被渲染时执行特殊的任务下面是HT ...
O3D是一种开源的JavaScript API，可以创造交互式三维图形应用，这些应用能够在浏览器窗口中运行，例如游戏，广告，三维模型浏览，产品演示，虚拟世界等。 O3D扩展了基于Web的客户端软件，通过以下方面： 1、系统：O3D提供了一个浏览器插件，增强标准网页浏览器的图形处理能力，包括Windows ， Macintosh和Linux （TBP？？不晓得什么意思）平台。 2、内容：Web的内容形式无非为HTML格式，图像文件和视频文件。开发人员指南提供了如何为3D内容创建文件转换器和加载器的相关信息。O3D提供了一个实例COLLADA转换器，可用于导入COLLADA格式文 ...
在三维布局中，我们经常需要把一个模型摆放多次，o3d模型加载函数（当然也可以用loader）为
o3djs.scene.loadScene (
clien，
pack，
parent，
url，
void callback)
其中 parent 为一个transform
如果 浏览器启用了cookie，可以在本地加载已下载过的模型（aaa.o3dtgz），但是，如果关闭了cookie，就需要每次都从服务器下载了，将极大地降低加载速度，同时渲染速度也会受到影响（因为没有重用shape）
现在我们来解决transform复制问题
假设 第一个transform 的名称为 tran ...
<html>
<head>
<!--
通过transform 对象 实现 物体的移动、旋转和缩放
主要实现函数为 transform 的 translate方法、rotate方法和scale方法
和例子1的主要区别为 添加了
1. moveto 函数，实现移动
2. rotate 函数，实现旋转
3. scale 函数，实现缩放
edited by fieldyang
-->
<meta http-equiv="content-type" content="text/html; c ...
<html>
<head>
<!--
此例子主要讲解三个部分
1. 贴图文件获取
贴图文件的装载采用 io 库实现，调用方法为 o3djs.io.loadTexture，此方法需要一个回调函数，
贴图（texture）作为回调函数的一个参数返回
2. 生成贴图材质
生成贴图材质有多种方法，本例中我们采用和例1一样的材质生成方法，
调用 o3djs.material.createBasicMaterial()方法来产生材质
3. 动画效果
g_client.setRende ...
调用O3D库可以直接在应用程序上绘制基本形状（如点，线，三角形，三角面，三角柱形（triangle fan？？）） 。如下所示O3D提供的示例显示如何从一个COLLADA文件导入内容，COLLADA转换器从3D内容创建应用程序导入内容，如Autodesk 3ds M ...