3D 文章
文章平均质量分 63
佐笾已逝
wufenglong
展开
-
ShowWebGL 强大的3D模型查看器
ShowWebGL[url]http://showwebgl.com[/url]这是一个可以显示3D模型的网站,支持的模型格式简直让人无法想想:obj, ive, 3ds, dae, ply, osg2, osgb, osgt, osgx, osgs, gem, geo, mdl, rgb, lws, dxf, tgz, osgterrain, shp, zae, stl,...原创 2011-04-12 14:01:50 · 1287 阅读 · 0 评论 -
C3DL 官方教程(一)
本文笔者翻译,如有错误请留言。 教程#1:WebGL的浏览器本章主要讲解C3DL的浏览器支持和测试。Firefox浏览器最简单的方式安装一个Firefox浏览器支持WebGL。 一旦你的浏览器安装,您将需要设置能够启动WebGL的。 这可以通过以下方式:在地址栏中输入: 关于:配置 。 这会给你一个警告页面,按钮和一个。 点击“我会注意,我同意!”按钮。在过滤器栏中键入的WebGL为...原创 2011-03-18 15:57:23 · 190 阅读 · 0 评论 -
3D模型导入 CanvasMatrix.js引擎 demo(一)
:shock: 为广大html5 3d开发的朋友们演示 代码贴图,请下载附件demo :twisted: 3DS model attribute vec3 aPos; attribute vec3 aNorm; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec3 col; ...2011-03-17 17:51:35 · 300 阅读 · 0 评论 -
c3dl 可以直接导入3dmax文件的3D引擎
c3dl可以直接在网页代码中使用.dae格式的3dmax模型,具体导入请参阅官方网站 http://www.c3dl.org/ 参考c3dl相关demos http://www.c3dl.org/index.php/webgl-demos/ 在这里笔者只是给朋友们做个引导作用,详细操作参阅官方网站。...原创 2011-03-17 17:41:22 · 209 阅读 · 0 评论 -
o3d 模型导入引擎CanvasMatrix.js
最近研究3d引擎在html5中的效果实现,需求当然是将美工做好的3D模型导入到程序中,并且实现动画效果,朋友介绍了一个可以导入模型的3D引擎,CanvasMatrix.js,然后进行了研究研究,发现这个引擎需要将将maya或者3dmax的模型导出obj格式的文件,并且通过COLLDAD把obj文件转换成类似json数据格式的参数,导入网页中才可以导出模型,经过一番研究终于可以将模型导入到...2011-03-17 16:09:19 · 223 阅读 · 0 评论 -
o3d API总结
Making an Application with O3DMake the HTML for the webpage.Step 1: Setup...o3djs.require('o3djs.util');o3djs.require('o3djs.math');...Step 1: Setup cont. Initialize O3D//C...原创 2011-03-17 13:52:30 · 115 阅读 · 0 评论 -
o3d API (一)
1、o3djs.rendergraph.createBasicView( !o3d.Packpack !o3d.TransformtreeRoot !o3d.RenderNodeopt_parent !o3djs.math.Vector4opt_clearColor number opt_priori...原创 2011-03-17 12:10:12 · 67 阅读 · 0 评论 -
o3d 形状和模型
3D几何学中用顶点组成复杂的模型,o3d也不例外。本章介绍怎样定义几何图形的arrays(数组), buffers(缓冲), fields(域)及 streams(流)。________________________________________1、图形和基元(点、线、面) 三维图形是许多基元的集合,基元包含了组成图形的集合元素及其它的定点数据等信息。顶点数据保...原创 2011-03-17 12:07:17 · 122 阅读 · 0 评论 -
O3D 程序框架
一、要创建一个o3d项目需要做的基本工作 1、生成o3d对象 2、给全局变量赋值并且初始化API库 3、生成pack包,用于管理所有产生的o3d对象 4、生成渲染图形 5、建立上绘图环境(透视网格和视图转换) 6、生成效果,并加载渲染信息 7、生成素材和形状,设置素材列表及其他素材参数 ...原创 2011-03-17 12:05:58 · 74 阅读 · 0 评论 -
o3d 纹理映射
这一章讲纹理,纹理,不能顾名思义了,其实就是一张图片,我们要做的就是把这张图片贴到模型上面, 从而让模型一下子生动起来,说得有文采点就是栩栩如生,这个过程就叫纹理映射(也可以叫贴图)。纹理映射有时候能产生非常神奇的效果,比如说凹凸贴图,和 凹凸贴图衍生出来的法线贴图,能够让只有几百个几千个多边形的模型产生几万个,几十万个多边形的模型的效果。 接下来就要介绍怎么创建一个...原创 2011-03-17 12:03:42 · 109 阅读 · 0 评论 -
c3dl 官方教程(二)
教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三维库,在开始本教程之前,请确保你有一个浏览器是支持WebGL的启用。 教程#1 介绍了如何做到这一点。 下载 http://www.c3dl.org/index.php/download/的API的三维画布 。 确保你下载的版本是2.1或更高。 WebGL的早期版本的C3DL使用画布是三维的。 本教程是写给释放C3DL的2.0。 您还需...原创 2011-03-18 16:13:52 · 144 阅读 · 0 评论 -
WebGL的框架
WebGL的框架WebGLhttp://www.khronos.org/webgl/wiki/Main_Pagehttp://www.khronos.orgC3DL ,一个JavaScript库,将使它更容易编写应用程序使用Canvas的三维立体(现在的WebGL)http://www.c3dl.org/Copperlichthttp://www.ambie...原创 2011-03-18 16:23:04 · 239 阅读 · 0 评论 -
o3d 创建一个平面
var vertexInfo = o3djs.primitives.createVertexInfo(); //创建顶点对象//设置面的宽和Z轴深度,此平面垂直Y轴平行XOZ坐标var width;var depth;//创建面分成subdivisionsDepth*subdivisionsWidth个正方形var subdivisionsDepth;var sub...原创 2011-03-29 15:27:42 · 146 阅读 · 0 评论 -
o3d 常见几何图形创建
1、基本形状包括:o3djs.primitives.createCylinder(pack, material, 1, 2, 30, 30) //半径为1高度为2的圆柱体o3djs.primitives.createCube(pack,material,1); // 一个单位的正六面体o3djs.primitives.createSphere(pack, m...原创 2011-03-29 15:25:04 · 159 阅读 · 0 评论 -
o3D 材质-定义透明材质
//定义一个为白色并且是透明材质var material = o3djs.material.createBasicMaterial( g_pack, g_viewInfo, [1, 1, 1, 1],true);//使用这个材质创建一个半径为30的小球var shape = o3djs.primitives.createSphere(g_pack, material,...原创 2011-03-29 15:20:22 · 111 阅读 · 0 评论 -
o3D 光照设定材质的光反射系数
1、创建材质2、设定效果3、创建光源的位置4、设置材质环境光反射系数5、设定材质光线漫反射系数6、设置材质光线反射系数7、设定材质光洁度/*加载效果文件,创建材质*/var effect = g_pack.createObject('Effect');effect.loadFromFXString(document.getElementById('shade...原创 2011-03-29 15:19:05 · 309 阅读 · 0 评论 -
O3D程序基本结构
创建一个O3D对象设置全局变量初始化通用库创建一个O3D包管理对象创建一个渲染图设置绘图上下文(包括投影矩阵和观察转化矩阵)创建材质效果对象,加载shader 文件或内容,付给材质效果对象创建材质对象和形状对象,设置材质 draw list(透明或不透明)设置材质对象其他参数j加载一个矩阵变换(transforms)和形状对象(shapes)到转换图对象(tra...原创 2011-03-29 15:13:38 · 141 阅读 · 0 评论 -
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的网站。...原创 2011-03-28 15:59:27 · 151 阅读 · 0 评论 -
3D引擎CopperLicht(二)
在上一个课程的基础上,我们掌握了在CopperCube里,如何建立基本的场景和物体。 在CopperCube中,建立一个平面、箱体、球体,保证箱体名为'cubeMesh1',球体名为'sphereMesh1',建立好的场景如下:编写CopperLicht代码 像上一节教材那样,输出一个.ccbjs文件到CopperLicht,保存Coppercube文件,发布场景为WebGL:Tools ->...原创 2011-03-28 15:14:58 · 169 阅读 · 0 评论 -
3D引擎CopperLicht
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件...原创 2011-03-28 15:09:19 · 111 阅读 · 0 评论 -
o3d 文档原文
Basic TasksThe basic tasks performed in an O3D program are the following:1:Create the O3D object.2:Assign values to global variables and initialize utility libraries.3:Create the pack to manage O3D ob...原创 2011-03-18 18:00:45 · 126 阅读 · 0 评论 -
o3d 如何移动和旋转3D 空间中的物体
这一章比较简单,主要讲如何移动和旋转3D 空间中的物体,主要用到transform 对象其中的一些函数,在介绍这些函数之前,先介绍世界坐标系和局部坐标系。世界坐标系顾名思义就是以整个世界为坐标系,而局部坐标系则是以要变换的物体为中心的坐标系,其中物体绘制时各个顶点的坐标都是以这个局部坐标系为参照的,而进行移动变换时,则是以世界坐标系为参照,然后移动这个局部坐标系。进行旋转时也是绕着局部坐标系转...原创 2011-03-17 11:59:15 · 250 阅读 · 0 评论 -
o3d 怎么用顶点数组创建一个3D 模型
这一章介绍怎么用顶点数组创建一个3D 模型,如何创建一个shape 对象,缓冲(buffers) ,域(fields) 等等。 由于要定义这个3D 模型的每个顶点,然后存入顶点数组,所以这章不会画出一个比较复杂的3D 模型,我们只是画一个立方体来说明如何创建一个3D 模型,如果对于一个复杂的3D 模型还是一个个顶点画的话,只能说太牛逼了,那时候就要用到3dmax ,maya 等软...原创 2011-03-17 11:57:49 · 363 阅读 · 0 评论 -
o3d 基本教程框架和初步demos
O3d 是一套开源的javascript API, 用来制作在浏览器中运行的3D 游戏,当然也可以用来展示商家的产品,做一些3D 模型。这系列教程会用一个个例子来展示如何写一个o3d 程序,展示o3d 所能够做的应用。 巧妇难为无米之炊,首先当然需要一些基本的东西,像o3d 插件,这个可以在google code 中获取,给个链接http://code.google.com/in...原创 2011-03-17 11:55:26 · 169 阅读 · 0 评论 -
o3d demos 立方体的移动和缩放
第二个例子-立方体的移动、缩放和旋转o3djs.require('o3djs.util');o3djs.require('o3djs.math');o3djs.require('o3djs.rendergraph');o3djs.require('o3djs.material');o3djs.require('o3djs.primitives');...原创 2011-03-16 18:05:42 · 126 阅读 · 0 评论 -
o3d 简单介绍
调用O3D库可以直接在应用程序上绘制基本形状(如点,线,三角形,三角面,三角柱形(triangle fan??)) 。如下所示O3D提供的示例显示如何从一个COLLADA文件导入内容,COLLADA转换器从3D内容创建应用程序导入内容,如Autodesk 3ds Max, Maya和Google SketchUp。 如上图所示, 最初的从3ds Max,Maya和SketchUp导入的COLLA...原创 2011-03-16 18:02:04 · 291 阅读 · 0 评论 -
o3d 初级demos
view plaincopy to clipboardprint? O3D Example O3D Example 一个复杂的3D应用包含场景、摄像机、3D几何体、灯管和材质等。o3djs.require('o3djs.util'); o3djs.requ...原创 2011-03-16 17:57:23 · 245 阅读 · 0 评论 -
O3D的优点和基本概念
O3d 使用一个程序可控的图形管道模型而不是一个固定功能的管道。这个程序可控的管道使用shader语言,依据hlsl和Cg,使你可以通过vertex shaders和pixel shaders来直接对cpu编程。在程序可控CPUs出现以前,图形程序员被限制在固定功能的图形处理流水线中。计算transformations,lighting,texture coordinates和其他环境效果的算法是...原创 2011-03-16 17:56:02 · 203 阅读 · 0 评论 -
o3d API (一)
1、o3djs.rendergraph.createBasicView( !o3d.Pack pack !o3d.Transform treeRoot !o3d.RenderNode opt_parent !o3djs.math.Vector4 opt_clearColor number opt_priority ...原创 2011-03-16 17:51:41 · 97 阅读 · 0 评论 -
o3D引擎--怎样将3dmax模型转换为*.o3dtgz
要用o3d API在场景中导入3dmax建的模型,需要将模型转换为*.o3dtgz文件。转化之后的文件才可以被o3d读取,否则不能加载到场景中。转换之后,利用javascript场景加载函数o3djs.scene.loadScene()加载转换之后的.o3dtgz文件,就可将模型加载到场景中。下面我们就说一下怎样利用3dmax2008导出 COLLADA 文件,即*.dae文件,并将.dae...原创 2011-03-16 17:49:54 · 388 阅读 · 0 评论 -
bufferData
/*void*/bufferData//缓冲区数据 bufferData(GLenum 目标 ,//指定目标缓冲区对象。 符号常量必须 //GL_ARRAY_BUFFER 或 GL_ELEMENT_ARRAY_BUFFER 。 GLsizeiptr 大小 ,//在指定的缓冲区对象的新的数据存储的字节大小。 常量GLvoid * 数...原创 2011-07-21 14:30:53 · 803 阅读 · 0 评论 -
导入支持的格式(Import)
导入对话框选择格式,你会看到众多导入的格式。3ds max支持众多的文件格式导入方法。导入支持的格式有:Autodesk (FBX) :(常用)FBX 是 Autodesk MotionBuilder 固有的文件格式,该系统用于创建、编辑和混合运动捕捉和关键帧动画。它也是用于与 Autodesk Revit Architecture 共享数据的文件格式。您可以使用 3ds Max 导入...原创 2011-05-31 16:54:04 · 798 阅读 · 0 评论 -
法线贴图
本文转自:http://yumi08.jimdo.com/my-word/maya/%E6%B3%95%E7%BA%BF%E8%B4%B4%E5%9B%BE/ (法线贴图是一种显示三维模型更多细节的重要方法,它解算了模型表面因为灯光而产生的细节。这是一种2维的效果,所以它不会改变模型的形状,但是它计算了轮廓线以内的极大的额外细节。在处理能力受限的情况下,这对实时游戏引擎是非常有用的...原创 2011-05-13 11:48:11 · 179 阅读 · 0 评论 -
o3d 复制一个Transform的模型
在三维布局中,我们经常需要把一个模型摆放多次,o3d模型加载函数(当然也可以用loader)为o3djs.scene.loadScene (clien,pack,parent,url,void callback)其中 parent 为一个transform如果 浏览器启用了cookie,可以在本地加载已下载过的模型(aaa.o3dtg...原创 2011-03-16 18:06:53 · 128 阅读 · 0 评论 -
o3d 简介
O3D是一种开源的JavaScript API,可以创造交互式三维图形应用,这些应用能够在浏览器窗口中运行,例如游戏,广告,三维模型浏览,产品演示,虚拟世界等。 O3D扩展了基于Web的客户端软件,通过以下方面: 1、系统:O3D提供了一个浏览器插件,增强标准网页浏览器的图形处理能力,包括Windows , Macintosh和Linux (TBP??不晓得什么意思)平台。 2...原创 2011-03-17 09:10:06 · 400 阅读 · 0 评论 -
o3d 基本的矩阵操作
里记录一下矩阵的基本操作和矩阵乘法的顺序问题。 1: while( msg.message!=WM_QUIT ) 2: { 3: // check for messages 4: if( PeekMessage( &msg, NULL, 0U, 0U, PM_REMOVE ) ) 5: { 6: Trans...原创 2011-03-17 11:51:15 · 130 阅读 · 0 评论 -
3D绘图过程及原理简介
3D绘图过程及原理简介 收藏Standard Primitives(标准几何体) 在创建命令面板的Geometry(几何体)对象类型中有如下几个次级分类项目:• Standard Primitives(标准几何体):相对简单的几何体,如立方体、球体和锥体等。• Extended Primitives(扩展几何体):相对复杂的几何体,如倒角柱体和纺锤体等。• Compound O...原创 2011-03-17 11:49:24 · 786 阅读 · 0 评论 -
o3d—立方体贴图例子逐步解释
第1步:定义纹理坐标 下面的步骤操作和代码指定纹理坐标,将其添加到一个数组,并添加到数组的缓冲区。该setVertexStream ( )函数指定如何读取缓冲区,并设置了一个顶点缓冲流。 指定(u,v)纹理坐标为每个顶点,并将其添加到一个数组( texCoordsArray ):view plaincopy to clipboardprint?var t...原创 2011-03-17 11:35:40 · 77 阅读 · 0 评论 -
webGL 第一个demos
欢迎来到WebGL教程的第一课!这一课以NeHe OpenGL教程的第二课内容为基础,NeHe OpenGL是一套针对游戏开发人员讲解3D图形技术的流行教程。本课将向你显示如何在一个网页上绘制一个三角形和一个正方形。也许它本身并不令人激动,但它却是一个不错的WebGL基础介绍;如果你理解它是如何工作的,那么剩下的学习将变得很简单......在支持WebGL的浏览器上运行本课代码显示如下:如果你已经...原创 2011-03-17 10:34:34 · 109 阅读 · 0 评论 -
webGL o3d与c3dl的比较(转发)
学习WebGL,在此之前也研究了一下google的O3D,后来发现google已经废止O3D 的开发,转向WebGL的开发。因此转向学习WebGL WebGL其实是基于HTML5的canvas标签进行画图,顺道学习一下HTML5的一些新特性 标签定义视频,比如电影片段或其他视频流 标签定义声音,比如音乐或其他音频流 标签定义图形,比如图表和其他图像 当...原创 2011-03-17 10:22:32 · 161 阅读 · 0 评论