自己动手写一个方法比分析他人的写的方法困难很多,由此而来的对程序的进一步理解也是分析别人的代码很难得到的. 一.先来几张效果图: 1.场景中有两个半径为1的球体,蓝色线段从球心出发指向球体的“正向” 2.物体被选中后改变纹理图片和透明度,可以使用“w.s.a.d.空格.ctrl”控制物体相对于物体的正向“前.后.左.右.上.下”移动,按住按键时间越长移动速度越快,绿色线段由球心指向物体运动方向,速度越快露出物体表面的部分越长,按“g”停止所有移动,再次点击物体取消选中状态. 3.可以选取多个物体…

自己动手写一个方法比分析他人的写的方法困难很多,由此而来的对程序的进一步理解也是分析别人的代码很难得到的. 一.先来几张效果图: 1.场景中有两个半径为1的球体,蓝色线段从球心出发指向球体的“正向” 2.物体被选中后改变纹理图片和透明度,可以使用“w.s.a.d.空格.ctrl”控制物体相对于物体的正向“前.后.左.右.上.下”移动,按住按键时间越长移动速度越快,绿色线段由球心指向物体运动方向,速度越快露出物体表面的部分越长,按“g”停止所有移动,再次点击物体取消选中状态. 3.可以选取多个物体…

本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框架的编写方法.在上一篇的基础上,要求读者具有简短英文阅读或者查字典的能力. 限于水平和时间,本文难免出现错误与遗漏,您在阅读过程中如果遇到错误或者疑问请在评论区中指出,我将尽快回复. 为提高JavaScript编程效率,建议使用WebStorm工具进行网页程序编写,WebStorm官网:http:/…

/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 //简单例程: //根据Tony Parisi著…

说起迷宫想必大家都很熟悉,个人感觉迷宫对人的方向感是很大的考验,至少我的方向感是不好的,尤其是在三维空间中.由于这段时间帮导师做项目用到了三维作图,便心血来潮想做个三维迷宫玩玩.要想画出三维的迷宫游戏,我们需要先从二维开始. 二维迷宫: 迷宫的程序描述:         现实生活中,我们经常将问题用数学的方法来描述并解决(数学建模).同样的,我们想用程序来解决问题,就得把问题程序化.废话不多说,进入正题:         我们可以用一个矩阵matrix来描绘整个迷宫:元素为1,代表是空的,元素为…

学习在Graphics-View框架中使用opengl进行3D编程,在网上找了一个不错的例子“3D Model Viewer”,很值得学习. 可以在http://www.oyonale.com/accueil.php?lang=en上下载一些3D模型来测试! 先来一张该例子的截图,看下效果: 该例子使用Graphics-View框架,绘制一个表示太阳的图元(item): 并在窗口的左上角区域放置了一个2D Widget控制以及说明面板(可以加载不同的3D模型,改变颜色,网格.法向量显示等!):…

有些形状,即使没有3D美术设计师提供模型,也能够用代码生成. 对于想保持原创性不想借用他人模型的独立开发人员来说,这无非是一个非常重要的途径. 今天献给大家的是用Shader编程实现的一颗红心,寄托下淡淡的思乡情. 博文首发地址: http://blog.csdn.net/duzixi/article/details/41221647 终于效果图:      watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHV6aXhp/font/5a6L5L2T/f…

为了确保任何区域的空间不被多于1个物体占用,我们需要基于物体间的空间信息来做碰撞检测. 碰撞检测中重要的事情是有大量的测试,因此需要理由GPU资源. 例如:如果我们有n个物体,一个物体将会碰撞n-1个物体(因为自己不会撞自己嘛),第二个物体撞剩下的n-2个.因此可能的碰撞是(n-1) * (n-2) * (n-3) ... 1 这几乎等于 n! / 2!*(n-2)! 在动画播放时,我们可能需要在每一帧检测碰撞,因此有效的碰撞检测是非常重要的.我们因此需要考虑下面的事情: 空间划分: 检测碰撞过…

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转.放大缩小这个三个图形,点击"Animate"就能让中间的那一个图元单独绕着某一个点旋转,表单最上方的"Axis"真的完全不知道拿来干嘛用的,觉得好累赘,而且是官网的 Demo,也没有解释...所以我今天得任务就是完全剖析这个例子! 本文例子:http://www.hightopo.cn/demo/3drotate/3d-rotate.html…

three是图形引擎,而web二维三维地图都是基于图形引擎的,所以拿three来开发需求简单的三维地图应用是没什么问题的. 1.坐标转换 实际地理坐标为经度.纬度.高度,而three.js使用的是右手坐标系x.y.z,本来考虑的是将经纬度坐标转换成墨卡托,再去和three的坐标系对应.而实际项目中,经纬度转墨卡托后,墨卡托的值太大,对应到three坐标系中,坐标距离原点太远,用户交互后,会有精度损失,于是先定义一个中间点,然后将墨卡托的结果减去这个中间点的值.(我自己是经度对应z轴,纬度对应x轴…